/* =========================================================
   recall — style.css
   ---------------------------------------------------------
   1.  tokens
   2.  reset + base
   3.  motion — hovers, presses, and things arriving
   4.  app shell — the bars around the page
   5.  page column — one layout for every screen
   6.  shared pieces — buttons and popups
   7.  home — the page
   8.  home — deck bar
   9.  home — renaming a deck in place
   10. the function box and the two tiles
   11. create window
   12. practice window
   13. right-click menu
   14. audio — layout
   15. audio — the video preview
   16. audio — sensing box and its settings
   17. audio — saved clips
   18. audio — the live row and its pulse
   19. small screens
   20. (the player was here)
   21. create — which answers a card may be mixed up with
   22. the top strip — hi, the search, the bin, help and the clock
   23. home — the board you arrange yourself
   24. cards — notes in, cards out
   25. one weight
   26. coming in
   27. chat — people, and the talking with them
   ========================================================= */

/* =========================================================
   1. tokens
   ========================================================= */
:root {
	--marks-in: 0px;     /* how far left of centre the page marks (and hi over them) sit — back at the centre, with the bar narrowed instead */
	/* the site's spring (by request, after the smooth bouncy transitions of candy edits): it runs a little
	   past where it is going and settles back — a damped spring, 1 − e^(−6t)·cos(8t), as a curve */
	--spring: linear(0, 0.1564, 0.3177, 0.4737, 0.6176, 0.7448, 0.8527, 0.9405, 1.0088, 1.0589, 1.0929, 1.1130, 1.1219, 1.1219, 1.1154, 1.1043, 1.0906, 1.0755, 1.0603, 1.0458, 1.0325, 1.0210, 1.0113, 1.0036, 0.9976, 0.9933, 0.9905, 0.9889, 0.9884, 0.9886, 0.9893, 0.9905, 0.9918, 0.9933, 0.9947, 0.9960, 0.9973, 0.9983, 0.9992, 0.9998, 1);
	/* the site's colour (the adjuster in the strip, siteTint() in app.html's head): --tint-main is what
	   black text and outlines become, --tint-fill what black fills become — a colour, or a gradient laid
	   over the whole window (fixed), so every filled thing shows its own part of one layer. both are
	   plain black until a colour is chosen */
	--tint-main: #000;
	--tint-fill: #000;
	--tint-top: #000;    /* the colour at the top of the window: what the strip shows */
	--tint-grad: #000;   /* the same gradient sized to the box it fills, for a big box inside the page (the log-in card) */
	--paper: #ffffff;
	--ink: var(--tint-main);
	/* fills: whichever of the two tokens is the black one fills with the dark colour, solid. the gradient
	   is kept for the big backgrounds only — the bar and its bumps, the strip, the names out of the bumps,
	   the log-in card — by request: a fixed gradient on things inside the page flickered as a page slid in
	   (a moving box draws its fixed background wrong for a moment), and buttons read better solid */
	--ink-fill: var(--tint-fill);   /* TEMPORARY, by request: fills show the fixed gradient again (solid was var(--tint-main)) */
	--paper-fill: var(--paper);
	--muted: #8a8a8a;   /* placeholder text only */
	--hover: #f1f1f1;   /* tinted hover surface */
	--line: var(--tint-main);
	--bar: var(--tint-fill);
	--bar-ink: #ffffff;
	--col: 34rem;      /* max width of the content column */
	/* each bump is an arc of a circle (radius 37.5 of the tile's 39, so about 38.5px); the bar is as
	   wide as that circle reaches from the window's edge to the crest, and each mark sits at its circle's
	   centre. the circles overlap down the bar, which is what makes the bumps */
	--rail: 65px;      /* narrowed by 6px (16 Oct, by request: the space left of the marks read too big) — it was --wave-w × 75/39 − --wave-out (70.8), rounded; keep it a whole number, a fraction draws a grey seam down the bar */
	--widget-pad: 1rem;    /* the one inset inside every home tile */
	/* keep --wave-w even: half of it is an offset, and a half pixel draws a grey line */
	--wave-w: 40px;
	--wave-h: 64px;   /* one bump per page mark down the bar: each mark sits in a bump */
	--wave-out: calc(var(--wave-w) * 6 / 39);   /* how far a crest reaches past --rail */
	--topbar: 52px;   /* a little shorter than a bump, by request (it was --wave-h, 64); the bumps start at its foot */
	--radius: 10px;
	--field: 42px;     /* height of every control in the deck bar */
	--card-row: 2.6rem;/* height of one row in the create window's list */
	--answer-row: 3.7rem;   /* height of one row of practice answers */
	/* the spacing scale. nothing should use a one-off value. */
	--gap: 2rem;       /* corners, and between separate blocks */
	--group: 1rem;
	--tight: 0.5rem;   /* controls sitting side by side in one bar */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);   /* soft, decelerating */
	--quick: 0.18s;    /* hovers and presses */
	--slow: 0.4s;      /* things arriving on screen */
	--drawer: cubic-bezier(0.4, 0.05, 0.2, 1);
	--drop: 0.088em;         /* amiko, the body face */
	--drop-title: 0.06em;    /* bitcount, the h1 and the tabs */
	--drop-num: -0.02em;     /* vt323 sits a hair low, so it is lifted */
	--font: 'Amiko', 'Segoe UI', system-ui, sans-serif;
	--title-font: 'Bitcount Prop Double', 'Courier New', monospace;
	--num-font: 'VT323', 'Courier New', monospace;
	--head-font: 'Pixelify Sans', 'Courier New', monospace;
}

html.inverted {
	--paper: var(--tint-main);
	--ink: #ffffff;
	--paper-fill: var(--tint-fill);   /* TEMPORARY: the gradient (solid was var(--tint-main)) */
	--ink-fill: var(--ink);
	--line: #ffffff;
	--hover: #151515;
}

/* =========================================================
   2. reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

:root {
	--cur-dot: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='13'%20cy='13'%20r='5.8'%20fill='%23000'%20stroke='%23fff'%20stroke-width='1.20'/%3E%3C/svg%3E") 11 11, default;
	--cur-tap: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='13'%20cy='13'%20r='5.8'%20fill='%23000'%20stroke='%23fff'%20stroke-width='1.20'/%3E%3C/svg%3E") 11 11, pointer;
	--cur-bar: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Crect%20x='11.9'%20y='5.5'%20width='2.2'%20height='15'%20rx='1.1'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'%20stroke-linejoin='round'/%3E%3Crect%20x='11.9'%20y='5.5'%20width='2.2'%20height='15'%20rx='1.1'%20fill='%23000'%20stroke='%23000'%20stroke-width='1.80'%20stroke-linejoin='round'/%3E%3C/svg%3E") 11 11, text;
	--cur-wide: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Cpath%20d='M9.4%208.5%205.5%2013l3.9%204.5z'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'%20stroke-linejoin='round'/%3E%3Cpath%20d='M16.6%208.5%2020.5%2013l-3.9%204.5z'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'%20stroke-linejoin='round'/%3E%3Cpath%20d='M9.4%208.5%205.5%2013l3.9%204.5z'%20fill='%23000'%20stroke='%23000'%20stroke-width='1.80'%20stroke-linejoin='round'/%3E%3Cpath%20d='M16.6%208.5%2020.5%2013l-3.9%204.5z'%20fill='%23000'%20stroke='%23000'%20stroke-width='1.80'%20stroke-linejoin='round'/%3E%3C/svg%3E") 11 11, col-resize;
	--cur-tall: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Cpath%20d='M8.5%209.4%2013%205.5l4.5%203.9z'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'%20stroke-linejoin='round'/%3E%3Cpath%20d='M8.5%2016.6%2013%2020.5l4.5-3.9z'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'%20stroke-linejoin='round'/%3E%3Cpath%20d='M8.5%209.4%2013%205.5l4.5%203.9z'%20fill='%23000'%20stroke='%23000'%20stroke-width='1.80'%20stroke-linejoin='round'/%3E%3Cpath%20d='M8.5%2016.6%2013%2020.5l4.5-3.9z'%20fill='%23000'%20stroke='%23000'%20stroke-width='1.80'%20stroke-linejoin='round'/%3E%3C/svg%3E") 11 11, row-resize;
	--cur-grab: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='13'%20cy='13'%20r='7'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'%20stroke-dasharray='3%203'/%3E%3Ccircle%20cx='13'%20cy='13'%20r='7'%20fill='none'%20stroke='%23000'%20stroke-width='1.80'%20stroke-dasharray='3%203'/%3E%3Ccircle%20cx='13'%20cy='13'%20r='3'%20fill='%23000'%20stroke='%23fff'%20stroke-width='1.20'/%3E%3C/svg%3E") 11 11, grab;
	--cur-held: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='13'%20cy='13'%20r='7'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'/%3E%3Ccircle%20cx='13'%20cy='13'%20r='7'%20fill='none'%20stroke='%23000'%20stroke-width='1.80'/%3E%3Ccircle%20cx='13'%20cy='13'%20r='3.6'%20fill='%23000'%20stroke='%23fff'%20stroke-width='1.20'/%3E%3C/svg%3E") 11 11, grabbing;
	--cur-move: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Cg%20fill='none'%20stroke='%23fff'%20stroke-width='1.20'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%204.6%2015.8%209.2h-5.6z'/%3E%3Cpath%20d='M13%2021.4%2010.2%2016.8h5.6z'/%3E%3Cpath%20d='M4.6%2013%209.2%2010.2v5.6z'/%3E%3Cpath%20d='M21.4%2013%2016.8%2015.8v-5.6z'/%3E%3C/g%3E%3Cg%20fill='%23000'%3E%3Cpath%20d='M13%204.6%2015.8%209.2h-5.6z'/%3E%3Cpath%20d='M13%2021.4%2010.2%2016.8h5.6z'/%3E%3Cpath%20d='M4.6%2013%209.2%2010.2v5.6z'/%3E%3Cpath%20d='M21.4%2013%2016.8%2015.8v-5.6z'/%3E%3C/g%3E%3C/svg%3E") 11 11, move;
	--cur-menu: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='9'%20cy='9'%20r='3.4'%20fill='%23000'%20stroke='%23fff'%20stroke-width='1.20'/%3E%3Cpath%20d='M13.5%2013.5h7M13.5%2017h7M13.5%2020.5h7'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'%20stroke-linecap='round'/%3E%3Cpath%20d='M13.5%2013.5h7M13.5%2017h7M13.5%2020.5h7'%20fill='none'%20stroke='%23000'%20stroke-width='1.80'%20stroke-linecap='round'/%3E%3C/svg%3E") 11 11, context-menu;
	--cur-no: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='13'%20cy='13'%20r='6.4'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'/%3E%3Cpath%20d='M8.5%2017.5%2017.5%208.5'%20fill='none'%20stroke='%23fff'%20stroke-width='3.00'%20stroke-linecap='round'/%3E%3Ccircle%20cx='13'%20cy='13'%20r='6.4'%20fill='none'%20stroke='%23000'%20stroke-width='1.80'/%3E%3Cpath%20d='M8.5%2017.5%2017.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.80'%20stroke-linecap='round'/%3E%3C/svg%3E") 11 11, not-allowed;
}
html { cursor: var(--cur-dot); }

.say-what {
	position: fixed;
	z-index: 200;
	left: 0;
	top: 0;
	max-width: 18rem;
	padding: calc(0.3rem + var(--drop)) 0.7rem calc(0.3rem - var(--drop));
	color: var(--paper);
	background: var(--ink-fill);
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(3px);
	transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
	pointer-events: none;
}
.say-what.is-up { opacity: 1; transform: none; }

html, body {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}
/* the page is never shrunk (16 Oct, by request — shrunk, every 1px outline came out a different thickness).
   down to 960 wide everything fits the window, the boxes simply narrower; narrower than that, the page keeps
   its 960 and the window shows it a little cut off, scrolling sideways to the rest */
html { overflow-x: auto; overflow-y: auto; }
body { min-width: 960px; min-height: 620px; height: auto; overflow: clip; }   /* body grows with the page (it was held to the window's height and clipped what home added); clip, not hidden, so it is never a scroller of its own */     /* the least the layout holds: a smaller (or zoomed-in) window scrolls to the rest, on the site's scrollbar */

a {
	color: inherit;
	font-style: italic;
	text-decoration: underline;
	text-underline-offset: 0.16em;
	cursor: var(--cur-tap);
}
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

p, li, dt, dd, h1, h2, h3, h4, h5, h6, code, pre, blockquote, figcaption,
.ask-why, .ask-said {
	-webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

button, button *, a, a *, label, label *, summary, summary *,
[role="button"], [role="button"] *, [draggable="true"], [draggable="true"] *,
.card-item, .card-item *, .recording-item, .recording-item *,
.scratch-song, .scratch-song * {
	-webkit-user-select: none; user-select: none;
}
.clip-text.is-editing { -webkit-user-select: text; user-select: text; }
input, textarea { -webkit-user-select: text; user-select: text; }
/* touch screens: no grey flash where a finger lands (the no-grey rule), and no ios callout on a held button
   — a long press opens the site's own menus instead (script.js). a picture in the chat keeps its callout */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], .deck-card, .card-item, .stage-card, .widget-card { -webkit-touch-callout: none; }
.said-file img { -webkit-touch-callout: default; }

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper-fill);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	user-select: none;
}

button, input, textarea { font: inherit; color: inherit; }

h1 {
	margin: 0;
	font-family: var(--title-font);
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0;
}
h2 { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700; }

[hidden] { display: none !important; }

:focus, :focus-visible { outline: none; }

::selection { color: var(--paper); background: var(--ink-fill); }

/* no box holds on to the wheel (overscroll-behavior: contain was taken off them all): one with nothing to scroll
   passes it straight to the page, and one at its end hands on to the page too (by request) */
#recordingList, .sense-controls,
.deck-list-slot, #cardList, #deckCardList {
	scrollbar-width: none;
}
/* the page column and the bar don't hold a wheel: over empty page it scrolls the page (a small window) */
.app-content, .rail { scrollbar-width: none; }
/* one scrollbar for the whole site, wherever one shows: a line exactly as thick as the boxes' own
   outline (1px), in the ink, held 4px in off the box's edge and kept clear of its rounded corners. the
   scrollbar is 6px of room and the thumb's transparent sides leave only that line. never set
   scrollbar-width on a box that should show it — chrome then ignores all of this */
::-webkit-scrollbar { width: 6px; height: 6px; background: none; }
::-webkit-scrollbar-track { background: none; margin: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink-fill); background-clip: padding-box; border: solid transparent; border-width: 0 4px 0 1px; }
::-webkit-scrollbar-thumb:horizontal { border-width: 1px 0 4px 0; }
::-webkit-scrollbar-corner, ::-webkit-resizer { background: none; }
/* the page's own scrollbars (a window smaller than 960x620, or zoomed in): the site's 1px line with the
   same room on both sides of it, starting under the black strip and clear of the black bar, so it never runs
   into either and gets cut off square */
/* the page's own scrollbars are not the browser's: a browser scrollbar takes a strip of the window, and beside the
   black strip and bar that strip read as them being cut off. chrome draws the page's from body's style (measured),
   so they are hidden there, and two of the site's own lines float over the page's edges instead (.page-bar,
   script.js): 1px, following the scroll, draggable, only while the page is bigger than the window */
body::-webkit-scrollbar { display: none; }
.page-bar {
	position: fixed;
	z-index: 2147482990;     /* under the colour layer, so it takes the site's colour like every line */
	display: none;
	touch-action: none;
	cursor: var(--cur-tap);
}
.page-bar.is-on { display: block; }
.page-bar::before { content: ''; position: absolute; background: var(--ink); border-radius: 1px; }
.page-bar.is-down { right: 0; width: 9px; }
.page-bar.is-down::before { top: 0; bottom: 0; left: 4px; width: 1px; }
.page-bar.is-across { bottom: 0; height: 9px; }
.page-bar.is-across::before { left: 0; right: 0; top: 4px; height: 1px; }
.app-content::-webkit-scrollbar,
.rail::-webkit-scrollbar,
#recordingList::-webkit-scrollbar,
.sense-controls::-webkit-scrollbar { width: 0; height: 0; }

/* =========================================================
   3. motion — hovers, presses, and things arriving
   ========================================================= */
button, summary {
	transition:
		color var(--quick) var(--ease),
		background-color var(--quick) var(--ease),
		border-color var(--quick) var(--ease),
		transform var(--quick) var(--ease);
}

@keyframes button-boing {
	0%   { transform: scale(1, 1); }
	30%  { transform: scale(0.97, 0.95); }
	100% { transform: scale(1, 1); }
}
button.boing { animation: button-boing 0.22s var(--ease); }
/* the site's colour is ONE layer over the whole window (by request: everything black — words, outlines,
   marks, fills — shows the gradient, each matching exactly the part of the gradient behind it). underneath,
   black stays black; the layer lies over everything, blended to screen, so black becomes the layer,
   white stays white, and every grey in between becomes the layer that much lighter — a placeholder or a
   faint time reads as the colour at a lower strength, never as a grey (lighten turned greys grey). nothing on the page carries a gradient of its own, so nothing can show the wrong part
   of it while it moves — the flash is gone by construction. the drawing page is cut out of it
   (--tint-hole), so a drawing keeps its own colours */
html.tint-layer.tinted {
	--tint-main: #000 !important;
	--tint-fill: #000 !important;
	--tint-grad: #000 !important;
}
/* the layer is the colour itself everywhere on the page. only exportify's frame takes the gentler tint
   (--tint-light, tint.js): it is cut out of the layer and .tint-patch, laid exactly over it, screens the tint
   there instead (by request — the tint across the whole page was too much) */
html { --layer-now: var(--tint-layer); }
html.tint-layer.tinted body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: var(--layer-now);
	mix-blend-mode: screen;
	pointer-events: none;
	clip-path: var(--tint-hole, none);
}

.square-button:active, .deck-card:active { transform: none; }

@keyframes rise-in {
	0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
	60%  { opacity: 1; transform: translateY(-3px) scale(1.004); }
	100% { opacity: 1; transform: none; }
}
/* a page's arrival is unfoldSection() in the script: its boxes unfold one after another. nothing here
   fades in — not the screen, not the panels, not the strip's marks (the question mark used to rise in
   on every refresh, and stood out) */

@keyframes fade-up {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

@keyframes panel-in {
	from { opacity: 0; transform: translateY(6px); }
	60%  { opacity: 1; }
	to   { opacity: 1; transform: none; }
}

@keyframes deal-in {
	from { opacity: 0; transform: translateY(10px) rotate(-1.5deg); }
	to   { opacity: 1; transform: none; }
}

@keyframes pop {
	0%   { transform: none; }
	40%  { transform: scale(1.05); }
	100% { transform: none; }
}
@keyframes shake {
	0%, 100% { transform: none; }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

@keyframes slide-in {
	from { opacity: 0; transform: translateX(-10px); }
	to   { opacity: 1; transform: none; }
}

.deck-list-slot.is-arriving .deck-card:nth-child(-n+6) { animation: slide-in 0.3s var(--ease) backwards; }
.deck-list-slot.is-arriving .deck-card:nth-child(1) { animation-delay: 0.02s; }
.deck-list-slot.is-arriving .deck-card:nth-child(2) { animation-delay: 0.06s; }
.deck-list-slot.is-arriving .deck-card:nth-child(3) { animation-delay: 0.1s; }
.deck-list-slot.is-arriving .deck-card:nth-child(4) { animation-delay: 0.14s; }
.deck-list-slot.is-arriving .deck-card:nth-child(5) { animation-delay: 0.18s; }
.deck-list-slot.is-arriving .deck-card:nth-child(6) { animation-delay: 0.22s; }

@keyframes drop-in {
	from { opacity: 0; transform: translateY(-6px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}
.share-panel:not([hidden]) {
	animation: drop-in 0.22s var(--ease) backwards;
}

/* =========================================================
   4. app shell — the bars around the page
   ========================================================= */
.app-shell {
	position: relative;
	display: flex;
	height: calc(max(620px, calc(var(--vh, 1vh) * 100)) + var(--shell-extra, 0px));     /* never squashed shorter than 620, and home adds what it needs (--shell-extra, script.js): a shorter window scrolls the page instead */
	overflow: hidden;
}

.app-shell::after {
	content: '';
	position: absolute;
	top: var(--topbar);     /* from the strip's foot: the strip is no longer over them (14 Oct), and they repeated up into it */
	bottom: 0;
	left: calc(var(--rail) - var(--wave-w) / 2);
	z-index: 3;
	width: var(--wave-w);
	pointer-events: none;
	/* the bumps, filled from the site's one colour layer and cut to their shape with a mask (they used
	   to be black pictures, which a colour cannot reach); the bar under them is cut the same way */
	background: var(--tint-fill);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='66' viewBox='0 0 39 66'%3E%3Cpath d='M0 0 H6 A 37.5 37.5 0 0 1 6 66 H0 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='66' viewBox='0 0 39 66'%3E%3Cpath d='M0 0 H6 A 37.5 37.5 0 0 1 6 66 H0 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
	-webkit-mask-repeat: repeat-y, no-repeat;
	mask-repeat: repeat-y, no-repeat;
	-webkit-mask-size: var(--wave-w) var(--wave-h), calc(var(--wave-w) * 6 / 39) 100%;
	mask-size: var(--wave-w) var(--wave-h), calc(var(--wave-w) * 6 / 39) 100%;   /* the strip that hides the seams stops exactly at the dips: any wider and it poked out of each inner corner */
	-webkit-mask-position: 0 0, 0 0;
	mask-position: 0 0, 0 0;   /* the first bump starts at the strip's foot, where this starts */
	clip-path: inset(0 calc(var(--wave-w) / 2 - var(--wave-out) - 1px) 0 0);
}

.app-shell::before {
	content: '';
	position: absolute;
	top: var(--topbar);
	bottom: 0;
	left: calc(var(--rail) - var(--wave-w) / 2);
	z-index: 4;
	width: var(--wave-w);
	pointer-events: none;
	/* stroke 39/40 so it lands on 1px (the tile is drawn 39 wide, shown at --wave-w); nudged half of it out — redo if --wave-w changes */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='66' viewBox='0 0 39 66'%3E%3Cpath d='M6.61 0 A 37.5 37.5 0 0 1 6.61 66' fill='none' stroke='%23ffffff' stroke-width='0.975' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-size: var(--wave-w) var(--wave-h);
	background-position: 0 0;
}

.app-right {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.rail {
	position: relative;
	z-index: 2;
	flex: 0 0 var(--rail);
	overflow: hidden;
	background: var(--bar);   /* the black column the bumps hang off; the page marks ride over it */
	/* its right-hand stretch is carved into the bumps' dips: whole up to the strip at the dips, and
	   bump-shaped past it (the paper used to be painted over it instead, which a colour layer can't do) */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='66' viewBox='0 0 39 66'%3E%3Cpath d='M0 0 H6 A 37.5 37.5 0 0 1 6 66 H0 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='66' viewBox='0 0 39 66'%3E%3Cpath d='M0 0 H6 A 37.5 37.5 0 0 1 6 66 H0 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
	-webkit-mask-repeat: repeat-y, no-repeat;
	mask-repeat: repeat-y, no-repeat;
	-webkit-mask-size: var(--wave-w) var(--wave-h), calc(var(--rail) - var(--wave-w) / 2 + var(--wave-w) * 6 / 39) 100%;
	mask-size: var(--wave-w) var(--wave-h), calc(var(--rail) - var(--wave-w) / 2 + var(--wave-w) * 6 / 39) 100%;
	-webkit-mask-position: calc(var(--rail) - var(--wave-w) / 2) var(--topbar), 0 0;
	mask-position: calc(var(--rail) - var(--wave-w) / 2) var(--topbar), 0 0;
}

.app-body {
	display: flex;
	flex: 1;
	min-width: 0;
	min-height: 0;
}

.app-content {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	margin-top: var(--topbar);     /* starts under the strip, not behind it: the strip is no longer over the page
	                                  (14 Oct), and a page sliding in from above was drawn over it for a moment —
	                                  the white flash moving up to home. its own clip now stops at the strip's foot */
}

/* =========================================================
   5. page column — one layout for every screen
   ========================================================= */
.screen {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	width: 100%;
	max-width: var(--col);
	min-height: 100%;
	justify-content: safe center;
	margin: 0 auto;
	padding: var(--gap);
	text-align: center;
}

#homeScreen {
	max-width: none;
	height: 100%;
	min-height: 0;
	justify-content: flex-start;
	gap: var(--group);
	padding: var(--group);
	padding-left: calc(var(--wave-out) + 12px);   /* 10 read as tight against the crests, 16 as too far */
	overflow: hidden;     /* the page never scrolls — the boxes do */
	text-align: left;
}

.modal-veil {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	place-items: center;
	padding: var(--gap);
	/* nothing behind a window changes: a see-through wash turned the black bar and every edge grey */
	background: none;
	animation: veil-in 0.26s var(--ease);
}
@keyframes veil-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes panel-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

@keyframes veil-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@keyframes panel-drop {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(12px) scale(0.96); }
}
.modal-veil.is-leaving {
	pointer-events: none;   /* it's on its way out; clicks go through */
	animation: veil-out 0.26s var(--ease) forwards;
}

.modal-veil.is-leaving .modal-panel {
	animation: panel-drop 0.32s cubic-bezier(0.7, 0, 0.78, 0) forwards;
}
.modal-title {
	flex: none;
	margin: 0;
	padding-bottom: var(--group);
	border-bottom: 1px solid var(--line);
	font-family: var(--head-font);
	font-size: 1.35rem;
	font-weight: 400;
	text-align: center;
}

.modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--group);
	width: min(34rem, 100%);
	max-height: 100%;
	padding: var(--group) var(--gap) var(--gap);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	text-align: left;
	animation: panel-pop 0.32s cubic-bezier(0.22, 1, 0.3, 1);
}
.study-screen { width: min(40rem, 100%); }
/* create and practice take most of the screen, by request — still a window, with air all round it */
.modal-panel.maker-screen, .modal-panel.study-screen {
	width: min(76rem, calc(var(--vw, 1vw) * 82));
	height: min(100%, calc(var(--vh, 1vh) * 82));
}
.maker-screen #cardList { flex: 1; height: auto; min-height: 0; overflow-y: auto; }
.study-screen .question-box { display: flex; flex: 1; min-height: 0; }
.study-screen #studyQuestion { flex: 1; }
.study-screen .answer-options { flex: 1.3; }

.modal-close {
	position: absolute;
	top: 0.4rem;
	right: calc(0.5rem - 3px);   /* the × lands as far off the right edge as off the top: 15px each */
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding-top: 4px;      /* the × rides high in its line box */
	color: inherit;
	background: none;
	border: 0;
	border-radius: 6px;
	font-size: 1.4rem;
	line-height: 1;
	cursor: var(--cur-tap);
}
/* the cross does nothing on hover or press, by request: no fill, no movement, no boing */
.modal-close, .modal-close:hover, .modal-close:active, .modal-close:focus-visible {
	color: inherit;
	background: none;
	transform: none;
	transition: none;
	animation: none;
}

/* =========================================================
   6. shared pieces — buttons and popups
   ========================================================= */
.basic-button {
	align-self: center;
	padding: calc(0.65rem + var(--drop)) min(1.5rem, 10%) calc(0.65rem - var(--drop));
	color: var(--paper);
	background: var(--ink-fill);
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-weight: 600;
	cursor: var(--cur-tap);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.basic-button.is-solid {
	color: var(--paper);
	background: var(--ink-fill);
	border-color: var(--ink);
}
.basic-button.is-solid:disabled { cursor: var(--cur-dot); }

.basic-button.is-plain {
	color: var(--ink);
	background: var(--paper-fill);
	border-color: var(--ink);
}
.basic-button.is-plain:hover, .basic-button.is-plain:focus-visible {
	color: var(--paper);
	background: var(--ink-fill);
}

.empty-message {
	display: flex;
	flex: 1;
	flex-direction: column;   /* so one can stack a few lines in here */
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.9rem;
	color: var(--ink);
	text-align: center;
}

#deckCardList .empty-message { position: relative; gap: 0.7rem; }
/* the words and the face sit together in the middle as one group, at any size of the box (they were
   hung above a face pinned to the middle, so the whole lot sat low and slid off when the box was resized) */
.empty-words {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
}
.empty-say { font-size: 0.95rem; font-weight: 700; }
.empty-hint { font-size: 0.85rem; }
.empty-face { font-size: 1.3rem; }

/* =========================================================
   7. home — the page
   ========================================================= */
.quick-panel, .recorder-panel, .home-panel, .chat-panel { width: 100%; }

.home-panel {
	--tile: calc((100cqw - 4 * var(--group)) / 5);   /* five tiles across the page, the fixed one included */
	position: relative;
	container-type: inline-size;   /* the board's rows are worked out from its width */
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--group);
	min-height: 0;
	/* a window too short for the run, the tiles and a few lines of notes scrolls home rather than squashing the
	   notes to nothing; the 8px of padding, given back in the margin, keeps the board's lifted tiles uncut */
	overflow: hidden;   /* never a scroller of its own: a scroller inside the scrolling page caught the swipe. the page
	                       grows by what home needs instead (--shell-extra) */
	margin: -8px;
	padding: 8px;
	width: auto;   /* not 100%: the negative margins have to widen it, not slide it */
}

/* under the board (14 Oct): a pad to jot on and a way into every page, filling what was an empty half */
.home-lower { display: grid; flex: 1; grid-template-columns: calc(var(--tile) * 3 + var(--group) * 2) minmax(0, 1fr); gap: var(--group); min-height: 11rem; }   /* never squashed past its head and a few lines: past that, home scrolls (.home-panel) */   /* on the board's own columns: the pad under the first three, the pages under the last two */
.home-box {
	display: flex;
	flex-direction: column;
	gap: var(--tight);
	min-height: 0;
	padding: var(--widget-pad);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 1.4rem;
}
/* the pad: ruled like a notebook in hairlines of the ink, the words sitting on the lines */
.home-jot textarea {
	flex: 1;
	min-height: 0;
	padding: 0.2rem 0.4rem;
	color: var(--ink);
	background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.9rem - 1px), var(--line) calc(1.9rem - 1px), var(--line) 1.9rem);
	background-attachment: local;
	border: 0;
	outline: none;
	resize: none;
	font-family: var(--font);
	font-size: 0.95rem;
	line-height: 1.9rem;
}
.home-jot textarea::placeholder { color: var(--muted); }
/* flip: a card from your decks, turned over on a press like a real one — the question on white, the
   answer on the other side in black — springing as it turns. next deals another */
.flip-card {
	position: relative;
	flex: 1;
	min-height: 0;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	perspective: 1200px;
	cursor: var(--cur-tap);
}
.flip-inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.75s var(--spring);
}
.flip-card.is-over .flip-inner { transform: rotateY(180deg); }
.flip-card.is-dealt .flip-inner { animation: flip-deal 0.5s var(--spring); }
@keyframes flip-deal { from { transform: translateX(14px) scale(0.94); } to { transform: none; } }
.flip-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--tight);
	padding: var(--group);
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 1rem;
	backface-visibility: hidden;
	overflow: hidden;
}
.flip-back { color: var(--paper); background: var(--ink-fill); transform: rotateY(180deg); }
.flip-tag { font-family: var(--head-font); font-size: 0.85rem; line-height: 1; }
.flip-words { display: -webkit-box; max-width: 100%; overflow: hidden; font-size: 1.15rem; line-height: 1.4; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow-wrap: anywhere; }
.flip-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tight); min-height: 1.8rem; }
.flip-from { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.flip-next { display: grid; flex: none; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; color: var(--ink); background: none; border: 0; cursor: var(--cur-tap); transition: transform 0.45s var(--spring); }
.flip-next svg { width: 1.2rem; height: 1.2rem; }
.flip-next:hover { transform: translateX(3px); }
.flip-next[hidden] { display: none; }

/* =========================================================
   8. home — deck bar
   ========================================================= */
/* boxes sit a full step apart; an icon sits only --tight off whatever is beside it, so it reads as
   part of that box's row rather than a box of its own */
.deck-bar { display: flex; align-items: center; gap: var(--tight); }

.square-button {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--field);
	height: var(--field);
	padding: 0;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	line-height: 1;
	cursor: var(--cur-tap);
}
/* no colour change on hover any more (by request): the symbol's own grow-and-rock is the hover now, and a
   fill swap under it drowned it out (see "icon buttons rock on hover") */

.deck-form { display: flex; flex: 1; min-width: 0; gap: var(--tight); }
.deck-form input {
	flex: 1;
	min-width: 0;
	height: var(--field);
	padding: 0 0.75rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.deck-form input::placeholder { color: var(--muted); }
.deck-form .basic-button { flex: none; height: var(--field); padding: calc(var(--drop) * 2) 1.1rem 0; }

.square-button.is-solid {
	color: var(--paper);
	background: var(--ink-fill);
	border-color: var(--ink);
}

.share-picker { position: relative; z-index: 30; flex: none; }

.share-panel {
	position: fixed;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: 28rem;
	max-width: calc(var(--vw, 1vw) * 78);
	padding: var(--tight);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	text-align: left;
	transform-origin: top right;
}
.share-panel label { font-weight: 700; font-size: 0.85rem; }
.share-panel label + .share-row { margin-bottom: 0.5rem; }

.share-row { display: flex; align-items: center; gap: var(--tight); }
/* the code boxes are exactly as tall as load and copy beside them, can't be dragged bigger, and
   scroll on a hair of a black line instead of the system's thick bar */
.share-row textarea {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	height: var(--field);
	padding: calc((var(--field) - 2px - 0.8rem * 1.4) / 2) 0.7rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 0.8rem;
	line-height: 1.4;
	resize: none;
	overflow-y: auto;
	overflow-wrap: anywhere;
	/* no scrollbar-width here: chrome drops the ::-webkit-scrollbar drawing whenever it is set, and
	   'thin' is far wider than this */
}
.share-row textarea::-webkit-resizer { display: none; }
.share-row textarea::placeholder { color: var(--muted); }
.share-row .basic-button { flex: none; width: 3.8rem; height: var(--field); padding: calc(var(--drop) * 2) 0 0; }   /* one width, so both boxes line up; 3.8rem so the word fits the pill rather than floating in it */

.share-note { min-height: 1.2rem; margin: 0; font-size: 0.8rem; }

.home-body {
	display: flex;
	flex: 1;
	min-height: 0;
}

.deck-side, .card-side {
	display: flex;
	flex-direction: column;
	gap: var(--group);
	min-height: 0;
}
/* a small capitals label right over the new-deck field */
.deck-label {
	margin: 0 0 calc(var(--tight) - var(--group));
	padding-left: 0.2rem;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.deck-side {
	flex: 0 1 50%;   /* its grip writes the width straight onto it */
	min-width: 0;
	overflow: hidden;
}
.card-side {
	flex: 1;
	min-width: 19rem;
	gap: 0;
}
.card-side > .quick-panel { margin-bottom: var(--group); }
.card-side > .deck-stage { flex: 1; min-height: 0; }

.pane-split.is-across {
	width: auto;
	height: var(--grip, var(--group));
	cursor: var(--cur-tall);
}
.pane-split.is-across::after {
	top: 50%;
	right: 0;
	bottom: auto;
	left: 0;
	width: auto;
	height: 1px;
}
.pane-split.is-across.is-tight::before {
	left: 0;
	right: 0;
	top: -10px;
	bottom: -10px;
}
.splitting-down, .splitting-down * { cursor: var(--cur-tall) !important; user-select: none; }

.pane-split {
	position: relative;
	flex: none;
	width: var(--grip, var(--group));
	cursor: var(--cur-wide);
	touch-action: none;
}
.pane-split::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--line);
	opacity: 0;
}
.pane-split:hover::after,
.pane-split:focus-visible::after,
.pane-split.is-dragging::after { opacity: 1; }

.pane-split.is-tight::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -10px;
	right: -10px;
}
.splitting, .splitting * { cursor: var(--cur-wide) !important; user-select: none; }

.deck-side, .clip-side { min-width: 0; }
.deck-card-text, .stage-card-text, .clip-text, .notes-card-text { min-width: 0; }
.deck-card, .stage-card, .recording-item { min-width: 0; }
.deck-side h2, .clip-side h2, .stage-head h2 {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.deck-list-slot {
	contain: layout paint;
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--tight);
	width: 100%;
	min-height: 0;
	padding: var(--tight);
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	scrollbar-width: none;
}
.deck-list-slot::-webkit-scrollbar { width: 0; }

.deck-card {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	padding: 0.6rem 0.7rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: left;
	cursor: var(--cur-tap);
	transition-property: color, background-color, border-color;   /* a drag moves it by transform */
}
.deck-card:hover { color: var(--paper); background: var(--ink-fill); }
.deck-card.active-deck {
	color: var(--paper);
	background: var(--ink-fill);
	border-color: var(--ink);
	cursor: var(--cur-dot);
}

.deck-card.is-lifted {
	position: relative;
	z-index: 2;
	color: var(--ink);
	background: var(--paper-fill);
	will-change: transform;
}
.deck-card.active-deck.is-lifted { color: var(--paper); background: var(--ink-fill); }

.sorting-rows .deck-card:not(.active-deck):hover { color: var(--ink); background: var(--paper-fill); }

.deck-shape {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
}

.deck-card-text strong,
.deck-card-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-card-text strong { font-size: 0.95rem; }
.deck-card-text small { font-size: 0.78rem; }

.deck-stage {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--tight);
	min-width: 0;
	min-height: 0;
	padding: var(--tight);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.panel-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-width: 0;
	margin: 0 0.35rem;
	padding: 0 0.35rem calc(var(--tight) + 3px);
	border-bottom: 1px solid var(--line);
}
.panel-head h2 {
	margin: 0;
	line-height: 1.25;
	min-width: 0;
	overflow: hidden;
	font-family: var(--head-font);
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.stage-head { flex: none; }

#deckCardList .stage-card {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.6rem 0.7rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.stage-card-text {
	flex: 1;
	min-width: 0;
	cursor: var(--cur-bar);
}

.stage-line {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	min-width: 0;
}
.line-tag {
	flex: none;
	width: 0.8rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
}
.stage-card-text strong,
.stage-card-text small { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-card-text strong { font-size: 0.95rem; font-weight: 600; }
.stage-card-text small { font-size: 0.8rem; }

.stage-card-edit {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}
.stage-card-edit .stage-line { width: 100%; }
.stage-card-edit .stage-line input { flex: 1; min-width: 0; }
.stage-card-edit input {
	width: 100%;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	font: inherit;
	line-height: inherit;
}
.stage-card-edit input:focus { outline: none; }
.stage-card-edit .edit-question { font-size: 0.95rem; font-weight: 600; }
.stage-card-edit .edit-answer { font-size: 0.8rem; }

.card-handle {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 1.25rem;
	height: 2rem;
	padding: 0 0.3rem;
	background: none;
	border: 0;
	cursor: var(--cur-grab);
	touch-action: none;   /* a drag here moves the card, not the list */
}
.card-handle span {
	display: block;
	height: 1px;
	background: var(--line);
}
.stage-card.is-lifted {
	position: relative;
	z-index: 2;
	background: var(--paper-fill);
	outline: 1px solid var(--line);
	outline-offset: -1px;
	will-change: transform;
}

.stage-card-actions {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	transition:
		opacity 0.2s var(--ease),
		transform 0.26s var(--ease);
}
.stage-card.editing .stage-card-actions {
	opacity: 0;
	transform: scale(0.55);
	pointer-events: none;
}

.stage-card-action {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: var(--cur-tap);
	transition: transform 0.2s var(--ease);
}
.stage-card-action:hover { transform: scale(1.18); }

.stage-card-action .mark-bin,
.stage-card-action .mark-yes {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition:
		opacity 0.26s var(--ease),
		transform 0.42s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.stage-card-action .mark-bin {
	padding-top: 4px;      /* the × rides high in its line box */
	transform: rotate(0deg) scale(1);
}
.stage-card-action .mark-yes {
	opacity: 0;
	transform: rotate(-135deg) scale(0.3);
}
.stage-card.is-arming .mark-bin {
	opacity: 0;
	transform: rotate(135deg) scale(0.3);
}
.stage-card.is-arming .mark-yes {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

.stage-card-action .mark-yes::before {
	content: '';
	display: block;
	width: 0.32em;
	height: 0.575em;
	margin-top: -0.135em;
	border-right: 0.09em solid currentColor;
	border-bottom: 0.09em solid currentColor;
	transform: rotate(45deg);
}

.stage-card-cancel {
	position: absolute;
	top: 50%;
	right: 100%;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-right: 0.1rem;
	padding: 4px 0 0;
	color: inherit;
	background: none;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: var(--cur-tap);
	opacity: 0;
	transform: translate(0.45rem, -50%) scale(0.6);
	pointer-events: none;
	transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.stage-card.is-arming .stage-card-cancel {
	opacity: 1;
	transform: translate(0, -50%) scale(1);
	pointer-events: auto;
}
.stage-card.is-arming .stage-card-cancel:hover {
	transform: translate(0, -50%) scale(1.18);
}

/* =========================================================
   9. home — renaming a deck in place
   ========================================================= */
.deck-card.is-renaming {
	cursor: var(--cur-dot);
	color: var(--paper);
	background: var(--ink-fill);
	border-color: var(--ink);
}
.deck-inline-input {
	flex: 1;
	min-width: 0;
	padding: 0.5rem 0.4rem;
	background: var(--paper-fill);
	border: 1px solid var(--ink);
	border-radius: 6px;
	font-weight: 600;
}

/* =========================================================
   10. the function box and the two tiles
   ========================================================= */
.quick-panel {
	display: flex;
	flex: none;
	gap: var(--group);
}

.quick-action {
	display: flex;
	flex: 1;
	min-width: 9rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: 0;
	padding: calc(0.7rem + 5px) 1rem 0.7rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: var(--cur-tap);
	transition: transform var(--quick) var(--ease);
}
.quick-action.primary { color: var(--paper); background: var(--ink-fill); border-color: var(--ink); }

.quick-action:hover { transform: translateY(-4px); }
.quick-action:active { transform: translateY(-1px); }
.quick-action:hover small { animation: face-wiggle 0.5s var(--ease); }

@keyframes face-wiggle {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(-4deg); }
	50%  { transform: rotate(4deg); }
	75%  { transform: rotate(-2deg); }
	100% { transform: rotate(0deg); }
}

.quick-action .action-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
}
.quick-action strong, .quick-action small { display: block; }
.quick-action small {
	order: -1;
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.2;
	transform-origin: center center;
	transition: transform 0.25s var(--ease);
}
.quick-action strong { font-size: 0.95rem; font-weight: 700; }
.quick-action b { display: none; }

/* =========================================================
   11. create window
   ========================================================= */
.form-note:empty { display: none; }

.maker-bar {
	position: relative;   /* the note hangs off this */
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--tight);
	width: 100%;
}

.maker-entry {
	display: flex;
	flex: none;
	align-items: stretch;
	gap: var(--tight);
	width: 100%;
}
.maker-fields {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--tight);
	min-width: 0;
}

.maker-bar button.add-upright {
	flex: none;
	align-self: stretch;
	width: var(--field);
	height: auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-upright span {
	display: block;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-transform: uppercase;
	font-family: var(--title-font);
	font-size: 1.45rem;
	font-weight: 400;
	letter-spacing: -0.25em;
	position: relative;
	top: -1px;
}

.maker-field {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	height: var(--field);
	padding: 0 0.8rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.field-tag {
	flex: none;
	width: 0.9rem;
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
}
.maker-field input {
	flex: 1;
	min-width: 0;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	font: inherit;
}
.maker-field input:focus { outline: none; }
.maker-field input::placeholder { color: var(--muted); }
.maker-bar .basic-button { flex: none; height: var(--field); padding: calc(var(--drop) * 2) 1.5rem 0; }

.form-note {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.25rem);
	margin: 0;
	font-weight: 700;
	font-size: 0.85rem;
}

#cardList, #recordingList {
	contain: layout paint;
	width: 100%;
	margin: 0;
	padding: 0 0.25rem 0 0.25rem;
	overflow-y: auto;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	list-style: none;
	text-align: left;
	scrollbar-width: none;
}
#cardList::-webkit-scrollbar,
#recordingList::-webkit-scrollbar,
#deckCardList::-webkit-scrollbar { display: none; }

#deckCardList {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	text-align: left;
	scrollbar-width: none;
	position: relative;   /* so a row's offsetTop is its slot in here */
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--tight);
	min-height: 0;
}

#cardList {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--tight);
	height: calc((4 * var(--card-row)) + (5 * var(--tight)) + 2px);
	padding: var(--tight);
}

#recordingList {
	position: relative;    /* so a row's offsetTop is its slot in here */
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--tight);
	min-width: 0;
	min-height: 0;
	padding: var(--tight);
}

.square-button .icon-pause { display: none; }
.square-button.is-packing .icon-download { display: none; }
.square-button.is-packing .icon-pause { display: block; }

.square-button:disabled { cursor: var(--cur-dot); }
.square-button:disabled:hover { color: var(--ink); background: var(--paper-fill); }
.square-button:disabled:active { transform: none; }

#cardList .card-item {
	display: flex;
	align-items: center;
	flex: none;
	gap: 0.75rem;
	height: var(--card-row);
	margin: 0;
	padding: 0 0.6rem;
	border-radius: 6px;
	cursor: var(--cur-menu);
}
#cardList .card-item:hover { background: var(--hover); }
#cardList .card-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* =========================================================
   12. practice window
   ========================================================= */
.question-box { position: relative; flex: none; width: 100%; }

#studyQuestion {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 8rem;
	margin: 0;
	padding: 1.5rem 1.25rem;
	overflow-y: auto;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: clamp(1.3rem, calc(var(--vw, 1vw) * 4), 2.1rem);
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
	animation: rise-in 0.34s var(--ease) backwards;
}

#studyQuestion.is-empty {
	font-size: 1.15rem;
	font-weight: 400;
}

.answer-options {
	display: grid;
	flex: 1;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--tight);
	min-height: calc((2 * var(--answer-row)) + var(--tight));
	margin: 0;
}

.answer-options[data-count="1"] .answer-button {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}
.answer-options[data-count="2"] .answer-button {
	grid-row: 1 / -1;
}
.answer-options[data-count="3"] .answer-button.is-wide {
	grid-row: 2;
	grid-column: 1 / -1;
}
.answer-button {
	position: relative;   /* the ring on a right answer hangs off it */
	display: flex;
	align-items: center;
	justify-content: center;
	animation: deal-in 0.3s var(--ease) backwards;
	min-width: 0;
	min-height: 0;
	padding: 1rem 1.25rem;
	font-size: 1.05rem;
	text-align: center;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-weight: 600;
	overflow-wrap: anywhere;
	hyphens: auto;
	cursor: var(--cur-tap);
}
.answer-button:nth-child(1) { animation-delay: 0.02s; }
.answer-button:nth-child(2) { animation-delay: 0.07s; }
.answer-button:nth-child(3) { animation-delay: 0.12s; }
.answer-button:nth-child(4) { animation-delay: 0.17s; }
.answer-button:hover { color: var(--paper); background: var(--ink-fill); }

.answer-button:active:not(.correct):not(.incorrect) {
	color: var(--paper);
	background: var(--ink-fill);
	transform: none;
}
.answer-button.correct:hover, .answer-button.incorrect:hover { color: inherit; background: inherit; }

.answer-button.correct {
	color: var(--ink);
	background: var(--paper-fill);      /* white, by request, so the tick drawn over it stands out */
	border-color: var(--ink);
}
.answer-button.correct:not(.is-right) { animation: pop 0.35s var(--ease); }
/* after a wrong pick the right answer turns solid black, so there is no missing which one it was;
   a right pick stays white under its tick */
.answer-button.correct:not(.is-right),
.answer-button.correct:not(.is-right):hover {
	color: var(--paper);
	background: var(--ink-fill);
	border-color: var(--ink);
}

.answer-word { display: block; }

.answer-mark {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	transform: translate(-50%, -50%);
	pointer-events: none;
	animation: mark-in 0.3s var(--ease) backwards;
}
@keyframes mark-in {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.answer-mark svg { display: block; width: 100%; height: 100%; }

.answer-mark.is-tick path {
	stroke-dasharray: 25;
	stroke-dashoffset: 25;
	animation: mark-draw 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.06s forwards;
}
.answer-mark.is-cross path {
	stroke-dasharray: 18;
	stroke-dashoffset: 18;
	animation: mark-draw 0.16s cubic-bezier(0.4, 0, 0.2, 1) 0.04s forwards;
}
.answer-mark.is-cross path:last-child { animation-delay: 0.16s; }
@keyframes mark-draw {
	to { stroke-dashoffset: 0; }
}

.answer-button.is-right { animation: right-swell 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes right-swell {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.answer-button.incorrect {
	color: var(--ink);
	background: var(--paper-fill);
	border-color: var(--ink);
	animation: wrong-knock 0.5s ease-in-out forwards;
}
@keyframes wrong-knock {
	0%   { transform: none; color: var(--paper); background: var(--ink-fill); }
	14%  { transform: translateX(-5px); color: var(--paper); background: var(--ink-fill); }
	30%  { transform: translateX(4px); color: var(--ink); background: var(--paper-fill); }
	46%  { transform: translateX(-3px); }
	62%  { transform: translateX(2px); }
	100% { transform: scale(0.97); }
}

.answer-options.is-answered .answer-button:not(.correct):not(.incorrect) {
	transform: scale(0.985);
	transition: transform 0.3s var(--ease);
}

#studyFeedback:empty { display: none; }
#studyFeedback {
	position: absolute;
	right: 0.75rem;
	bottom: 0.5rem;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
}

/* =========================================================
   13. right-click menu
   ========================================================= */
.context-menu {
	position: fixed;
	z-index: 2147483646;     /* the frontmost thing on every page, always (by request): over windows, the drawing, the
	                            colour layer and every floating list — only the sparkles' own layer is higher */
	--own-edge: 1px;         /* over the colour layer, so it carries its own copy, outline included */
	width: 7.5rem;
	padding: 0.2rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.context-action {
	display: block;
	width: 100%;
	padding: 0.28rem 0.5rem;
	background: none;
	border: 0;
	border-radius: 6px;
	font-size: 0.8rem;
	line-height: 1.2;
	text-align: left;
	cursor: var(--cur-tap);
}
.context-action:hover:not(:disabled) { background: var(--hover); }
.context-action:disabled { color: var(--ink); opacity: 0.35; cursor: var(--cur-no); }

/* =========================================================
   14. audio — layout
   ========================================================= */
.recorder-panel {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--group);
	min-height: 0;
}

.audio-bar {
	position: relative;   /* the confirm popup hangs off it */
	display: flex;
	align-items: center;
	gap: var(--group);
}
.audio-bar .basic-button { height: var(--field); padding: calc(var(--drop) * 2) 1.4rem 0; }
.audio-bar .record-status { flex: 1; margin: 0 0 0 0.5rem; }
.audio-bar > #senseToggle { margin-left: calc(var(--tight) - var(--group)); }   /* an icon: tight */

@keyframes confirm-in {
	from { opacity: 0; transform: translateY(-6px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}
.confirm-pop {
	position: fixed;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: var(--tight);
	width: 17rem;
	max-width: calc(var(--vw, 1vw) * 78);
	padding: 0.8rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	text-align: left;
	font-size: 0.9rem;
	transform-origin: top right;
	animation: confirm-in 0.22s var(--ease);
}
.confirm-answers { display: flex; gap: var(--tight); }
.confirm-answers .chip-button { flex: 1; }
.chip-button {
	padding: 0.25rem 0.85rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: var(--cur-tap);
}
.chip-button:hover { color: var(--paper); background: var(--ink-fill); }
#confirmChipYes { color: var(--paper); background: var(--ink-fill); }
#confirmChipYes:hover { color: var(--ink); background: var(--paper-fill); }

.square-button.is-armed {
	color: var(--paper);
	background: var(--ink-fill);
	border-color: var(--ink);
}

.audio-body {
	display: flex;
	flex: 1;
	gap: 0;
	min-height: 0;
}

.clip-column {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.clip-folder {
	display: grid;
	grid-template-columns: auto 1fr auto;
	flex: none;
	align-items: center;
	gap: var(--tight);
	min-width: 0;
	padding: 0 0 var(--group);
}
.clip-folder-side {
	display: flex;
	align-items: center;
	gap: var(--tight);
	min-width: 0;
}
.clip-folder-side.is-right { justify-content: flex-end; }

.bundle-list {
	display: flex;
	flex-direction: column;
	gap: var(--tight);
	max-height: 18rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: none;
}
.bundle-list::-webkit-scrollbar { display: none; }
.bundle-list:empty { display: none; }

.bundle-one {
	display: flex;
	align-items: baseline;
	gap: var(--tight);
	width: 100%;
	min-width: 0;
	height: var(--field);
	padding: calc(var(--drop) * 2) 0.9rem 0;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
	text-align: left;
	cursor: var(--cur-tap);
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.bundle-one:hover { color: var(--paper); background: var(--ink-fill); }
.bundle-one strong {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bundle-one small { flex: none; font-family: var(--num-font); font-size: 1rem; }

.bundle-say {
	margin: 0;
	padding: 0 0.35rem;
	font-size: 0.85rem;
	text-align: center;
}
.bundle-say:empty { display: none; }
.bundle-where { align-self: stretch; height: var(--field); padding: calc(var(--drop) * 2) min(1.5rem, 10%) 0; }

.folder-screen .ask-body { gap: var(--group); }

.folder-screen #folderName {
	flex: none;
	width: 100%;
}

.folder-other {
	align-self: center;
	margin-top: calc(var(--group) * -0.5);
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.78rem;
	text-decoration: underline;
	text-underline-offset: 0.16em;
	cursor: var(--cur-tap);
}

.folder-say {
	margin: 0;
	padding: 0 0.35rem;
	font-size: 0.85rem;
	text-align: center;
}

#folderName, #folderNameBar {
	flex: 1;
	min-width: 0;
	height: var(--field);
	padding: 0 0.75rem;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
	text-align: center;
	cursor: var(--cur-bar);
}
#folderName::placeholder, #folderNameBar::placeholder { color: var(--muted); }

.clip-side {
	position: relative;   /* what the chip in its corner hangs off */
	display: flex;
	flex: 0 1 50%;   /* its grip writes the width straight onto it */
	flex-direction: column;
	gap: var(--tight);
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: var(--tight) calc(var(--tight) * var(--skin, 1));
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.clip-side-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.clip-side-body::-webkit-scrollbar { display: none; }

.scratch-note {
	position: absolute;
	left: 50%;
	bottom: calc(var(--field) * 2 + var(--tight) * 2 + var(--group));
	z-index: 2;
	max-width: calc(100% - var(--tight) * 2);
	margin: 0;
	padding: calc(0.3rem + var(--drop)) 0.62rem calc(0.3rem - var(--drop));
	color: var(--paper);
	background: var(--ink-fill);
	border-radius: 0.8rem;
	font-size: 0.66rem;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
	pointer-events: none;
}
.scratch-note.is-up { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.clip-side:not(.has-songs) .scratch-note { bottom: var(--tight); }

.ask-why.list-say {
	display: block;
	text-align: left;
}

.say-head {
	display: flex;
	justify-content: flex-end;
	margin-bottom: calc(var(--group) * -0.5);
}

.say-swap {
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.62rem;
	line-height: 1;
	text-decoration: none;
	text-underline-offset: 0.18em;
	cursor: var(--cur-tap);
}
.say-swap:hover, .say-swap.is-on { text-decoration: underline; }

.tint-patch {
	position: fixed;
	z-index: 2147483000;
	display: none;
	pointer-events: none;
	background-image: var(--tint-light, var(--tint-layer));
	background-attachment: fixed;
	background-size: calc(var(--vw, 1vw) * 100) calc(var(--vh, 1vh) * 100);
	mix-blend-mode: screen;
}
.tint-patch.is-on { display: block; }
.list-watch {
	align-self: stretch;
	margin-top: auto;
	height: var(--field);
	padding: calc(var(--drop) * 2) min(1.5rem, 10%) 0;
}

.list-kept {
	display: flex;
	flex-direction: column;
	gap: var(--tight);
	max-height: 14rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: none;
}
.list-kept::-webkit-scrollbar { display: none; }
.list-kept li { display: flex; align-items: center; gap: var(--tight); }

.list-pick {
	display: flex;
	flex: 1;
	align-items: baseline;
	gap: var(--tight);
	min-width: 0;
	height: var(--field);
	padding: calc(var(--drop) * 2) 0.9rem 0;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
	text-align: left;
	cursor: var(--cur-tap);
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.list-pick strong {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
}
.list-pick small { flex: none; font-family: var(--num-font); font-size: 1rem; }
.list-pick:hover { color: var(--paper); background: var(--ink-fill); }
.list-pick.is-on { color: var(--paper); background: var(--ink-fill); }

.list-forget {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	font-size: 1.1rem;
	line-height: 1;
	cursor: var(--cur-tap);
}

.list-body { padding-bottom: var(--tight); }   /* find export sat too close to the window's foot (by request) */

.list-site {
	--site-wide: 1100px;
	--site-fit: 0.72;
	--site-clip: 24px;     /* their own margin, off the left only */
	--site-bar: 16px;      /* where their scrollbar sits */
	position: relative;     /* the dots wait in here */
	flex: 1;
	min-width: 0;
	height: min(calc(var(--vh, 1vh) * 74), 36rem);
	min-height: 18rem;
	background: var(--paper-fill);
	border-radius: var(--radius);
	overflow: hidden;
}

.site-wait {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	background: var(--paper-fill);
	transition: opacity 0.3s var(--ease);
}
.list-site.is-here .site-wait { opacity: 0; pointer-events: none; }

.list-site iframe {
	position: absolute;
	top: 0;
	left: calc(var(--site-clip) * -1);
	display: block;
	width: var(--site-wide);
	height: calc(100% / var(--site-fit));
	border: 0;
	transform: scale(var(--site-fit));
	transform-origin: top left;
	opacity: 0;
	transition: opacity 0.34s var(--ease);
}
.list-site.is-here iframe { opacity: 1; }

.clip-side.is-catching { outline: 2px dashed var(--ink); outline-offset: -6px; }

.scratch-list {
	display: flex;
	flex-direction: column;
	gap: var(--tight);
	margin: 0;
	padding: 0;
	list-style: none;
}

.scratch-plain {
	align-self: center;
	margin: 0;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.68rem;
	line-height: 1;
	opacity: 0.75;
	cursor: var(--cur-tap);
	transition: opacity 0.18s var(--ease);
}
.scratch-plain:hover { opacity: 1; }

.clip-side > .scratch-plain { margin-bottom: calc(var(--tight) * -0.4); }

.ask-screen { width: min(30rem, 100%); }

#listScreen.ask-screen {
	width: min(63rem, 100%);
	padding: var(--group) var(--group) var(--group);
}

#listScreen .list-body {
	flex-direction: row;
	align-items: stretch;
	gap: var(--group);
}
.list-aside {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--group);
	width: 17.5rem;
	min-width: 0;
	padding: 0 0.35rem;
}
.ask-body {
	display: flex;
	flex-direction: column;
	gap: var(--group);
	min-width: 0;
	text-align: left;
}
.ask-why {
	display: flex;
	align-items: flex-start;
	gap: var(--tight);
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.55;
}

.ask-steps {
	display: flex;
	flex-direction: column;
	gap: var(--group);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ask-steps li {
	display: flex;
	align-items: flex-start;
	gap: var(--tight);
	min-width: 0;
}
.ask-step {
	flex: none;
	display: grid;
	place-items: center;
	margin-top: 0.03rem;
	width: 1.15rem;
	height: 1.15rem;
	aspect-ratio: 1;
	color: var(--paper);
	background: var(--ink-fill);
	border-radius: 999px;
	font-family: var(--num-font);
	font-size: 0.82rem;
	line-height: 1;
	padding-bottom: calc(var(--drop-num) * -2);
}
.ask-said {
	min-width: 0;
	font-size: 0.82rem;
	line-height: 1.55;
}
.ask-screen input, .login-slot input {
	width: 100%;
	height: var(--field);
	padding: 0 0.9rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font: inherit;
	font-size: 0.85rem;
}
.ask-screen input::placeholder, .login-slot input::placeholder { color: var(--ink); opacity: 1; }
/* the log-in boxes are see-through, so the card's colour shows through them, by request */
.login-slot input, #chatScreen input { background: transparent; }
.ask-go { align-self: stretch; height: var(--field); padding: calc(var(--drop) * 2) 1.5rem 0; }
.ask-forget { align-self: center; }

.scratch-song {
	display: flex;
	align-items: center;
	gap: var(--tight);
	width: 100%;
	min-width: 0;
	padding: 0.35rem var(--tight);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font: inherit;
	font-size: 0.82rem;
	text-align: left;
	cursor: var(--cur-tap);
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.scratch-song:hover { background: var(--ink-fill); color: var(--paper); }
.scratch-song.is-copied { background: var(--ink-fill); color: var(--paper); }
.scratch-song .scratch-at {
	flex: none;
	display: grid;
	place-items: center;
	min-width: 1.95rem;
	font-family: var(--num-font);
	font-size: 1rem;
	padding-bottom: calc(var(--drop-num) * -2);
}

.scratch-song.is-got .scratch-at {
	color: var(--paper);
	background: var(--ink-fill);
	border-radius: 999px;
}
.scratch-song.is-got:hover .scratch-at,
.scratch-song.is-got.is-copied .scratch-at {
	color: var(--ink);
	background: var(--paper-fill);
}

.scratch-twice {
	flex: none;
	padding: 0 0.25rem;
	font-family: var(--num-font);
	font-size: 0.95rem;
	line-height: 1;
}

.scratch-song.is-missing { border-style: dashed; }
.scratch-none {
	flex: none;
	padding: 0 0.1rem;
	font-size: 0.7rem;
	line-height: 1;
}

.scratch-song .scratch-words { flex: 1; min-width: 0; }
.scratch-song .scratch-words strong,
.scratch-song .scratch-words small {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.scratch-song .scratch-words strong { font-size: 0.82rem; font-weight: 600; }
.scratch-song .scratch-words small { font-size: 0.72rem; }

.scratch-all {
	flex: none;
	align-self: stretch;
	height: var(--field);
	padding: calc(var(--drop) * 2) min(1.5rem, 10%) 0;
}

.scratch-acts {
	display: flex;
	align-items: stretch;
	gap: var(--tight);
}
.scratch-acts .scratch-all {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
}
/* copy all and match clips: outlined rather than solid (by request: they stood out too much), and they
   spring up a little on hover, as create and practice do */
.scratch-acts .scratch-all { transition: transform 0.5s var(--spring), color 0.2s ease, background-color 0.2s ease; }
.scratch-acts .scratch-all:hover { transform: translateY(-3px); }
.scratch-acts .scratch-all:active { transform: translateY(-1px); }

.scratch-bring {
	flex: none;
	width: 100%;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--field);
	padding: 0 min(1.5rem, 10%);
}

.clip-side.is-shut, .notes-home.is-shut { padding: 0; border-width: 0; }
/* the other side of a split, snapped shut: gone, and the pane takes the row */
.split-shut { display: none !important; }

.audio-stage {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 60;
	display: none;
	flex-direction: column;
	transform: translate(-50%, -50%);
	gap: var(--tight);
	width: min(640px, calc(calc(var(--vw, 1vw) * 100) - 2rem));
	max-height: calc(calc(var(--vh, 1vh) * 100) - 5rem);
	padding: var(--tight);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: auto;
	scrollbar-width: none;
}
.audio-stage::-webkit-scrollbar { display: none; }
.audio-stage.is-open { display: flex; }

.bar-meter {
	position: relative;
	display: block;
	flex: 1;
	min-width: 0;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	font: inherit;
	cursor: var(--cur-tap);
}

.meter-idle,
.live-meter {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	height: var(--field);
	padding: 0 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 0.85rem;
}
/* idle, the long box is the record button: black, the word in the middle */
.meter-idle {
	justify-content: center;
	padding-top: calc(var(--drop) * 2);
	color: var(--paper);
	background: var(--ink-fill);
	border-color: var(--ink);
	font-size: 1rem;
}
/* the record button: round at both ends (by request), and on hover its letters float — freely, slowly and
   steadily, each on its own path, tilt and clock (set by script.js) so they never move in step —
   from the moment the pointer arrives, while they draw a little apart (the parting is `translate`, the float
   is `transform`, so the two run at once). on leaving, each glides back from wherever it is (script.js,
   `.floaty`). only for the big, one-of-a-kind buttons like this one */
.meter-idle { border-radius: 999px; }
.rec-word { display: inline-flex; }
/* every floating button's letters (script.js wraps them, each with its own drift, tilt and clock) */
.float-letter { display: inline-block; white-space: pre; transition: translate 0.9s var(--ease), transform 0.9s var(--ease); }
.floaty.is-floating .float-letter {
	translate: calc(var(--i) * 3px) 0;
	animation: rec-float var(--dur) ease-in-out infinite;
}
@keyframes rec-float {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }
	55% { transform: translate(calc(var(--fx) * -0.6), calc(var(--fy) * -0.75)) rotate(calc(var(--fr) * -0.7)); }
	80% { transform: translate(calc(var(--fx) * 0.35), calc(var(--fy) * 0.4)) rotate(calc(var(--fr) * 0.45)); }
}
.live-stop { flex: none; font-size: 0.78rem; }
.live-meter { color: var(--paper); background: var(--ink-fill); }
.live-meter #levelCanvas { flex: 1; min-width: 0; height: 10px; }
.live-meter .clip-label { flex: none; font-size: 0.78rem; }
.live-meter .switch-count {
	flex: none;
	padding: 0.1rem 0.5rem;
	color: var(--ink);
	background: var(--paper-fill);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}

.recorder-panel.is-live .meter-idle { display: none; }
.recorder-panel:not(.is-live) .live-meter { display: none; }

.preview-wrap:not(.showing-video) { display: none; }

.record-status {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0 0.75rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 0;
	font-size: 0.85rem;
	text-align: center;
}
.record-status:not(:empty) { display: flex; }
.record-status.is-error { font-weight: 700; }

/* =========================================================
   15. audio — the video preview
   ========================================================= */
.preview-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 3.25rem;
	padding: 0 0.6rem;
	background: var(--ink-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.preview-wrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

.preview-stage {
	position: relative;
	flex: none;
	width: 100%;
	line-height: 0;
}
.preview-wrap.showing-video {
	height: min(calc(var(--vh, 1vh) * 46), 22rem);
	max-height: calc(var(--vh, 1vh) * 60);
	padding: 0;
	line-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.preview-wrap.showing-video::-webkit-scrollbar { width: 0; height: 0; }
.preview-wrap.is-zoomed { cursor: var(--cur-grab); }
.preview-wrap.is-zoomed.is-pushing { cursor: var(--cur-held); }
.preview-wrap.showing-video video { position: static; display: block; width: 100%; opacity: 1; }

/* =========================================================
   16. audio — sensing box and its settings
   ========================================================= */
.preview-wrap:not(.showing-video) .sense-box { display: none; }

.sense-box {
	position: absolute;
	z-index: 4;
	cursor: var(--cur-move);
	touch-action: none;
	border: 1px solid var(--paper);
	box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px var(--ink);
	background: rgba(255, 255, 255, 0.16);
	border-radius: 3px;
}

.sense-box.is-triggered { background: rgba(255, 255, 255, 0.5); }

.sense-controls {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 0.35rem;
	width: 100%;
	padding: var(--tight) 0.35rem 0;
	text-align: left;
	line-height: 1.5;
	font-size: 0.85rem;
	border-top: 1px solid var(--line);
}
.sense-controls label {
	display: grid;
	grid-template-columns: 5.5rem 1fr 2.6rem;
	align-items: center;
	gap: 0.4rem;
}
.sense-controls output {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sense-controls input[type="range"] {
	width: 100%;
	height: 1.25rem;
	margin: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: var(--cur-tap);
}
.sense-controls input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	background: var(--ink-fill);
	border: 0;
	border-radius: 999px;
}
.sense-controls input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: -0.365rem;
	background: var(--paper-fill);
	border: 1px solid var(--ink);
	border-radius: 999px;
}
.sense-controls input[type="range"]::-moz-range-track {
	height: 2px;
	background: var(--ink-fill);
	border: 0;
	border-radius: 999px;
}
.sense-controls input[type="range"]::-moz-range-thumb {
	width: 0.85rem;
	height: 0.85rem;
	background: var(--paper-fill);
	border: 1px solid var(--ink);
	border-radius: 999px;
}

.sense-readout {
	display: none;
	margin: 0;
	text-align: center;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.text-button {
	align-self: center;
	padding: 0.2rem 0.3rem;
	background: none;
	border: 0;
	font-size: 0.85rem;
	text-decoration: none;
	cursor: var(--cur-tap);
}
.text-button:hover { text-decoration: underline; }
.panel-handle {
	height: 0.6rem;
	margin: -0.2rem 0 0.15rem;
	background:
		repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px)
		center / auto 2px no-repeat;
	cursor: var(--cur-grab);
	touch-action: none;
}
.panel-handle:active { cursor: var(--cur-held); }

/* =========================================================
   17. audio — saved clips
   ========================================================= */
#recordingList:empty { display: none; }

.recording-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.75rem 0.6rem;
	border-radius: 6px;
}
.recording-item audio { display: none; }

.clip-handle {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 1.25rem;
	height: 2rem;
	padding: 0 0.3rem;
	background: none;
	border: 0;
	cursor: var(--cur-grab);
	touch-action: none;   /* a drag here moves the clip, not the list */
}
.clip-handle:active { cursor: var(--cur-held); }
.clip-handle span {
	display: block;
	height: 1px;
	background: var(--line);
}

.sorting-rows, .sorting-rows * { user-select: none; }
.sorting-grab { cursor: var(--cur-held); }

.recording-item.is-lifted {
	position: relative;
	z-index: 2;
	background: var(--paper-fill);
	outline: 1px solid var(--line);
	outline-offset: -1px;
	cursor: var(--cur-held);
	will-change: transform;
}

.clip-play {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	margin-left: -0.1rem;
	margin-right: 0.1rem;
	color: var(--ink);
	background: none;
	border: 0;
	font-size: 0.75rem;
	line-height: 1;
	cursor: var(--cur-tap);
}
.is-playing .clip-play { color: var(--ink); }

.clip-track {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 15px;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 999px;
	overflow: hidden;
	cursor: var(--cur-tap);
}

.clip-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background: var(--ink-fill);
}

.clip-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 0.5px));
	color: var(--paper);
	mix-blend-mode: difference;
	font-size: 9px;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

.clip-text.is-editing {
	user-select: text;
	pointer-events: auto;
	cursor: var(--cur-bar);
	outline: none;
}
/* the name is drawn in `difference`, so the site's black selection changed nothing under it and what was selected
   couldn't be seen (by request): white here flips the strip behind it, a plain inverted block with the letters in it */
.clip-text.is-editing::selection { color: #000; background: #fff; }

.clip-number {
	flex: none;
	width: 1.1rem;
	font-family: var(--num-font);
	font-size: 1rem;
	line-height: 1;
	text-align: right;
	user-select: none;
}

.clip-label {
	flex: none;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.clip-off {
	flex: none;
	width: 0.6rem;
	margin-left: -0.15rem;
	font-size: 0.95rem;
	line-height: 1;
	text-align: center;
	user-select: none;
}
.recording-item .clip-label { margin-top: 2px; }

.clip-download, .clip-discard {
	flex: none;
	width: 1rem;
	height: 1rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	border-radius: 2px;
	line-height: 1;
	cursor: var(--cur-tap);
}
.clip-download { position: relative; font-size: 0.9rem; margin-top: 3px; }
.clip-discard { font-size: 1.1rem; margin-top: 1px; }

.clip-download.is-working { color: transparent; margin-top: 0; }
.clip-download.is-working::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	background: var(--ink-fill);
	border-radius: 999px;
	animation: clip-waiting 0.9s ease-in-out infinite;
}
@keyframes clip-waiting {
	0%, 100% { transform: scale(0.6); }
	50%      { transform: scale(1); }
}

.clip-crop {
	flex: none;
	display: grid;
	place-items: center;
	width: 1rem;
	height: 1rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: var(--cur-tap);
}
.clip-crop svg { display: block; width: 0.85rem; height: 0.85rem; }
.recording-item.is-cropping .clip-crop,
.recording-item.is-trimmed .clip-crop { color: var(--ink); }
.recording-item.is-cropping .clip-crop { transform: scale(1.1); }

.crop-handle, .crop-shade { display: none; }
.recording-item.is-cropping .crop-handle,
.recording-item.is-cropping .crop-shade,
.recording-item.is-trimmed .crop-shade { display: block; }

.crop-shade {
	position: absolute;
	top: 0;
	bottom: 0;
	background-image: repeating-linear-gradient(
		-45deg,
		var(--ink) 0 1px,
		var(--paper) 1px 4px
	);
	pointer-events: none;
}
.crop-shade.is-left { left: 0; }

.clip-track-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
}
.clip-track-wrap .clip-track { flex: none; width: 100%; }

.crop-handle {
	position: absolute;
	top: -2px;
	bottom: -2px;
	width: 9px;
	margin-left: -4.5px;
	background: var(--ink-fill);
	border-radius: 2px;
	cursor: var(--cur-wide);
	touch-action: none;
}
.recording-item.is-cropping-now .clip-track { cursor: var(--cur-wide); }

/* =========================================================
   18. audio — the live row and its pulse
   ========================================================= */
.live-meter .clip-track {
	background: var(--ink-fill);
	border-color: var(--paper);
}

.clip-pulse {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background: radial-gradient(circle at center, var(--paper) 0 26%, transparent 27%);
	border: 1px solid var(--paper);
	border-radius: 999px;
	animation: clip-pulse 1.2s ease-in-out infinite;
}
@keyframes clip-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.clip-fill.live {
	width: 100%;
	background: repeating-linear-gradient(
		90deg,
		var(--paper) 0 6px,
		var(--ink) 6px 12px
	);
	animation: clip-sweep 0.9s linear infinite;
}
@keyframes clip-sweep {
	from { transform: translateX(0); }
	to { transform: translateX(12px); }
}

/* =========================================================
   19. small screens
   There is one layout. A screen narrower than 1280px is drawn at 1280 and
   shrunk to fit (see the head of app.html), so nothing below that width
   ever re-arranges. vh and vw are written as var(--vh) and var(--vw)
   everywhere, because the shrink scales the real units down with it.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* =========================================================
   21. create — which answers a card may be mixed up with
   ========================================================= */
.field-add {
	position: relative;
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	margin-right: -0.35rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	font-size: 0;
	cursor: var(--cur-tap);
	transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.field-add::before,
.field-add::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.field-add::before { width: 12px; height: 1.5px; }
.field-add::after { width: 1.5px; height: 12px; }
.field-add:hover { transform: scale(1.15); }
.field-add[aria-expanded="true"] { transform: rotate(45deg); }
.field-add[aria-expanded="true"]:hover { transform: rotate(45deg) scale(1.15); }

.field-add.is-on::before { height: 2.5px; }
.field-add.is-on::after { width: 2.5px; }

.pop-panel {
	position: fixed;
	z-index: 60;
	width: 20rem;
	max-width: calc(calc(var(--vw, 1vw) * 100) - 2rem);
	padding: 0.8rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	text-align: left;
	animation: confirm-in 0.18s var(--ease);
	transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.pop-panel.is-leaving {
	opacity: 0;
	transform: translateY(4px) scale(0.98);
	pointer-events: none;
}
.pop-say {
	width: 100%;
	margin: 0 0 var(--tight);
	padding-bottom: var(--tight);
	border-bottom: 1px solid var(--line);
	font-size: 0.78rem;
	line-height: 1.45;
}

.pick-list {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-height: 15rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.pick-list::-webkit-scrollbar { display: none; }

.pop-picks {
	display: flex;
	flex-direction: column;
	width: 11rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
/* the answer picker is a small window of its own, so what is behind it doesn't show through */
#optionsPanel {
	width: 15rem;
	padding: 0.8rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.pick-list .widget-pick {
	justify-content: center;
	width: 100%;
	max-width: none;
}
.pick-list .empty-message { padding: 0.3rem; font-size: 0.85rem; }

.option-pick {
	display: flex;
	align-items: center;
	max-width: 100%;
	padding: 0.3rem 0.7rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.85rem;
	cursor: var(--cur-tap);
}
.option-pick input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.option-pick span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.option-pick.is-picked { color: var(--paper); background: var(--ink-fill); border-color: var(--ink); }

/* =========================================================
   22. the top strip — hi, the search, the bin, help and the clock
   ========================================================= */
/* the strip is black in the light as well as the dark, so what sits on it takes the dark's tokens */
html:not(.inverted) .topbar {
	--paper: var(--tint-main);
	--ink: #ffffff;
	--paper-fill: var(--tint-fill);   /* TEMPORARY: the gradient (solid was var(--tint-main)) */
	--ink-fill: var(--ink);
	--line: #ffffff;
	--hover: #151515;
}
.topbar {
	position: absolute;
	top: 0;
	left: calc(var(--rail) - var(--wave-w) / 2);   /* in behind the first bump, so the row is one black */
	right: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--group);
	height: var(--topbar);
	padding: 0 var(--group) 0 calc(var(--wave-w) / 2 + var(--wave-out) + var(--group));
	color: var(--bar-ink);
	background: var(--bar);
	font-family: var(--font);
	font-size: 1rem;
}
/* no z-index of its own (14 Oct): as a stacking context it held what hangs from it under the colour layer,
   and those now lie over it (see "the colour, in layers") */
/* in the dark the strip and the page are one black, so its foot gets a white line — from the dip
   where the first bump starts, never reaching back over the bumps */
html.inverted .topbar::after {
	content: '';
	position: absolute;
	top: 100%;
	left: calc(var(--wave-w) * 6.61 / 39);   /* exactly where the first bump's outline starts: from --wave-out it poked a pixel past it */
	right: 0;
	height: 1px;
	background: #fff;
	pointer-events: none;
}

/* the search over every page, at the strip's right end */
.page-search { --field: 34px; position: relative; flex: none; width: min(24rem, calc(50% - 115px)); margin: 0; }     /* narrows with a narrow window, so it always ends clear of the time in the strip's middle */   /* at the strip's left, beside hi (14 Oct): the thing used most, where the eye starts */
.page-search input {
	width: 100%;
	height: var(--field);
	padding: 0 3rem 0 2.6rem;
	color: var(--ink);
	background: transparent;   /* the strip shows through the search, whatever colour it is */
	border: 1px solid var(--line);
	border-radius: 999px;
	font: inherit;
	font-size: 0.88rem;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.page-search input::-webkit-search-cancel-button { display: none; }
.page-search input::placeholder {
	/* a see-through white on the strip, not grey (by request): under the screened layer, 60% white over
	   black comes out as the strip's own colour 60% of the way to white */
	color: rgba(255, 255, 255, 0.6);
	opacity: 1;
}
.page-search.is-open input { border-radius: calc(var(--field) / 2) calc(var(--field) / 2) 0 0; border-bottom-color: transparent; }
.page-search-mark { position: absolute; left: 0.95rem; top: 50%; width: 1.05rem; height: 1.05rem; transform: translateY(-50%); pointer-events: none; }
/* its go is a bare >, placed without a transform so nothing that animates one (a press's boing)
   can knock it off its line; on hover it nudges 2px right, and a press does nothing */
.page-search-go {
	position: absolute;
	top: 5px;
	right: 5px;
	display: grid;
	place-items: center;
	width: calc(var(--field) - 10px);
	height: calc(var(--field) - 10px);
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: var(--cur-tap);
	transition: translate 0.18s var(--ease);
}
.page-search-go, .page-search-go:active { transform: none; animation: none; }
.page-search-go:hover { translate: 2px 0; }
.page-search-go svg { width: 70%; height: 70%; }
/* results the way chrome lists them: the bar opens downward into one box, the rows are plain, and a
   row only shows its edge under the pointer. the box slides down by script (showFound) */
.page-found {
	position: absolute;
	top: calc(var(--field) - 1px);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	max-height: 22rem;
	margin: 0;
	padding: 0 5px 6px;
	overflow-y: auto;
	list-style: none;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 calc(var(--field) / 2) calc(var(--field) / 2);
}
.page-found::before { content: ''; flex: none; height: 1px; margin: 0 10px 4px; background: var(--line); }
.page-hit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	padding: 0.3rem 0.7rem;
	color: var(--ink);
	background: none;
	border: 1px solid transparent;
	border-radius: 12px;
	font: inherit;
	text-align: left;
	cursor: var(--cur-tap);
}
.page-hit:hover { border-color: var(--line); }
.page-hit b { font-size: 0.88rem; }
.page-hit span { overflow: hidden; font-size: 0.8rem; white-space: nowrap; text-overflow: ellipsis; }
.page-hit mark { color: var(--paper); background: var(--ink-fill); }   /* a plain highlight, flush with the letters */
.page-hit small { font-family: var(--num-font); font-size: 1rem; }
.page-none { padding: 0.35rem 0.8rem; font-size: 0.82rem; }

/* the bin: a mark, with how many are in it on a small disc at its corner (laid over it, so the mark
   never moves); its list drops centred under it, the way help's note does */
.rail-binned { position: relative; display: flex; flex: none; align-items: center; }
/* the site's colour: a dot in the strip showing it, dropping the adjuster the way the bin drops its list */
.rail-tint { position: relative; display: flex; flex: none; align-items: center; }
.tint-head {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: var(--cur-tap);
}
.tint-swatch { width: 20px; height: 20px; background: var(--tint-fill); border: 1px solid var(--line); border-radius: 50%; }
/* the colour list lies above the site's colour layer (by request, after one black flash too many): it is
   moved to the foot of <body> and given the top place, so its colours are simply its colours — nothing cut
   out of the layer, nothing that can show the black under a hole. it carries its own copy of the layer
   (.own-layer, see "the colour, in layers"), with the strip's white words */
.tint-pop {
	--paper: #000;
	--ink: #fff;
	--line: #fff;
	--ink-fill: #fff;
	--paper-fill: var(--layer-now, #000);
	position: fixed;     /* placed by the script under its dot */
	top: 0;
	left: auto;
	right: 0;
	transform-origin: 100% 0;
	z-index: 2147483020;     /* over the colour layer (body::after, 2147483000) */
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 14rem;
	padding: 12px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 18px;
	font-family: var(--font);
	font-size: 0.82rem;
	font-weight: 400;
}
.tint-kinds { display: flex; justify-content: center; gap: 14px; }
.tint-kind {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: var(--cur-tap);
}
.tint-kind-dot { display: block; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; }
/* the one in use wears a ring */
.tint-kind.is-on { box-shadow: 0 0 0 1px var(--line); }
/* the adjuster, as on the drawing page: a square for shade and brightness, a strip for hue, the code */
.hue-field {
	position: relative;
	height: 9rem;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue, #f00));
	cursor: var(--cur-tap);
	touch-action: none;
	outline: none;
}
.hue-strip {
	position: relative;
	height: 14px;
	margin: 0 7px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px var(--line);
	background: linear-gradient(to right, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
	cursor: var(--cur-tap);
	touch-action: none;
	outline: none;
}
.hue-ring {
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.hue-field .hue-ring { top: 0; }
.hue-code {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	height: 30px;
	padding: 0 0.6rem 0 0.35rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--num-font);
	font-size: 1.15rem;
}
.hue-now { width: 20px; height: 20px; flex: none; border: 1px solid var(--line); border-radius: 50%; }
/* a gradient's two codes share the row; the one the adjuster is on wears a second ring */
.hue-codes { display: flex; gap: 8px; }
.hue-codes .hue-code { flex: 1; min-width: 0; cursor: var(--cur-tap); }
.hue-codes .hue-code[hidden] { display: none; }
.hue-codes.is-pair .hue-code { gap: 0.2rem; padding: 0 0.4rem 0 0.25rem; }
.hue-codes.is-pair .hue-code.is-on { box-shadow: 0 0 0 1px var(--line); }
.hue-code input { flex: 1; min-width: 0; padding: 0; color: var(--ink); background: none; border: 0; outline: none; font: inherit; text-transform: lowercase; }
.binned-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	cursor: var(--cur-tap);
}
.binned-head svg { display: block; flex: none; width: 21px; height: 21px; }
.binned-count {
	position: absolute;
	right: 5px;
	bottom: 7px;
	display: grid;
	place-items: center;
	min-width: 10px;
	height: 10px;
	padding: 0 2px;
	color: var(--paper);
	background: var(--ink-fill);
	border-radius: 999px;
	font-family: var(--num-font);
	font-size: 0.6rem;
	line-height: 1;
	pointer-events: none;
}
.binned-count:empty { display: none; }
.binned-list {
	position: absolute;
	top: calc(100% + var(--group));
	left: 50%;
	translate: -50% 0;
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 18rem;
	/* empty, then a box with room for three and a half binned things — the half says there is more —
	   and the same size whether or not anything is in it */
	height: calc(2 * 8px + 22px + 6px + 9px + 4px + 3.5 * 28px + 3 * 2px + 2px + 2px);
	margin: 0;
	padding: 8px;
	overflow: hidden;
	list-style: none;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 18px;
}
.binned-top { display: flex; flex: none; justify-content: center; }
.rail-binned > .empty-ask { display: none; }   /* only ever shown in the list, which it is moved into */
.empty-ask { position: relative; display: grid; place-items: center; height: 22px; }
/* pressing empty splits it down the middle (the animation is in askToEmpty): the word fades, and two
   halves that start exactly on the pill's outline open at the centre only, cross left, tick right */
.empty-ask .binned-empty { position: relative; z-index: 1; transition: color 0.12s ease; }
.empty-ask.is-asking .binned-empty { color: transparent; background: none; border-color: transparent; pointer-events: none; }
.empty-ask.is-asking.is-leaving .binned-empty { color: inherit; transition: color 0.2s ease 0.28s; }   /* the word comes back as the halves close */
.empty-yes, .empty-no {
	position: absolute;
	top: 0;
	display: grid;
	place-items: center;
	width: 50%;
	height: 100%;
	padding: 0;
	color: inherit;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	visibility: hidden;
	pointer-events: none;
	cursor: var(--cur-tap);
	transition: color var(--quick) var(--ease), background-color var(--quick) var(--ease);
}
.empty-no { left: 0; transform-origin: 0 50%; border-radius: 11px 0 0 11px; }   /* half the height, not 999: a huge outer radius scales the inner one down to nothing */
.empty-yes { right: 0; transform-origin: 100% 50%; border-radius: 0 11px 11px 0; }
.empty-yes svg, .empty-no svg { width: 13px; height: 13px; opacity: 0; }
.empty-ask.is-asking .empty-yes,
.empty-ask.is-asking .empty-no { visibility: visible; pointer-events: auto; }
.empty-ask.is-leaving .empty-yes,
.empty-ask.is-leaving .empty-no { pointer-events: none; }
.empty-yes:hover, .empty-no:hover { color: var(--paper); background: var(--ink-fill); }
/* no boing on these: its scale replaced their slide, and a press threw both back to the middle */
.empty-yes.boing, .empty-no.boing { animation: none; }
.binned-empty {
	display: grid;
	place-items: center;
	height: 22px;
	padding: 0 0.7rem;
	color: inherit;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 999px;
	font: inherit;
	font-size: 0.72rem;
	cursor: var(--cur-tap);
}
.binned-empty:hover { color: var(--paper); background: var(--ink-fill); }
/* the binned things sit in a little box of their own, which is what scrolls */
.binned-box {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-height: 0;
	padding: 9px 4px 4px;   /* more air over the first row: at 4px it sat against the top */
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: 12px;
}
.binned-none { margin: auto; font-size: 0.72rem; }
.binned-row { display: flex; flex: none; align-items: center; gap: 2px; height: 28px; padding: 0 0.1rem 0 0.6rem; }
.binned-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* put back and delete for good: bare marks, nothing on hover */
.binned-act { display: grid; flex: none; place-items: center; width: 24px; height: 24px; padding: 0; color: var(--ink); background: none; border: 0; cursor: var(--cur-tap); }
.binned-act svg { display: block; width: 16px; height: 16px; }

/* help: a question mark, always turning clockwise, drawn dead centre in its box so it turns on the
   spot. its note hangs centred under it, one line however long */
.help-box { position: relative; flex: none; }
/* help sits at the strip's left now, beside hi and well off it (by request); its note hangs from its
   left edge rather than its middle, or it would run off the window */
/* the controls sit at the strip's right end, so what hangs from help and the bin hangs from their right
   edge, or it would run off the window */
/* the right-hand group (the bin, help and the clock) is lifted a pixel together: measured it sits on
   the strip's middle, but its lowercase words carry their weight low and it read as sitting low, by request */
.topbar .strip-right, .topbar .strip-middle { top: -1px; }
/* the middle of the strip (by request): the time on the strip's exact centre, the half of the day, the
   date and the moon to its left, help and the colour to its right. the two sides share the room left
   over equally, which is what puts the time on the centre. it lies over the whole strip and lets presses
   through where there is nothing */
.strip-middle {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	pointer-events: none;
}
.strip-middle .mid-side > *, .strip-middle > .clock-time { pointer-events: auto; }
/* the date is hidden, and the half of the day sits right over the time, small, in capitals (by request) */
.strip-middle .clock-date { display: none; }
.time-stack { position: relative; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
/* the date in figures, MM . DD, right under the time (by request), as small as the half of the day over it */
.time-stack .clock-numdate { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0; font-family: var(--font); font-size: 0.62rem; line-height: 1; white-space: pre; }   /* in amiko, by request: the one number not in vt323 */
.time-stack .clock-suffix { position: absolute; bottom: 100%; left: 50%; top: auto; transform: translateX(-50%); margin-bottom: -2px; font-size: 0.6rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; }
.mid-side { display: flex; flex: 1 1 0; align-items: center; gap: 0.6rem; min-width: 0; }
.mid-left { justify-content: flex-end; }
.mid-right { justify-content: flex-start; gap: 0.6rem; }   /* no padding on one side only: it made the two sides unequal and pushed the time 3px off the middle */
/* help takes the time's own place (14 Oct, by request): hovered for half a second, the time, the half of
   the day and the date fade out and the question mark fades in where they were (`.help-peek`, set by the
   script); away again, they swap back. it stays while its note is open, and the note hangs centred under it.
   placed by margins, not a transform, so the note still measures from it */
.time-stack > .help-box { position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -17px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }   /* hidden too, so it can't be tabbed to while it isn't there */
.time-stack > :not(.help-box) { transition: opacity 0.25s ease; }
.topbar.help-peek .time-stack > .help-box { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease, visibility 0s; }
.topbar.help-peek .time-stack > :not(.help-box) { opacity: 0; }
/* the controls together at the strip's right end (14 Oct, by request): the colour, the lights, the bin —
   bare marks, evenly apart */
.strip-right { position: relative; display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.strip-right .theme-swap { order: 0; width: 36px; height: 36px; margin: 0; }   /* the moon and the colour are one pair (by request: side by side they looked off): the same 36px box, a 20px mark in the same hairline */
.strip-right .theme-swap svg { width: 20px; height: 20px; }
.strip-right { gap: 4px; margin-right: -6px; }     /* the dot sits as far in from the window's edge as the strip's other ends */
.help-head {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: var(--cur-tap);
}
.time-stack .help-head { width: 34px; height: 34px; }     /* a bare turning mark, no ring round it and no fill (by request) */
.time-stack .help-spin { width: 19px; height: 19px; }
/* the turning is on a plain box round the mark, as a transform the graphics card runs on its own: on the
   svg itself it was redone by the page every frame, forever, and slowed every other animation down */
.help-spin { display: block; width: 21px; height: 21px; will-change: transform; animation: help-spin 4s linear infinite; }
.help-spin svg { display: block; width: 100%; height: 100%; }
@keyframes help-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.help-body {
	position: absolute;
	top: calc(100% + var(--group));
	left: 50%;
	translate: -50% 0;
	z-index: 70;
	width: max-content;
	padding: 0.5rem 1.2rem;
	white-space: nowrap;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 999px;
}
.help-note { position: relative; top: calc(var(--drop) + 0.9px); margin: 0; font-size: 0.82rem; line-height: 1.4; text-align: center; }   /* amiko sits high: brought down so the words sit level */
/* the note and the bin's list drop in from their mark — a short fall, a fade and a little growth from
   the top middle — and go back the same way, eased at both ends. hidden after the fade, so neither can
   be pressed while shut */
/* what hangs from the strip pops out of its mark like a candy edit (by request): it springs up from small
   and a touch turned, runs a hair past its size and settles, coming into focus out of a soft blur as it
   does; it goes back quicker, shrinking and blurring away. hidden after, so it can't be pressed while shut */
.help-body, .binned-list, .tint-pop {
	transform-origin: 50% 0;
	transform: translateY(-8px) scale(0.4) rotate(-4deg);
	visibility: hidden;
	transition: transform 0.22s cubic-bezier(0.5, 0, 0.75, 0), visibility 0s linear 0.22s;
}
/* they pop: no fade and no blur (both tried, both refused — the colour list's spring alone is what was
   liked), just the spring out of their mark, a little sparkle round them as they land (sparkleAround), and
   a quicker shrink back into the mark */
.help-box.is-open .help-body, .rail-binned.is-open .binned-list, .tint-pop.is-open {
	transform: none;
	visibility: visible;
	transition: transform 0.62s var(--spring), visibility 0s;
}

/* its rings are white only, no black rim (by request) */
.tint-pop .hue-ring { box-shadow: none; }
.tint-pop { transform-origin: 100% 0; }     /* it springs from its top right corner, under its dot */

/* the clock: the moon, the half of the day, the date, and the time last, at the very right */
.clock-suffix { position: relative; top: 0.75px; order: 1; line-height: 1; }
.clock-date { position: relative; top: 0.75px; order: 2; margin: 0; }   /* the date and the half of the day sat high on the strip; lowered together so they share a line (measured: lowercase 26.6, figures 25.25 of 26) */
.theme-swap { order: 3; margin: 0 0.7rem; }   /* the moon sits dead between the date and the time, by request */
/* vt323 like every number, its figures centred on the strip (measured 25.9 of 26) */
.clock-time { position: relative; top: -0.75px; order: 4; margin: 0; font-family: var(--num-font); font-size: 1.6rem; line-height: 1; letter-spacing: 0.02em; }

.theme-swap {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	cursor: var(--cur-tap);
	transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.5, 1);
}
.theme-swap:hover { transform: scale(1.12); }

html.inverted .theme-swap svg { transform: rotate(180deg); }

::view-transition-old(root), ::view-transition-new(root) {
	animation-duration: 0.34s;
	animation-timing-function: var(--ease);
}

html.theming .theme-swap { view-transition-name: moon; }
::view-transition-old(moon) { animation: moon-away 0.34s var(--ease) both; }
::view-transition-new(moon) { animation: moon-here 0.34s var(--ease) both; }
@keyframes moon-away {
	to { opacity: 0; transform: rotate(84deg) scale(0.74); }
}
@keyframes moon-here {
	from { opacity: 0; transform: rotate(-84deg) scale(0.74); }
}

html.fading, html.fading *, html.fading *::before, html.fading *::after {
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
		border-color 0.4s var(--ease), fill 0.4s var(--ease) !important;
}
@media (prefers-reduced-motion: reduce) {
	html.fading, html.fading *,
	html.fading *::before, html.fading *::after { transition: none !important; }
	::view-transition-old(root), ::view-transition-new(root),
	::view-transition-old(moon), ::view-transition-new(moon) { animation: none; }
	.theme-swap { transition: none; }
}

/* =========================================================
   23. home — the board you arrange yourself
   ========================================================= */
.widget-list {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(4, minmax(0, 1fr));   /* the movable four: BOARD_COLS in script.js */
	/* apple's grid: a small tile is square, so a row is exactly as tall as a column is wide */
	grid-template-rows: var(--tile);
	grid-auto-rows: var(--tile);
	gap: var(--group);
	min-height: 0;
	overflow: hidden;     /* one row, nothing to scroll: as a scroller it caught the wheel over the tiles, and home wouldn't scroll there */
	padding: 8px;
	margin: -8px -8px -8px;     /* the tiles start the same gap under the strip as they sit apart */
}
.widget-list::-webkit-scrollbar { display: none; }

.widget-ghost {
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	pointer-events: none;
}

.widget-card[data-size="small"] { grid-column: span 1; grid-row: span 1; }
.widget-card[data-size="wide"]  { grid-column: span 2; grid-row: span 1; }

.widget-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--tight);
	min-width: 0;
	padding: var(--widget-pad);     /* apple: one even inset on every side */
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 1.4rem;
	overflow: hidden;
	text-align: left;
}

/* where a found word sits, outlined for a moment after the jump */
.found-here { outline: 2px dashed currentColor; outline-offset: 3px; border-radius: 4px; }

/* the fixed tile and the board beside it, one row */
.board-row { display: flex; align-items: flex-start; gap: var(--group); min-width: 0; }
.home-key {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--tight);
	width: var(--tile);
	height: var(--tile);
	padding: var(--widget-pad);
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 1.4rem;
	font: inherit;
	text-align: left;
	overflow: hidden;
}
/* the tile itself is still; only its pen in the corner is pressed */
.key-edit {
	position: absolute;
	right: 0.55rem;
	bottom: 0.55rem;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 50%;
	cursor: var(--cur-tap);
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform var(--quick) var(--ease);
}
.key-edit svg { width: 0.95rem; height: 0.95rem; }
.widget-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	flex: none;
	min-height: 0.95rem;
	/* the same head as the flashcards and ai card maker boxes (16 Oct, by request): pixelify over a hairline
	   rule, held off the box's walls the same way */
	margin: 0 0.35rem;
	padding: 0 0.35rem calc(var(--tight) + 3px);
	border-bottom: 1px solid var(--line);
}
.widget-head > * { grid-area: 1 / 1; }
.widget-head h3 {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--head-font);   /* pixelify, as the panels' heads (by request; amiko before that) */
	font-size: 1.25rem;
	line-height: 1.25;
	text-align: center;
}

.widget-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--tight);
	min-height: 0;
	overflow: hidden;
	text-align: center;
}

.widget-big {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	margin: 0;
	font-family: var(--num-font);
	font-size: 3.4rem;
	font-weight: 400;
	line-height: 1;
	justify-content: center;
	overflow-wrap: anywhere;
}
.widget-unit {
	font-family: var(--font);
	font-size: 0.8rem;
	font-weight: 600;
}

.widget-body.is-clock .widget-big { font-size: min(4rem, calc(var(--tile, 15rem) * 0.3)); white-space: nowrap; overflow-wrap: normal; }   /* gives way with a small tile rather than wrapping 01:06 onto two lines */
.widget-unit { font-size: 0.95rem; }
.widget-line { font-size: 0.92rem; }
.clock-half {
	margin: -0.15rem 0 0;
	line-height: 1;
}

.clock-hands {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 0;
	flex: 1;
}
.clock-hands svg {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	aspect-ratio: 1;
}

.widget-line {
	margin: 0;
	font-size: 0.8rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.widget-tallies {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tight);
	flex: none;
	align-self: stretch;
}
.widget-tally {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	gap: 0.1rem;
	line-height: 1;
}
.widget-tally strong {
	font-family: var(--num-font);
	font-size: 2.8rem;
	font-weight: 400;   /* a <strong> would come out bold on its own */
}
.widget-tally small {
	font-size: 0.85rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.widget-jumps {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-self: stretch;
	justify-content: center;
	gap: var(--tight);
	min-height: 0;
	overflow: hidden;
}
.widget-jump {
	display: flex;
	align-items: center;
	flex: none;
	gap: 0.6rem;
	min-width: 0;
	padding: 0.4rem 0.55rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 0.8rem;
	text-align: left;
	cursor: var(--cur-tap);
}
.widget-jump:hover { color: var(--paper); background: var(--ink-fill); }
.widget-jump .deck-shape { width: 20px; height: 20px; }
.widget-jump-text { display: flex; flex-direction: column; min-width: 0; }
.widget-jump-text strong,
.widget-jump-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.widget-jump-text strong { font-size: 0.82rem; }
.widget-jump-text small { font-size: 0.7rem; }

/* ---------- edit mode ---------- */

/* under the board: the front door's dino run, the same page, framed */
.home-run {
	flex: none;   /* never shrunk: the run inside is drawn at its own size (by request), so the frame keeps the room
	                 it needs — 'died' reaches 92px under its middle — and a short window scrolls home instead */
	width: 100%;
	height: 11.75rem;   /* over the search: the score, the words, the run and room for 'died' — a little thinner, by request */
	min-height: 0;
	border: 0;
	background: var(--paper-fill);
}
.home-panel.is-editing .widget-card {
	cursor: var(--cur-grab);
	touch-action: none;
	user-select: none;
}
.home-panel.is-editing .widget-card .widget-body { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.widget-card { transition: none; }
}

.widget-card.is-dragging {
	position: fixed;
	z-index: 90;
	margin: 0;
	cursor: var(--cur-held);
	translate: 0 -4px;
	box-shadow: 5px 5px 0 var(--ink);
	pointer-events: none;
	transition: translate 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.pop-looks {
	width: 9rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
.look-list {
	display: flex;
	flex-direction: column;
	gap: var(--tight);
}
.look-list .option-pick {
	justify-content: center;
	width: 100%;
	max-width: none;
}
.widget-pick.is-on { color: var(--paper); background: var(--ink-fill); border-color: var(--ink); }

.widget-pick { cursor: var(--cur-tap); }
.widget-pick:hover { color: var(--paper); background: var(--ink-fill); border-color: var(--ink); }

/* =========================================================
   24. cards — notes in, cards out
   ========================================================= */
.notes-panel {
	display: flex;
	flex-direction: column;
	gap: var(--tight);
	min-height: 0;
	color: var(--ink);
}

.notes-home {
	display: flex;
	flex: 0 1 30%;   /* its grip writes the width straight onto it */
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	/* it opens downwards, so it is the top and bottom that ramp with the opening (--skin): a fixed
	   padding came in whole the moment it left shut, which was the jolt on pulling it back out */
	padding: calc(var(--tight) * var(--skin, 1)) var(--tight);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.notes-title {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	font-family: var(--head-font);
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.notes-input {
	width: 100%;
	padding: 0.5rem 0.6rem;
	color: var(--ink);
	background: none;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	font-size: 0.82rem;
	line-height: 1.5;
	resize: vertical;
}

.notes-input::placeholder { color: var(--ink); opacity: 0.55; }

.notes-actions { display: flex; flex: none; gap: var(--tight); }

.notes-actions .notes-button { flex: 1; }
.notes-button {
	flex: none;
	padding: calc(0.35rem + var(--drop)) 0.6rem calc(0.35rem - var(--drop));
	color: var(--ink);
	background: none;
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-size: 0.8rem;
	cursor: var(--cur-tap);
}
.notes-button:hover { color: var(--paper); background: var(--ink-fill); }

.notes-button.is-solid { color: var(--paper); background: var(--ink-fill); font-weight: 700; }
.notes-button:disabled { cursor: var(--cur-dot); opacity: 1; }
.notes-button:disabled:hover { color: var(--ink); background: none; }
/* making flashcards: the button stays as it is and carries the state. while the reader downloads it
   turns white with the amount on it and a black bar filling along its foot */
.notes-button.is-go { position: relative; overflow: hidden; transition: none; }   /* a fade from black to white passes through grey */
.notes-button.is-go:disabled { color: var(--paper); background: var(--ink-fill); }
.notes-button.is-go.is-loading, .notes-button.is-go.is-loading:disabled { color: var(--ink); background: var(--paper-fill); font-family: var(--num-font); font-size: 1rem; font-weight: 400; }
.notes-button.is-go.is-loading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: var(--ink-fill);
	transform: scaleX(var(--done, 0));
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}

.notes-found {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	max-height: calc(var(--vh, 1vh) * 40);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	scrollbar-width: none;
	list-style: none;
}
.notes-found::-webkit-scrollbar { display: none; }
.notes-found:empty { display: none; }
.notes-card {
	display: flex;
	align-items: center;
	gap: var(--tight);
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
}
.notes-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notes-card-text strong,
.notes-card-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.notes-card-text strong { font-size: 0.8rem; }
.notes-card-text small { font-size: 0.72rem; }
.notes-card-drop {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	font-size: 1rem;
	line-height: 1;
	cursor: var(--cur-tap);
}

.notes-key-toggle {
	flex: none;
	padding: calc(0.5rem + var(--drop)) 0.6rem calc(0.5rem - var(--drop));
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-size: 0.85rem;
	cursor: var(--cur-tap);
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.notes-key-toggle:hover { color: var(--paper); background: var(--ink-fill); }
/* nothing is written under the buttons — not the count, not the deck it went to, not the list
   reader's quiet link; the buttons carry what is happening (by request) */
.notes-note, #notesRead { display: none !important; }

.notes-head {
	display: grid;
	grid-template-columns: 0.95rem 1fr 0.95rem;
	align-items: center;
}
.notes-head .notes-title {
	grid-column: 2;
	padding-bottom: 0;
	border-bottom: 0;
}
.notes-wide {
	grid-column: 3;
	flex: none;
	display: grid;
	place-items: center;
	width: 0.95rem;
	height: 0.95rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	cursor: var(--cur-tap);
}
.notes-wide svg { display: block; width: 100%; height: 100%; }

.notes-bits { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.notes-bit {
	position: relative;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
}
.notes-bit img { width: 100%; height: 100%; object-fit: cover; }
.notes-bit-mark { font-size: 0.7rem; font-weight: 700; }
.notes-bit-drop {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.1rem;
	height: 1.1rem;
	padding: 0;
	color: var(--paper);
	background: var(--ink-fill);
	border: 0;
	border-radius: 0 0 0 var(--radius);
	font-size: 0.85rem;
	line-height: 1;
	cursor: var(--cur-tap);
}
.notes-panel.is-catching { outline: 2px dashed var(--ink); outline-offset: -6px; }

.notes-screen {
	width: min(46rem, 100%);
	padding: var(--group) var(--gap) var(--gap);
}
.notes-slot {
	display: flex;
	flex: 1;
	min-height: 0;
	margin: 0 calc(var(--gap) * -1) calc(var(--gap) * -1);
	border-radius: 0 0 var(--radius) var(--radius);
	overflow: hidden;
	background: var(--paper-fill);
}
.notes-slot .notes-panel {
	flex: 1;
	min-width: 0;
	padding: var(--gap);
	overflow-y: auto;
	scrollbar-width: none;
}
.notes-slot .notes-panel::-webkit-scrollbar { display: none; }
.notes-slot .notes-head { display: none; }
.notes-slot .notes-input { min-height: 14rem; font-size: 0.95rem; }
.notes-slot .notes-found { max-height: none; }
.notes-slot .notes-bit { width: 4.5rem; height: 4.5rem; }

.notes-home .notes-panel { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 calc(var(--tight) * -1); padding: 0 var(--tight); }   /* room each side so a shaking box isn't cut by the scroll's edge */
.notes-home .notes-panel::-webkit-scrollbar { display: none; }

.notes-home .notes-box { flex: 1 1 auto; min-height: 3.2rem; }
.notes-home .notes-input { flex: 1; min-height: 0; resize: none; }
.notes-home .notes-found { max-height: 9rem; }

.notes-box { position: relative; display: flex; }
.notes-box .notes-input { padding-bottom: 2.7rem; }
/* the box's foot: make flashcards on the left, the round question mark (sharper reading) right of it,
   the photo mark at the far end — all inside the box (by request) */
.notes-dock {
	position: absolute;
	left: 0.45rem;
	right: 0.45rem;
	bottom: 0.45rem;
	display: flex;
	align-items: center;
	gap: var(--tight);
	pointer-events: none;
}
.notes-dock > * { pointer-events: auto; }
.notes-dock .notes-button.is-go {
	height: 1.9rem;
	padding: calc(0rem + var(--drop) * 2) 1rem 0;
	font-size: 0.8rem;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.notes-dock .notes-key-toggle {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
}
.notes-dock .notes-key-toggle svg { display: block; width: 1.05rem; height: 1.05rem; }
.notes-dock .notes-key-toggle.is-on { color: var(--paper); background: var(--ink-fill); }
.notes-dock .notes-clip { margin-left: auto; width: 1.9rem; height: 1.9rem; }
.notes-clip {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	padding: 0;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--ink);
	border-radius: 999px;
	cursor: var(--cur-tap);
}
.notes-clip svg { display: block; width: 0.95rem; height: 0.95rem; }
.notes-clip:hover { color: var(--paper); background: var(--ink-fill); }

.notes-panel.is-catching .notes-box::after {
	content: 'let go and it reads it';
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--paper);
	background: var(--ink-fill);
	border-radius: var(--radius);
	font-size: 0.85rem;
	font-weight: 700;
	pointer-events: none;
}

.notes-button.is-go {
	flex: none;
	padding: calc(0.5rem + var(--drop)) 0.6rem calc(0.5rem - var(--drop));
	font-size: 0.85rem;
}

.notes-panel > * { flex: none; }
.notes-panel > .notes-found { flex: 0 1 auto; }

.notes-plain {
	align-self: center;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ink);
	font-size: 0.72rem;
	cursor: var(--cur-tap);
}

.recording-item.is-packing {
	color: var(--paper);
	background: var(--ink-fill);
	border-color: var(--ink);
}

.recording-item.is-packing .clip-play,
.recording-item.is-packing .clip-crop,
.recording-item.is-packing .clip-download,
.recording-item.is-packing .clip-discard { color: var(--paper); }
.recording-item.is-packing .clip-handle span { background: var(--paper-fill); }
.recording-item.is-packing .clip-track { border-color: var(--paper); }
.recording-item.is-packing .clip-fill { background: var(--paper-fill); }
.recording-item.is-packing .crop-shade { filter: invert(1); }
.recording-item.is-packing .clip-label::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 0.4rem;
	vertical-align: middle;
	background: var(--paper-fill);
	border-radius: 999px;
	animation: clip-waiting 0.9s ease-in-out infinite;
}
.recording-item.is-packing-failed { border-color: var(--line); border-width: 2px; }

/* =========================================================
   25. one weight
   ========================================================= */
body, body *, .modal-panel, .modal-panel *, .pop-panel, .pop-panel * {
	font-weight: 400 !important;
}

.site-name, .tab-tip, .tab-tip * { font-weight: 700 !important; }   /* the site's name and the pages' names, by request */
.clock-numdate { font-weight: 700 !important; }   /* the date under the clock, bold, by request */

a:hover, a:focus-visible { font-weight: 700 !important; }

/* =========================================================
   26. coming in
   ========================================================= */
html.booting .app-shell { opacity: 0; }

/* nothing holds the place while it waits (the turning smiley was taken out, by request — it is only in the
   exportify window now): the page simply comes in once it is ready */

.spin-face {
	display: block;
	width: 2rem;
	height: 2rem;
	color: var(--ink);
	animation: face-turn 1.5s cubic-bezier(0.62, 0, 0.3, 1) infinite;
}
@keyframes face-turn {
	0%   { transform: rotate(0deg); }
	62%  { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.spin-face { animation: none; }
}

/* =========================================================
   27. chat — people, and the talking with them
   ========================================================= */

.chat-panel {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--group);
	min-height: 0;
}


.account-pop {   /* after google's account popup: centred, round, the face at the top */
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 19rem;
	padding: 1.6rem 1rem 1rem;
	border-radius: 1.75rem;
	transform-origin: top right;
}
.face-pic {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	image-rendering: pixelated;
}
.account-face {
	position: relative;
	width: 5rem;
	height: 5rem;
	padding: 0;
	color: var(--paper);
	background: var(--ink-fill);
	border: 0;
	border-radius: 50%;
	font-size: 2rem;
	cursor: var(--cur-tap);
}
.account-face-edit {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 50%;
}
.account-face-edit svg { width: 60%; height: 60%; }
.account-face:hover .account-face-edit { color: var(--paper); background: var(--ink-fill); }
.account-name { max-width: 100%; margin: 0.8rem 0 0; overflow: hidden; font-size: 1.35rem; white-space: nowrap; text-overflow: ellipsis; }
.account-handle { max-width: 100%; margin: 0.15rem 0 1rem; overflow: hidden; font-size: 0.8rem; white-space: nowrap; text-overflow: ellipsis; }
.face-pic svg, .said-face svg { width: 62%; height: 62%; }
.account-face .face-pic svg { width: 58%; }
.account-leave, .leave-split .basic-button { width: 100%; height: var(--field); padding: calc(var(--drop) * 2) 0 0; }

/* every account on this browser, the one in use filled */
.acc-list { display: flex; flex-direction: column; gap: var(--tight); width: 100%; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.acc-row { position: relative; display: flex; align-items: center; gap: 0.3rem; border: 1px solid var(--line); border-radius: 999px; }
.acc-row.is-here { color: var(--paper); background: var(--ink-fill); border-color: var(--ink); }
.acc-pick {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	padding: 0.3rem 0.4rem;
	color: inherit;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: var(--cur-tap);
}
.acc-row.is-here .acc-pick { cursor: var(--cur-dot); }
.acc-face {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	color: var(--paper);
	background: var(--ink-fill) center / cover;
	border-radius: 50%;
	image-rendering: pixelated;
}
.acc-row.is-here .acc-face { color: var(--ink); background-color: var(--paper); }
.acc-face svg { width: 62%; height: 62%; }
.acc-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.acc-words b, .acc-words small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acc-words b { font-size: 0.88rem; }
.acc-words small { font-size: 0.72rem; }
.acc-dots {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin-right: 0.3rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: var(--cur-tap);
}
.acc-dots svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.acc-dots:hover { outline: 1px solid currentColor; }
.acc-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 2;
	padding: 4px;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	animation: confirm-in 0.16s var(--ease);
}
.acc-menu[hidden] { display: none; }
.acc-menu button {
	padding: 0.35rem 0.9rem;
	color: var(--ink);
	background: none;
	border: 0;
	border-radius: calc(var(--radius) - 4px);
	font: inherit;
	font-size: 0.85rem;
	cursor: var(--cur-tap);
}
.acc-menu button:hover { color: var(--paper); background: var(--ink-fill); }
/* the same pill as log out, only white */
.acc-add {
	width: 100%;
	height: var(--field);
	margin-top: var(--tight);
	padding: calc(var(--drop) * 2) 0 0;
	color: var(--ink);
	background: var(--paper-fill);
	border-color: var(--line);
}
.account-leave-wrap { width: 100%; margin-top: var(--tight); }
.leave-split { display: flex; gap: var(--tight); }
/* log out divides: both halves start stacked on the middle as the one black pill, then slide
   apart into place while cancel pales to white */
.leave-split .basic-button { animation: leave-part 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
#leaveYes { position: relative; z-index: 1; --from: calc(50% + var(--tight) / 2); }
#leaveNo { --from: calc(-50% - var(--tight) / 2); animation-name: leave-part, leave-pale; }
@keyframes leave-part { from { transform: translateX(var(--from)); } to { transform: none; } }
/* cancel snaps from black to white once the halves have parted — a fade would pass through grey */
@keyframes leave-pale {
	0% { color: var(--ink); background: var(--ink-fill); border-color: var(--ink); animation-timing-function: step-end; }
	35% { color: var(--ink); background: var(--paper-fill); border-color: var(--line); }
	100% { color: var(--ink); background: var(--paper-fill); border-color: var(--line); }
}
.leave-split .basic-button { flex: 1; min-width: 0; }
.leave-split .leave-no { color: var(--ink); background: var(--paper-fill); border-color: var(--line); }
.leave-split .leave-no:hover { color: var(--paper); background: var(--ink-fill); }

.account-screen .set-list { display: flex; flex-direction: column; }
.set-row { border-bottom: 1px solid var(--line); }
.set-open {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--tight);
	width: 100%;
	padding: calc(0.85rem + var(--drop)) 0.35rem calc(0.85rem - var(--drop));
	color: inherit;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.92rem;
	text-align: left;
	cursor: var(--cur-tap);
}
.set-open:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.set-now { min-width: 0; overflow: hidden; font-size: 0.82rem; white-space: nowrap; text-overflow: ellipsis; }
.set-edit { display: flex; gap: var(--tight); padding: 0 0.35rem 0.85rem; }
.set-edit[hidden] { display: none; }
.set-edit-two { flex-wrap: wrap; }
.set-edit-two input { flex: 1 1 100%; }
.set-edit input { flex: 1; min-width: 0; height: var(--field); }
.set-edit .basic-button { flex: none; height: var(--field); padding: calc(var(--drop) * 2) 1.2rem 0; }
.set-face .basic-button { flex: 1; }
.set-quiet { color: var(--ink); background: var(--paper-fill); border-color: var(--line); }
.set-quiet:hover { color: var(--paper); background: var(--ink-fill); }
.set-note { min-height: 1.2em; margin: var(--group) 0 0; font-size: 0.82rem; text-align: center; }
.said-face { background-size: cover; background-position: center; image-rendering: pixelated; }
.chat-who {
	flex: 1;
	min-width: 0;
	margin: 0 0 0 0.5rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 0.9rem;
}

.chat-body {
	display: flex;
	flex: 1;
	gap: 0;
	min-height: 0;
}
/* two outlined panes, the way every other page here is built: the list, and the talk */
.room-side, .talk-side {
	display: flex;
	flex-direction: column;
	gap: var(--tight);
	min-height: 0;
	padding: var(--group);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.room-column {
	display: flex;
	flex: 0 1 28%;   /* its grip writes the width straight onto it */
	flex-direction: column;
	gap: var(--group);
	min-width: 0;
	min-height: 0;
}
.room-side { flex: 1; min-width: 0; overflow: hidden; }
.talk-side { flex: 1; min-width: 0; padding-bottom: var(--group); }


.room-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}
.room-scroll::-webkit-scrollbar { display: none; }
.room-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }

/* a conversation: picture, name, the last line, the time — whatsapp's row in this site's colours */
.room-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	min-width: 0;
	padding: 0.45rem 0.6rem;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid transparent;
	border-radius: 0.9rem;
	font: inherit;
	text-align: left;
	cursor: var(--cur-tap);
}
.room-row:hover { border-color: var(--line); }
.room-row.is-on { color: var(--paper); background: var(--ink-fill); border-color: var(--ink); }
.room-row.is-waiting .room-face { border-style: dashed; }
.room-face {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	color: var(--paper);
	background: var(--ink-fill);
	border: 1px solid var(--ink);
	border-radius: 50%;
}
.room-row.is-on .room-face { color: var(--ink); background: var(--paper-fill); }
.room-face svg { width: 60%; height: 60%; }
.room-words { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.room-words b, .room-words small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.room-words b { font-size: 0.9rem; }
.room-words small { font-size: 0.75rem; }
.room-when { flex: none; align-self: flex-start; margin-top: 0.15rem; font-family: var(--num-font); font-size: 0.95rem; }
/* the rows that stand in while there are none: dashed shapes where a chat would be */
/* nobody yet: one line in the middle of the empty list, nothing else */
.room-scroll:has(.room-hint) { display: flex; flex-direction: column; }
.room-list:has(.room-hint) { flex: 1; justify-content: center; }
.room-hint { padding: var(--tight) 0.6rem; text-align: center; font-size: 0.85rem; }

.room-make.is-off input { border-style: dashed; }

/* your account: a round picture in the top-right corner of the chat, as on most sites */
.chat-me {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	color: var(--paper);
	background: var(--ink-fill);
	border: 1px solid var(--ink);
	border-radius: 50%;
	overflow: hidden;
	cursor: var(--cur-tap);
	transition: transform var(--quick) var(--ease);
}
.chat-me:hover, .chat-me[aria-expanded="true"] { transform: scale(1.06); outline: 1px solid var(--line); outline-offset: 2px; }
.chat-me .face-pic svg { width: 58%; height: 58%; }

.room-make { display: flex; flex: none; gap: var(--tight); min-width: 0; }
.room-make input {
	flex: 1;
	min-width: 0;
	height: var(--field);
	padding: 0 0.75rem;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
	outline: none;
}
.room-make input::placeholder { color: var(--muted); }
.talk-bar {
	display: flex;
	flex: none;
	align-items: flex-end;     /* the marks stay on the last line as the box grows */
	gap: var(--tight);
	min-width: 0;
	min-height: var(--field);
	padding: 0 0.35rem 0 0.9rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: calc(var(--field) / 2);    /* a pill on one line, a rounded box on more */
}
.talk-bar > :not(textarea) { align-self: center; }
.talk-bar:has(textarea.is-tall) > :not(textarea) { align-self: flex-end; margin-bottom: calc((var(--field) - 2px - 1.9rem) / 2); }
/* the message box: one line until it holds more (shift+enter starts a new one), then it grows, up to ten */
.talk-bar textarea {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	height: calc(var(--field) - 2px);
	max-height: calc(1.35 * 0.85rem * 10 + var(--field) - 2px);
	padding: calc((var(--field) - 2px - 1.35 * 0.85rem) / 2) 0;
	overflow-y: auto;
	resize: none;
	background: none;
	border: 0;
	color: var(--ink);
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.35;
	outline: none;
	scrollbar-width: none;
}
.talk-bar textarea::-webkit-scrollbar { display: none; }
.talk-bar textarea::placeholder { color: var(--ink); opacity: 1; }
.talk-bar textarea:disabled { opacity: 1; }
.talk-left { flex: none; font-family: var(--num-font); font-size: 1rem; }   /* characters left, shown near the limit */
.talk-left[hidden] { display: none; }
.talk-bar:has(.talk-attach) { padding-left: 0.35rem; }
/* files waiting to go, just over the message box, the way discord holds an attachment */
.talk-tray {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: var(--tight);
	margin: 0 0 var(--tight);
	padding: 0;
	list-style: none;
}
.talk-tray[hidden] { display: none; }
.tray-chip {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-width: 16rem;
	padding: 0.4rem 0.4rem 0.4rem 0.4rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	animation: confirm-in 0.18s var(--ease);
}
.tray-chip.is-failed, .tray-chip.is-sending { opacity: 1; }   /* a plain box the whole time, never dashed or dotted (by request) */
.tray-look {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
}
.tray-look img { width: 100%; height: 100%; object-fit: cover; }
.tray-look svg { width: 1.1rem; height: 1.1rem; }
.tray-words { display: flex; flex-direction: column; min-width: 0; }
.tray-words span { overflow: hidden; font-size: 0.82rem; white-space: nowrap; text-overflow: ellipsis; }
.tray-words small { font-family: var(--num-font); font-size: 0.95rem; }
.tray-words .file-size { margin-left: 0; padding-left: 0; font-family: var(--font); font-size: 0.72rem; }
.tray-out {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: var(--cur-tap);
}
.tray-out svg { width: 0.9rem; height: 0.9rem; }
.talk-attach {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: var(--cur-tap);
	transition: transform var(--quick) var(--ease);
}
.talk-attach svg { width: 1.05rem; height: 1.05rem; }
.talk-attach:hover { transform: rotate(-12deg); }
.talk-log.is-dropping { outline: 1px dashed var(--line); outline-offset: -4px; border-radius: var(--radius); }

/* a file in a thread: a box with its name and size, and a picture of it if it is one */
.said-file {
	display: inline-flex;
	flex-direction: column;
	gap: var(--tight);
	max-width: min(22rem, 100%);
	margin-top: 0.2rem;
	padding: 0.6rem 0.8rem;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
	text-align: left;
	cursor: var(--cur-tap);
}
.said-file-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.85rem; }
.said-file-name span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.said-file-name { justify-content: flex-start; }
.said-file-name span { flex: 1; }
/* the size at the box's right end, on the name's line: the figure in the number face, the unit in the body's */
.file-size { flex: none; margin-left: auto; padding-left: var(--tight); font-family: var(--font); font-size: 0.72rem; white-space: nowrap; }
.file-size b { font-family: var(--num-font); font-size: 1.05rem; font-weight: 400; }
.said-file-name svg { flex: none; width: 1rem; height: 1rem; }
.said-file img { display: block; max-width: 100%; max-height: 14rem; border-radius: calc(var(--radius) - 4px); }
.said-file-note { font-size: 0.75rem; }
/* a big file handed over directly: a bar fills along its foot while it moves */
.said-big { position: relative; overflow: hidden; }
.said-big.is-moving::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--done, 0) * 100%); background: var(--ink-fill); }
.said-edited { margin-left: 0.4rem; font-size: 0.7rem; }

/* the marks beside a message's bubble: shown on hover — a quick edit (your own) and a quick copy; a right
   click opens edit, copy and delete. no ring round them and nothing moving. they keep their place while hidden, so the
   bubble never shifts; the nearest the bubble comes first on either side */
.said-tools {
	display: flex;
	flex: none;
	align-self: center;
	visibility: hidden;
	background: none;          /* nothing round or behind them at all, only the marks */
}
.said-row.is-mine .said-tools { flex-direction: row-reverse; }
.said-row:hover .said-tools, .said-row.has-menu .said-tools { visibility: visible; }
.said-tools button, .said-bin {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: var(--cur-tap);
}
/* holding shift: every bubble slides in from its edge a little, and the one under the pointer shows a bin
   in the room that leaves at the very edge — one press deletes it */
.said-row > :not(.said-bin) { transition: translate 0.18s var(--ease); }
.talk-log.is-shift .said-row:not(.is-mine) > :not(.said-bin) { translate: 2rem 0; }
.talk-log.is-shift .said-row.is-mine > :not(.said-bin) { translate: -2rem 0; }
.said-bin { position: absolute; top: 50%; left: 0.4rem; visibility: hidden; transform: translateY(-50%); }
.said-row.is-mine .said-bin { left: auto; right: 0.4rem; }
.talk-log.is-shift .said-row:hover .said-bin { visibility: visible; }
.said-bin svg { width: 1rem; height: 1rem; }
.said-tools button svg, .said-bin svg { width: 0.95rem; height: 0.95rem; }
.said-tools button, .said-bin { -webkit-tap-highlight-color: transparent; }
.said-tools button:active { background: none; color: var(--ink); }
/* a link in a line: underlined, in the words' own colour */
.said-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: var(--cur-tap); -webkit-user-select: text; user-select: text; word-break: break-all; }
/* the glimpse of a linked page, beside the pointer: a picture of the page with its address under it */
.link-peek {
	position: fixed;
	z-index: 2147483020;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: 16rem;
	padding: 0.4rem;
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	pointer-events: none;
	--own-edge: 1px;
}
.link-peek[hidden] { display: none; }
.link-peek-shot { position: relative; z-index: 60; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px); background: var(--paper-fill); }
.link-peek-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.2s ease; }
.link-peek.is-ready .link-peek-shot img { opacity: 1; }
.link-peek-shot::before { content: '( ･ω･)'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.8rem; color: var(--ink); }
.link-peek.is-ready .link-peek-shot::before { content: none; }
.link-peek-where { overflow: hidden; padding: 0 0.2rem; font-size: 0.78rem; white-space: nowrap; text-overflow: ellipsis; }
/* editing a line: a box round the words, as tall as they are (it grows as you type), opening the
   line out a little — the words keep their place across, the row grows a touch top and bottom */
.said-edit {
	display: block;
	box-sizing: border-box;
	width: min(70%, 34rem);
	min-height: 0;
	margin: 0;
	padding: 0.42rem 0.8rem;
	overflow: hidden;
	resize: none;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 1.1rem;
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.4;
	outline: none;
}
.said-row.is-editing .said-tools { visibility: hidden; }   /* the mark never shows beside the box being typed in */
.field-go {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;                       /* the arrow bare, no circle round it (by request) */
	cursor: var(--cur-tap);
}
.field-go svg { display: block; width: 1.35rem; height: 1.35rem; }

/* the thread's header: who, their handle, and that it is sealed */
.talk-head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.65rem;
	padding: 0 0 var(--group);
}
.talk-face {
	flex: none;
	width: 2.3rem;
	height: 2.3rem;
	color: var(--paper);
	background-color: var(--ink);
	border: 1px solid var(--ink);
}
.talk-face[hidden] { display: none; }
.talk-names { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.talk-names h2 {
	margin: 0;
	overflow: hidden;
	font-family: var(--head-font);
	font-size: 1.05rem;
	font-weight: 400;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.talk-names small { font-size: 0.75rem; }

/* home, before a thread is open: a greeting and three things to do, from the top-left */
.talk-welcome {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--tight);
	padding-bottom: 3.5rem;    /* the eye's middle sits above the box's: the words go up a little */
	text-align: center;
}
.talk-welcome[hidden] { display: none; }
#talkForm[hidden] { display: none; }
.welcome-face { margin: 0 0 var(--tight); font-size: 2.6rem; line-height: 1; }
.welcome-say { margin: 0; font-size: 0.95rem; }
.welcome-tally { margin: 0; font-size: 0.85rem; }
.welcome-num { font-family: var(--num-font); font-size: 1.15rem; }
.talk-welcome .basic-button { height: var(--field); margin-top: var(--tight); padding: calc(var(--drop) * 2) 1.6rem 0; }
.welcome-quiet { color: var(--ink); background: var(--paper-fill); border-color: var(--line); }
.welcome-quiet:hover { color: var(--paper); background: var(--ink-fill); }

/* the top of an open thread, as discord starts one */
.talk-start { display: flex; flex-direction: column; gap: 0.45rem; padding: var(--group) 0.5rem var(--group); }
.talk-start[hidden] { display: none; }
.talk-start-face {
	width: 4.5rem;
	height: 4.5rem;
	color: var(--paper);
	background-color: var(--ink);
}
.talk-start h3 { margin: 0.3rem 0 0; font-family: var(--head-font); font-size: 1.4rem; font-weight: 400; }
.talk-start p { margin: 0; font-size: 0.85rem; }

.talk-log {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	padding: 0 0.1rem var(--tight);
	overflow-y: auto;
	scrollbar-width: none;
}
.talk-log::-webkit-scrollbar { display: none; }

/* a line is a bubble on its sender's side, as in google chat: yours on the right, solid; theirs on the
   left, outlined. no picture or name on a line (as in imessage), and no time on hover */
.said-row {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 0.25rem;
	padding: 0 0.5rem;
	margin-top: 0.9rem;
}
.said-row.is-mine { flex-direction: row-reverse; }
.said-row:first-of-type { margin-top: 0; }
.said-row.is-run-on { margin-top: 0.4rem; }     /* every bubble the same shape, a little apart (by request) */
/* a gap of ten minutes or more: the time, small, over the next line */
.said-time { margin: 0.9rem 0 0.1rem; color: var(--muted); font-size: 0.64rem; text-align: center; }
/* a new day gets a line across the thread with its date, and the next line starts a new head */
.said-day {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1.1rem 0.5rem 0.2rem;
	color: var(--ink);
	font-size: 0.7rem;
}
.said-day::before, .said-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.said-words {
	max-width: min(70%, 34rem);
	margin: 0;
	padding: 0.42rem 0.8rem;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 1.1rem;
	font-size: 0.9rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.said-row.is-mine .said-words { color: var(--paper); background: var(--ink-fill); }
.said-text { white-space: pre-wrap; }      /* the lines a message was typed on are kept */
/* a block of code (``` on either side, as on discord): its own box in the bubble, kept exactly as typed,
   in the number face so the columns line up, with a copy mark in its corner */
.said-words.has-code { width: min(70%, 34rem); }
.said-code {
	position: relative;
	margin: 0.3rem 0;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 0.6rem;
}
.said-code:first-child { margin-top: 0.1rem; }
.said-code:last-child { margin-bottom: 0.1rem; }
.said-code pre {
	margin: 0;
	padding: 0.55rem 2.2rem 0.55rem 0.7rem;
	overflow-x: auto;
	font-family: var(--num-font);
	font-size: 1.1rem;
	line-height: 1.2;
	white-space: pre;
	tab-size: 4;
	-webkit-user-select: text;
	user-select: text;
	scrollbar-width: none;
}
.said-code pre::-webkit-scrollbar { display: none; }
.said-code-copy {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	color: var(--ink);
	background: var(--paper-fill);
	border: 0;
	border-radius: 0.4rem;
	cursor: var(--cur-tap);
}
.said-code-copy svg { width: 0.9rem; height: 0.9rem; }
/* a file is its own box, not a bubble round one */
.said-words.is-file, .said-row.is-mine .said-words.is-file { padding: 0; color: var(--ink); background: none; border: 0; border-radius: 0; }
.said-row.is-mine .said-file { margin-left: auto; }

/* signed out: a log-in screen, the one thing on the page */
.chat-login {
	display: grid;
	flex: 1;
	place-items: center;
	min-height: 0;   /* no outline of its own: the card is the one box, not a window in a window */
}
.chat-login[hidden] { display: none; }
.chat-body[hidden] { display: none; }
.login-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(34rem, calc(100% - 2 * var(--group)));
	padding: 3rem 2.5rem;            /* even all round: the fields sit 2.5rem in from either side */
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 1.4rem;
	position: relative;
}
.login-close[hidden] { display: none; }    /* only while adding a second account: back to the one you were on */
/* the log-in card, and the log-in window, are drawn the other way round from the page, by request:
   black on a light page, white on a dark one — by swapping the colour tokens, as the bar does */
html:not(.inverted) .login-card, html:not(.inverted) #chatScreen {
	--paper: var(--tint-main);
	--ink: #ffffff;
	--paper-fill: var(--tint-fill);   /* TEMPORARY: the gradient (solid was var(--tint-main)) */
	--ink-fill: var(--ink);
	--line: #ffffff;
	--hover: #151515;
}
html:not(.inverted) .login-card, html:not(.inverted) #chatScreen { background: var(--tint-grad); }
/* in the dark it is not turned round any more (by request): see-through, with the page's own white
   words and outline, so it lies on the dark page rather than as a white slab on it */
html.inverted .login-card, html.inverted #chatScreen { background: transparent; }
.login-face {
	display: grid;
	place-items: center;
	width: 6rem;
	height: 6rem;
	color: var(--paper);
	background: var(--ink-fill);
	border-radius: 50%;
}
.login-face svg { width: 58%; height: 58%; }
/* the log-in card's layout, settled by hand in the layout editor and tidied (14 oct): no picture, a
   large title, the fields full width, and a short tall pill to sign in */
.login-face { display: none; }
.login-title { margin: 0; font-family: var(--head-font); font-size: 3.5rem; font-weight: 400; line-height: 1; }
.login-say { margin: 1rem 0 2rem; font-size: 1rem; }
.login-slot, .login-slot .ask-body { width: 100%; }
.login-slot input { height: var(--field); font-size: 0.95rem; padding: 0 1.1rem; }
.login-slot .ask-go {
	align-self: center;
	width: auto;
	height: 3rem;
	margin-top: 0.5rem;
	padding: calc(var(--drop) * 2) 2.25rem 0;
	font-size: 1.2rem;
}
.login-slot .ask-swap { font-size: 0.8rem; }
/* username and password are named over their boxes, small, not written inside them */
.door-pair { display: flex; flex-direction: column; gap: 0.4rem; }
.door-label { padding-left: 0.35rem; font-size: 0.75rem; line-height: 1; }
/* sits on the same line as 'username', one ordinary space after it; flagTaken() flashes it in and fades it */
.taken-flag { white-space: pre; opacity: 0; }
/* register asks for more than log in does; the extra rows only show while registering */
.chat-door:not(.is-new) .door-new { display: none; }
/* pineapple or pizza: two pills side by side, the one picked solid. picked once, never changed */
.side-picks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tight); }
.side-pick {
	height: var(--field);
	padding: calc(var(--drop) * 2) 0 0;
	color: var(--ink);
	background: var(--paper-fill);
	border: 1px solid var(--line);
	border-radius: 999px;
	font: inherit;
	font-size: 0.95rem;
	cursor: var(--cur-tap);
	transition: color 0.2s ease, background-color 0.2s ease;
}
.side-pick.is-on { color: var(--paper); background: var(--ink-fill); }
.side-picks.is-shaking { animation: field-shake 0.4s ease; }
.account-side { margin: 0.15rem 0 0; font-size: 0.78rem; }
.talk-start-side { margin: 0.2rem 0 0; font-size: 0.85rem; }

.chat-door {
	display: flex;
	flex-direction: column;
	gap: var(--group);
	min-width: 0;
}

/* the eye sits inside the password box at its right end, a bare mark: shut while hidden, open while shown */
.word-wrap { position: relative; display: block; }
.word-wrap .word-field { padding-right: 2.6rem; }
.word-eye {
	position: absolute;
	top: 50%;
	right: 0.7rem;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	transform: translateY(-50%);
	cursor: var(--cur-tap);
}
.word-eye svg { width: 18px; height: 18px; }
.word-eye .eye-open, .word-eye.is-open .eye-shut { display: none; }
.word-eye.is-open .eye-open { display: inline; }
.word-eye.boing { animation: none; }
.word-field.is-shown { -webkit-text-security: none; }
.word-field {
	-webkit-text-security: disc;
	-webkit-user-drag: none;
}

.ask-go.is-working { cursor: var(--cur-no); }
.ask-go:disabled, .ask-swap:disabled { opacity: 1; }   /* no grey here either */

.ask-swap { align-self: center; }

.ask-note {
	margin: 0;
	text-align: center;
	font-size: 0.8rem;
}
.ask-note:empty { display: none; }

/* a field with something wrong in it shakes instead of growing a line of words under it */
@keyframes field-shake {
	0%, 100% { translate: 0 0; }
	15% { translate: -7px 0; }
	30% { translate: 6px 0; }
	45% { translate: -5px 0; }
	60% { translate: 4px 0; }
	75% { translate: -2px 0; }
	90% { translate: 1px 0; }
}
.is-shaking { animation: field-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.key-edit[aria-pressed="true"] { color: var(--paper); background: var(--ink-fill); }

/* the box you pressed shows only its mark once it is marked: white behind it, the word taken out
   (kept in place, so the box keeps its size) */
.answer-button.is-marked { color: var(--ink); background: var(--paper-fill); }
.answer-button.is-marked .answer-word { visibility: hidden; }

/* the pages, down the bar, as marks — each centred inside its bump, the same room either side
   between the bar's left wall and the crest. they sit over the bar and the bumps (the bumps are
   drawn over the bar, so marks inside the bar would be cut by them). only the page you are on is
   a filled white circle; the rest have no ring */
/* the site's name, top left, over the first bump in the black strip: centred on the marks' column */
.site-name {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 46;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--rail) + var(--wave-out) - var(--marks-in) * 2);     /* centred over the marks, which sit --marks-in left of the middle */
	height: var(--topbar);
	padding-top: calc(var(--drop-title) * 2);
	color: var(--bar-ink);
	font-family: var(--title-font);
	font-size: 1.6rem;
	font-style: italic;   /* by request (bitcount has no italic, so the browser slants it) */
	line-height: 1;
	text-decoration: none;
	cursor: var(--cur-tap);
}

.page-marks {
	position: absolute;
	top: calc(var(--topbar) + (var(--wave-h) - 44px) / 2);
	left: calc((var(--rail) + var(--wave-out)) / 2 - 22px - var(--marks-in));     /* 3px left of dead centre (by request): measured even at the crest, but the bump curves away above and below it, so the right side read as the narrower */
	z-index: 46;                         /* just over their own pushed-out bump */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--wave-h) - 44px);      /* a mark every bump */
}
html:not(.inverted) .page-marks { --paper: var(--tint-main); --ink: #ffffff; --line: #ffffff; --paper-fill: var(--tint-fill); --ink-fill: var(--ink); }
.section-tab {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--ink);
	background: none;
	border: 0;
	border-radius: 50%;
	font-size: 0;
	cursor: var(--cur-tap);
}
.section-tab.active { color: var(--paper); background: var(--ink-fill); cursor: var(--cur-dot); }
.section-tab svg { width: 28px; height: 28px; }

/* a pressed mark's bump pushed out to the right: the bar's own black, starting inside the bump so
   no seam shows, round at its far end, the page's name in it. it grows out (clip-path, by script) */
.tab-tip {
	position: fixed;
	/* starts back inside the bar, behind the mark, so the white between the bumps can't nick its
	   corners; the words begin just past the crest */
	left: calc(var(--rail) - var(--wave-w) / 2);
	z-index: 45;                         /* over everything on the page (the search is 20, the share and confirm chips 40), under the marks, under any window (50+) */
	display: flex;
	align-items: center;
	height: var(--wave-h);              /* exactly one bump tall */
	margin: 0;
	padding: 0 22px 0 calc(var(--wave-w) / 2 + var(--wave-out) - 6px);   /* the name just inside the crest, 22px before the round end: more read as spaced on purpose */
	color: #fff;
	background: var(--tint-fill);
	border: 0;
	border-radius: 0 calc(var(--wave-h) / 2) calc(var(--wave-h) / 2) 0;
	font-family: var(--title-font);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}
.tab-tip svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: none; }
.tab-tip path { fill: none; stroke: #fff; stroke-width: 2; }   /* half of it is clipped: 1px shows, on the inside */
html.inverted .tab-tip svg { display: block; }   /* the bumps' own white edge, in the dark, drawn along the moving curve */
.tab-tip span { position: relative; top: var(--drop-title); opacity: 0; transition: opacity 0.2s ease; }
.tab-tip span.is-shown { opacity: 1; transition: opacity 0.45s ease; }   /* fades in once the shape is half out */

/* =========================================================
   draw — the drawing app, built into the page (14 Oct, by request: framed, it was a page of its own and
   always looked a little off). its own rules, every one kept to the draw page, in the site's own colours
   ========================================================= */
.draw-panel {
	--radius: 14px;
	position: relative;     /* its little windows, sprites and fish are placed inside it */
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--group);
	min-height: 0;
	overflow: hidden;
	color: var(--ink);
	font-family: var(--font);
	font-size: 14px;
}
.draw-panel[hidden] { display: none; }
/* ---------- 2. the toolbar: one row of pills over the canvas ---------- */
.draw-panel #toolbar {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--tight) var(--group);
    padding: var(--tight) var(--group);
    background: var(--paper-fill);
    border: 1px solid var(--line);
    border-radius: 999px;
    position: relative;
    z-index: 10;
}
.draw-panel .toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--tight);
}
.draw-panel label { color: var(--ink); }
.draw-panel .field {
    display: flex;
    align-items: center;
    gap: var(--tight);
    padding: 0 0.4rem;
}
.draw-panel button,
.draw-panel .uploadBtn {
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.95rem;
    color: var(--ink);
    background: var(--paper-fill);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    cursor: var(--cur-tap);
    /* a hover fades in rather than snapping, by request */
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.draw-panel button:hover,
.draw-panel .uploadBtn:hover,
.draw-panel button.is-solid {
    color: var(--paper);
    background: var(--ink-fill);
}
.draw-panel button.is-solid:hover { color: var(--ink); background: var(--paper-fill); }
.draw-panel button { gap: 0.3rem; }
/* the real select and colour field stay on the page for script.js, out of sight. not display:none —
   a colour field that isn't laid out can't open its picker */
.draw-panel .kept-under {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.draw-panel #imageLoader,
.draw-panel #charLoader { display: none; }
/* the tool: one bare mark, the pen or the eraser; the one not in use is simply not drawn */
.draw-panel .tool-swap .tool-turn { display: grid; place-items: center; }
.draw-panel .tool-swap svg { width: 22px; height: 22px; }
.draw-panel .tool-turn .tool-rub { display: none; }
.draw-panel .tool-turn.is-rubbing .tool-pen { display: none; }
.draw-panel .tool-turn.is-rubbing .tool-rub { display: inline; }
/* undo and redo: bare marks, no ring, nothing on hover but the pointer */
.draw-panel .history { gap: 2px; padding: 0; }
.draw-panel .bare-mark,
.draw-panel .bare-mark:hover {
    width: 32px;
    padding: 0;
    color: var(--ink);
    background: none;
    border: 0;
}
.draw-panel .bare-mark svg { width: 20px; height: 20px; }
.draw-panel .bare-mark:active { transform: scale(0.9); }
/* the note when spawn is pressed with no sprite: a small black chip under the button, its arrow
   pointing up and back at upload sprite, which sits just to its left */
.draw-panel .spawn-wrap { position: relative; display: inline-flex; }
.draw-panel .sprite-hint {
    position: absolute;
    top: calc(100% + var(--tight));
    right: 50%;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem 0.35rem 0.5rem;
    color: var(--paper);
    background: var(--ink-fill);
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    animation: draw-hint-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.draw-panel .sprite-hint[hidden] { display: none; }
.draw-panel .sprite-hint svg { width: 16px; height: 16px; flex: none; }
.draw-panel .sprite-hint.is-leaving { opacity: 0; transition: opacity 0.2s ease; }
@keyframes draw-hint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ---------- the tool and colour menus, after the site's own (the right-click menu): an outlined box
   on paper, plain rows, the one in use turned solid black ---------- */
.draw-panel .pick { position: relative; display: flex; }
/* flex, not block: a block round an inline button kept a line's descent under it, 1.75px that set the whole row off centre */
.draw-panel .pick-face svg { width: 15px; height: 15px; flex: none; margin-right: -0.25rem; transition: transform 0.2s ease; }
.draw-panel .pick-face[aria-expanded="true"] svg { transform: rotate(180deg); }
.draw-panel .pick-face[aria-expanded="true"] { color: var(--paper); background: var(--ink-fill); }
.draw-panel .pick-menu {
    position: absolute;
    top: calc(100% + var(--tight));
    left: 0;
    z-index: 60;
    min-width: 100%;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--paper-fill);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.draw-panel .pick-menu[hidden] { display: none; }
.draw-panel .pick-row {
    height: auto;
    justify-content: flex-start;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: 8px;
}
.draw-panel .pick-row:hover { color: var(--ink); background: none; box-shadow: inset 0 0 0 1px var(--line); }
/* an outline, never gray, by request */
.draw-panel .pick-row.is-on,
.draw-panel .pick-row.is-on:hover { color: var(--paper); background: var(--ink-fill); }
/* the colour: its face is the colour in use; the menu is a real adjuster — a square for shade and
   brightness, a strip for hue, and the code. the rings that ride them are white with a black edge, so
   they show on any colour without anything gray */
/* the colour is just its dot: no outline, no arrow, by request. it sits in the toolbar's round left
   end exactly as far off the outline sideways as it is above and below (12px each way) */
.draw-panel #toolbar { padding-left: 12px; padding-right: 8px; }
/* clear sits in the right round end the same way: 8px off the outline to its right, above and below */
.draw-panel .field:has(> #colourPick) { padding: 0; }
.draw-panel .colour-face,
.draw-panel .colour-face:hover,
.draw-panel .pick-face.colour-face[aria-expanded="true"] {
    width: 24px;
    padding: 0;
    color: var(--ink);
    background: none;
    border: 0;
}
.draw-panel .colour-face .colour-dot { width: 24px; height: 24px; transition: transform 0.2s ease; }
.draw-panel .colour-face:hover .colour-dot,
.draw-panel .colour-face[aria-expanded="true"] .colour-dot { transform: scale(1.1); }
.draw-panel .colour-dot {
    width: 20px;
    height: 20px;
    border: 1px solid var(--line);
    border-radius: 50%;
    flex: none;
}
.draw-panel .tint {
    width: 13.5rem;
    min-width: 0;
    padding: 0.6rem;
    gap: 0.6rem;
}
.draw-panel .tint-field {
    position: relative;
    height: 9.5rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue, #f00));
    cursor: var(--cur-tap);
    touch-action: none;
    outline: none;
}
.draw-panel .tint-hue {
    position: relative;
    height: 14px;
    margin: 0 7px;               /* the ring's half, so it reaches each end */
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--line);
    background: linear-gradient(to right, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
    cursor: var(--cur-tap);
    touch-action: none;
    outline: none;
}
.draw-panel .tint-ring {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.12s ease, height 0.12s ease;
}
.draw-panel .tint-field .tint-ring { top: 0; }
.draw-panel .is-held > .tint-ring { width: 18px; height: 18px; }
.draw-panel .tint-field:focus-visible,
.draw-panel .tint-hue:focus-visible { box-shadow: 0 0 0 1px var(--line), 0 0 0 3px var(--paper), 0 0 0 4px var(--ink); }
.draw-panel .tint-code {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 0.6rem 0 0.35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--num-font);
    font-size: 1.15rem;
}
.draw-panel .tint-now { width: 20px; height: 20px; flex: none; border: 1px solid var(--line); border-radius: 50%; }
.draw-panel .tint-hash { line-height: 1; }
.draw-panel .tint-code input {
    flex: 1;
    min-width: 0;
    padding: 0;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
    font: inherit;
    text-transform: lowercase;
}
/* the size: less at the left end, a slider (a hairline and a solid round thumb) between, more at
   the right end, with no outline round them — and the count beside it in vt323 like every number on the site */
.draw-panel .size-field { gap: var(--tight); }
.draw-panel .size-step {
    display: flex;
    align-items: center;
    gap: 0;                      /* − and + sit close against the line, by request */
    height: 32px;
    padding: 0;                  /* no outline round it, by request: the marks and the line stand on their own */
}
.draw-panel .step-less,
.draw-panel .step-more {
    flex: none;
    width: 18px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
}
.draw-panel .step-less svg,
.draw-panel .step-more svg { width: 15px; height: 15px; }
/* bare marks: no background of their own, so nothing shows behind them — not on hover, and not as an oval
   left fading behind the page when the lights change */
.draw-panel .step-less,
.draw-panel .step-more,
.draw-panel .step-less:hover,
.draw-panel .step-more:hover { color: var(--ink); background: none; }
/* while the lights change, nothing fades: a fade let every button lag a fifth of a second behind the page */
.draw-panel .step-less:active,
.draw-panel .step-more:active { transform: scale(0.88); }
.draw-panel .size-track {
    position: relative;
    width: 7rem;
    height: 26px;
    margin: 0 8px;              /* the thumb's half and a hair, so it reaches each end without covering the marks */
    cursor: var(--cur-tap);
    touch-action: none;
    outline: none;
}
.draw-panel .size-track::before {          /* the line it runs along */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--ink-fill);
}
/* the stretch behind the thumb is bolder than the stretch ahead of it */
.draw-panel .size-done {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 3px;
    background: var(--ink-fill);
    border-radius: 999px;
    transform: translateY(-50%);
}
.draw-panel .size-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    background: var(--ink-fill);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease;
}
.draw-panel .size-track:hover .size-thumb,
.draw-panel .size-track.is-held .size-thumb { transform: translate(-50%, -50%) scale(1.15); }
.draw-panel .size-track:focus-visible .size-thumb { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.draw-panel .size-read {
    min-width: 2.6rem;
    font-family: var(--num-font);
    font-size: 1.1rem;
    line-height: 1;
}
/* ---------- 3. the canvas: the rest of the page, in an outlined box ---------- */
.draw-panel #canvas-container {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: #000;   /* round the sheet when it is zoomed out or moved: black, which the colour layer turns to the site's colour */
    border: 1px solid var(--line);
    border-radius: var(--radius);
    z-index: 1;
}
.draw-panel canvas {
    background-color: #fff;     /* the sheet stays white in both lights: it is the paper being drawn on */
    cursor: crosshair;
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;   /* one canvas pixel is one art pixel, shown big and hard-edged */
}
.draw-panel canvas.is-shrunk { image-rendering: auto; }
.draw-panel canvas { touch-action: none; }   /* a finger on the sheet draws (two move it, draw.js) rather than scrolling the page */
.draw-panel #windowHeader, .draw-panel #windowHeader2 { touch-action: none; }   /* and a finger drags the little windows by their bars */   /* zoomed out: smooth, or pixels go missing */
/* the game and the reference, as two round marks in the canvas's corner */
.draw-panel .corner-buttons {
    position: absolute;
    right: var(--group);
    bottom: var(--group);
    display: flex;
    flex-direction: column;
    gap: var(--tight);
    z-index: 3;
}
.draw-panel #gameBtn,
.draw-panel #referenceBtn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
}
.draw-panel #gameBtn svg,
.draw-panel #referenceBtn svg { width: 22px; height: 22px; }
/* drawn in the site's hairline, in whatever colour the button's words are */
.draw-panel #gameBtn:hover,
.draw-panel #referenceBtn:hover { transform: scale(1.05); }
.draw-panel #gameBtn:active,
.draw-panel #referenceBtn:active { transform: scale(0.95); }
.draw-panel #uploadBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none;           /* a bare mark, no ring round it, by request */
    border: 0;
    cursor: var(--cur-tap);
}
.draw-panel #uploadBtn svg { width: 20px; height: 20px; color: var(--ink); display: block; }
/* ---------- 4. the two little windows ---------- */
.draw-panel #miniWindow,
.draw-panel #miniWindow2 {
    position: absolute;
    background: var(--paper-fill);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    z-index: 20;
}
.draw-panel #miniWindow {
    top: 10%;
    left: 10%;
    width: 300px;
    height: 340px;
}
.draw-panel #miniWindow2 {
    top: 30%;
    left: 40%;
    width: 400px;
    height: 400px;
    resize: both;
    min-width: 200px;
    min-height: 200px;
    max-width: 90%;
    max-height: 90%;
}
/* the head is the site's window title: the name centred in pixelify over a hairline rule, and the
   marks at the right bare, with no rings — the × is the same × every window on the site closes with */
.draw-panel #windowHeader,
.draw-panel #windowHeader2 {
    position: relative;
    height: 42px;
    padding: 0 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    color: var(--paper);          /* the bar is the other way round: white on black, by request */
    background: var(--ink-fill);
    border-bottom: 1px solid var(--line);
    user-select: none;
    cursor: move;
}
.draw-panel #windowHeader > span,
.draw-panel #windowHeader2 > span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--head-font);
    font-size: 1.2rem;
    pointer-events: none;
}
.draw-panel #windowHeader div { display: flex; align-items: center; gap: 2px; }
.draw-panel #closeWindowBtn,
.draw-panel #resetGameBtn,
.draw-panel #closeWindowBtn2 {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 6px;
    font-family: var(--font);
    line-height: 1;
}
/* the × and the turn arrow are one pair: the same hairline, the same size, on the same line */
.draw-panel #closeWindowBtn svg,
.draw-panel #closeWindowBtn2 svg,
.draw-panel #resetGameBtn svg { display: block; width: 18px; height: 18px; }
/* like the site's ×, they do nothing on hover or press */
.draw-panel #closeWindowBtn:hover,
.draw-panel #resetGameBtn:hover,
.draw-panel #closeWindowBtn2:hover,
.draw-panel #closeWindowBtn:active,
.draw-panel #resetGameBtn:active,
.draw-panel #closeWindowBtn2:active { color: inherit; background: none; transform: none; }
.draw-panel #windowContent {
    padding: 15px;
    color: var(--ink);
    font-size: 14px;
    height: calc(100% - 42px);
}
.draw-panel #startScreen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.draw-panel #startGameBtn {
    height: 44px;
    padding: 0 2rem;
    font-family: var(--head-font);
    font-size: 20px;
}
.draw-panel .windowContent2 {
    position: relative;
    width: 100%;
    height: calc(100% - 42px);
    background: var(--paper-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.draw-panel #windowImagePreview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.draw-panel #uploadPlaceholder {
    color: var(--ink);
    font-size: 12px;
    position: absolute;
    pointer-events: none;
}
/* ---------- 5. the game ---------- */
.draw-panel #gameViewport {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: #000;
    margin: 0;
    padding: 0;
    display: block;
}
/* each on its own: a browser that doesn't know one of the two would drop a shared rule whole */
.draw-panel #gameViewport:fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.draw-panel #gameViewport:-webkit-full-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.draw-panel #gameWorldBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 1024px;
    height: 1024px;
    background-image: url('drawing/map.png');
    background-size: 1024px 1024px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform-origin: top left;
    margin: 0;
    padding: 0;
}
.draw-panel #gamePlayer {
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url('drawing/player.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}
.draw-panel .map-coin {
    position: absolute;
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    transform-origin: center center;
}
.draw-panel #coinCounterDisplay {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 2px 9px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    background: #000;
    border: 1px solid #fff;
    border-radius: 999px;
    font-family: var(--num-font);
    font-size: 16px;
    z-index: 999999;
    pointer-events: none;
}
.draw-panel .coin-icon { font-size: 14px; }
.draw-panel .map-tree {
    position: absolute;
    width: 64px;
    height: 96px;
    background-image: url('drawing/tree.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    transform: translate(-50%, -100%);
    transform-origin: bottom center;
}
.draw-panel #gameViewport:fullscreen #coinCounterDisplay {
    top: 30px;
    left: 30px;
    font-size: 32px;
    padding: 6px 18px;
    gap: 8px;
}
.draw-panel #gameViewport:-webkit-full-screen #coinCounterDisplay {
    top: 30px;
    left: 30px;
    font-size: 32px;
    padding: 6px 18px;
    gap: 8px;
}
.draw-panel #gameViewport:fullscreen .coin-icon { font-size: 28px; }
.draw-panel #gameViewport:-webkit-full-screen .coin-icon { font-size: 28px; }
/* ---------- 6. the rest ---------- */
.draw-panel .shimeji-char {
    position: absolute;
    width: 64px;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    image-rendering: pixelated;
    z-index: 9999;
    pointer-events: none;
}
.draw-panel .fullscreen-mode {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: #000;
}
.draw-panel .hidden-window,
.draw-panel .hidden-game-element { display: none !important; }
.draw-panel .fish-particle {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 9999999;
    animation: draw-fish-fountain 0.8s ease-out forwards;
}
@keyframes draw-fish-fountain {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(var(--rot)); opacity: 0; }
}

/* =========================================================
   the colour, in layers (14 Oct, by request: "all the black stuff should work like a layer clipped to the
   gradient", after one black flash too many)
   ---------------------------------------------------------
   the site's colour is one layer over the whole window (body::after). what must keep its own colours — the
   drawing — used to be cut out of it with holes worked out by script frame by frame, and whenever a hole was
   a frame behind (a list fading, a window moving, a page arriving) the black under it showed. there are no
   holes on the draw page now:
   - the sheet itself lies OVER the colour layer, so its colours are simply its colours
   - anything that lies over the sheet (the drawing's windows, its colour adjuster, its corner marks, its
     note; the strip's lists, the colour list, the pages' names, the option-key label) lies over it too, and
     carries its OWN copy of the colour layer, clipped to itself (.own-layer::after) — the same gradient at
     the same place on the window, so it reads exactly as the layer would. what in it keeps its colours (the
     game, the reference picture, the colour square) lies over that copy
   - each copy is pinned to where its box sits at rest (--at-x/--at-y, placeOwnLayers in script.js), not
     `fixed`: a fixed background inside anything scaled or turned is drawn against the box instead of the
     window, which a spring would show. if it is ever a hair off, it is a shade off — never black
   ========================================================= */
html.tint-layer.tinted .own-layer { isolation: isolate; }
html.tint-layer.tinted .own-layer::after {
	content: '';
	position: absolute;
	inset: calc(var(--own-edge, 0px) * -1);      /* over its own outline too, where it has one in black */
	z-index: 50;
	pointer-events: none;
	border-radius: inherit;
	background-image: var(--layer-now);
	background-repeat: no-repeat;
	background-size: calc(var(--vw, 1vw) * 100) calc(var(--vh, 1vh) * 100);
	background-position: calc((var(--at-x, 0px) - var(--own-edge, 0px)) * -1) calc((var(--at-y, 0px) - var(--own-edge, 0px)) * -1);
	mix-blend-mode: screen;
}
/* the order over the layer (2147483000): the sheet, then what lies on it, then the site's own floating things */
.draw-panel canvas { position: relative; z-index: 2147483001; }
.draw-panel #canvas-container { z-index: auto; }
.draw-panel #toolbar { z-index: auto; }
.draw-panel .corner-buttons,
.draw-panel .pick-menu,
.draw-panel .sprite-hint,
.draw-panel #miniWindow,
.draw-panel #miniWindow2 { z-index: 2147483004; }     /* the two windows are put in front of each other by draw.js, at 2147483004 and 5 */
.draw-panel .shimeji-char { z-index: 2147483006; }
.draw-panel .colour-dot { position: relative; z-index: 2147483004; }     /* the brush's colour is its colour */
.help-body, .binned-list, .page-found, .tint-pop, .tab-tip, .say-what { z-index: 2147483020; }
/* the page marks over their names: the name slides out from behind its mark. they are white, which needs no
   colouring; the filled one carries its own copy (script.js gives it .own-layer) */
.page-marks { z-index: 2147483021; }
/* the drawing's things with a black outline in the light: the copy covers the outline as well */
.draw-panel .corner-buttons button, .draw-panel .pick-menu { --own-edge: 1px; }
.tint-pop, .help-body { --own-edge: 1px; }     /* the copy covers their outline as well: kept inside it, a sliver of black showed round the rounded corners */
.draw-panel .corner-buttons button { position: relative; }     /* each copy is its own button's, not the pair's */
.draw-panel #miniWindow, .draw-panel #miniWindow2 { border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.draw-panel .windowContent2 { background: none; }     /* the window's own white shows through, and its inset outline with it */
/* the windows' outline is drawn inside them, so their copy of the layer (clipped to the inside, as the
   window clips everything) covers it; an outside border stayed raw black in the light. clipped by the
   ordinary overflow: hidden, which the reference window's resize corner needs */
/* what in them keeps its own colours lies over the copy */
.draw-panel #gameViewport { z-index: 60; }
.draw-panel #referenceImage { position: relative; z-index: 60; }
.draw-panel .tint-field, .draw-panel .tint-hue, .draw-panel .tint-now { position: relative; z-index: 60; }
/* the colour list is black like the strip, and its copy colours it; its colours lie over the copy */
.tint-pop :is(.tint-kind-dot, .hue-now, .hue-field, .hue-strip) { position: relative; z-index: 60; }


/* sparkles (14 Oct, by request): one shape only — a plus whose arms thin to points and swell a little in the
   middle — cut from whatever paints it (a mask), so it can be white over anything filled and the colour
   layer's own colour over the page, while lying over everything. a few pop round a list as it lands and out
   of the pointer on a press (sparkleAround, sparkleBurst); each flies out, slowing, grows and shrinks, with
   only a slight turn — on the graphics card */
.sparkles { position: fixed; inset: 0; z-index: 2147483647; overflow: hidden; pointer-events: none; }     /* the very top: over everything, windows and lists included */
.sparkle {
	position: absolute;
	left: 0;
	top: 0;
	/* the plus it was first, to put back:
	   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 0.5H12.5L13.5 9.4Q13.9 10.1 14.6 10.5L23.5 11.5V12.5L14.6 13.5Q13.9 13.9 13.5 14.6L12.5 23.5H11.5L10.5 14.6Q10.1 13.9 9.4 13.5L0.5 12.5V11.5L9.4 10.5Q10.1 10.1 10.5 9.4Z'/%3E%3C/svg%3E") center / contain no-repeat; */
	/* a bubble (by request, after a plain circle): a hollow ring with a little curved highlight inside it,
	   up at its top left */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M6.6 10.2A5.8 5.8 0 0 1 10.2 6.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M6.6 10.2A5.8 5.8 0 0 1 10.2 6.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	will-change: transform;
}

/* the drawing's corner marks wiggle on hover, the way the face under create and practice does (by request:
   a whole spin was not it) */
.draw-panel #gameBtn:hover svg, .draw-panel #referenceBtn:hover svg { animation: face-wiggle 0.5s var(--ease); }

/* icon buttons (by request): on hover the symbol grows a little and then rocks to and fro, slowly, like the
   record button's letters float — turning, not moving. size and turn are their own properties, so the growth
   eases in once and the rocking runs under it */
.square-button svg, .binned-head svg, .key-edit svg, .draw-panel .bare-mark:not(.tool-swap) svg, .draw-panel #uploadBtn svg {
	transition: scale 0.45s var(--spring), stroke-width 0.45s var(--spring);
}
.square-button:hover svg, .binned-head:hover svg, .key-edit:hover svg, .draw-panel .bare-mark:not(.tool-swap):hover svg, .draw-panel #uploadBtn:hover svg {
	scale: 1.14;
	stroke-width: calc(var(--sw, 1.7) / 1.14);     /* the lines thin as it grows, so it reads the same weight, only bigger (by request) — --sw is each mark's own width, set by script.js */
	animation: icon-rock 2.6s ease-in-out 0.3s infinite;
}
@keyframes icon-rock {
	0%, 100% { rotate: 0deg; }
	25% { rotate: -8deg; }
	70% { rotate: 7deg; }
}
/* a sparkle that inverts what is behind it: on its own in the page (not in .sparkles, whose stacking would
   keep it from blending with the page), white, blended by difference, just under the colour layer — so over
   white it is black and the layer colours it, over anything dark it is white */
.sparkle.is-inverting { position: fixed; z-index: 2147482999; background: #fff; mix-blend-mode: difference; pointer-events: none; }
/* the clicks' sparkle (create, practice): a plain plus, thin arms tapering a little to their tips and no
   bolder middle (by request) — the lists keep their bubbles */
.sparkle.is-plus {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 1H12.6L13.2 10.8L23 11.4V12.6L13.2 13.2L12.6 23H11.4L10.8 13.2L1 12.6V11.4L10.8 10.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 1H12.6L13.2 10.8L23 11.4V12.6L13.2 13.2L12.6 23H11.4L10.8 13.2L1 12.6V11.4L10.8 10.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the bin, in the strip beside the search (15 Oct, by request — the bar's bumps were the wrong home for it):
   its list opens from its top-left corner, under it */
.topbar > .rail-binned { margin-left: 2px; }
.topbar > .rail-binned .binned-list { top: calc(100% + 8px); left: 0; translate: none; transform-origin: 0 0; }

/* the week tile: the seven days in a row, today filled */
.week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; }
.week-day { display: grid; place-items: center; gap: 2px; padding: 0.4rem 0; border-radius: 0.8rem; }
.week-day small { font-size: 0.7rem; }
.week-day b { font-family: var(--num-font); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.week-day.is-today { color: var(--paper); background: var(--ink-fill); }

/* arranging (a tile held for half a second): every tile sways a hair, as apps on a phone do, so it is
   plain the board is being arranged — the pen that used to say so is gone */
.home-panel.is-editing .widget-card:not(.is-dragging) { animation: tile-sway 0.36s ease-in-out infinite alternate; }
.home-panel.is-editing .widget-card:nth-child(2n):not(.is-dragging) { animation-delay: -0.18s; }
@keyframes tile-sway { from { rotate: -0.6deg; } to { rotate: 0.6deg; } }

/* the bin, open on home in place of flip (15 Oct, by request): the same list as ever — empty at its top, the
   binned things in a little box that scrolls, put back and delete for good on each — only it no longer pops
   from a mark: it is always there, filling its box, in the page's own colours */
.home-bin .rail-binned { display: flex; flex: 1; align-items: stretch; min-height: 0; }     /* stretched, so the list fills the box rather than sitting small in its middle */
.home-bin .binned-head { display: none; }
.home-bin .binned-list {
	position: static;
	z-index: auto;
	flex: 1;
	width: 100%;
	height: auto;
	padding: 0;
	translate: none;
	transform: none;
	visibility: visible;
	background: none;
	border: 0;
	border-radius: 0;
	transition: none;
}
.home-bin .binned-row { border-radius: 999px; }
.home-bin .binned-row:hover { box-shadow: inset 0 0 0 1px var(--line); }     /* an outline under the pointer, never grey */
.home-bin .binned-name { font-size: 0.9rem; }

/* =========================================================
   28. phones — a layout of their own
   ---------------------------------------------------------
   a phone (app.html's head adds html.phone) is drawn at its own width, not the 1280 page shrunk to fit,
   which left everything tiny. the bar and its bumps lie down along the foot as a row of the page marks;
   every split stacks; the chat shows the list or a thread, one at a time
   ========================================================= */
.talk-back { display: none; }
html.phone {
	--rail: 0px;
	--topbar: 52px;
	--marks-h: 58px;
	--gap: 1rem;
	--col: 100%;
	overflow-x: hidden;
}
html.phone body { min-width: 0; min-height: 0; }
html.phone .app-shell { height: calc(var(--vh, 1vh) * 100); }
html.phone .app-shell::before, html.phone .app-shell::after, html.phone .rail, html.phone .tab-tip, html.phone .page-bar { display: none; }
html.phone .site-name { left: 14px; }
/* the strip: hi, the search, and the moon and colour. the clock is the board's to show */
html.phone .topbar { left: 0; gap: 0.6rem; padding: 0 0.75rem 0 3.6rem; }
html.phone .strip-middle { display: none; }
html.phone .page-search { flex: 1; width: auto; min-width: 0; }
html.phone .page-search input { font-size: 16px; }     /* 16px or more, or ios zooms in on it */
/* the page marks along the foot, evenly apart, over the safe area */
html.phone .page-marks {
	position: fixed;
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	flex-direction: row;
	justify-content: space-around;
	gap: 0;
	height: calc(var(--marks-h) + env(safe-area-inset-bottom));
	padding: 7px 0.5rem env(safe-area-inset-bottom);
	align-items: flex-start;
	background: var(--bar);
}
html.inverted.phone .page-marks { border-top: 1px solid #fff; }
html.phone .app-content { margin-top: var(--topbar); padding-bottom: calc(var(--marks-h) + env(safe-area-inset-bottom)); }
html.phone .screen { padding: var(--group); }
html.phone #homeScreen { height: auto; min-height: 100%; }
/* every box you type in is 16px or more on a phone, or ios zooms the page in on it */
html.phone input, html.phone textarea, html.phone select { font-size: max(16px, 1em); }

/* home: the time across the top, the board two to a row, then the notes and the bin */
html.phone .home-panel { --tile: calc((100cqw - var(--group)) / 2); overflow: visible; }
html.phone .home-run { height: 8rem; }
html.phone .board-row { flex-direction: column; align-items: stretch; }
html.phone .home-key { width: 100%; height: 8.5rem; }
html.phone .widget-list { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; }
html.phone .widget-card { grid-column: auto / span 1 !important; grid-row: auto !important; }
html.phone .widget-card[data-size="wide"] { grid-column: 1 / -1 !important; }
html.phone .home-lower { grid-template-columns: minmax(0, 1fr); flex: none; }
html.phone .home-box { min-height: 16rem; }

/* cards and clips: the two sides stacked, the grips between them gone */
html.phone .home-body, html.phone .recorder-panel .clip-body, html.phone .audio-body { flex-direction: column; }
html.phone .pane-split { display: none !important; }
html.phone .deck-side, html.phone .card-side, html.phone .clip-column, html.phone .clip-side, html.phone .room-column {
	flex: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}
html.phone .deck-side { max-height: 40vh; }
html.phone .card-side { min-height: 24rem; }

/* chat: the list, or a thread — never both */
html.phone .chat-body { flex-direction: column; gap: var(--group); }
html.phone .chat-body .room-column { flex: 1 !important; }
html.phone .chat-body.is-talking .room-column, html.phone .chat-body:not(.is-talking) .talk-side { display: none; }
html.phone .talk-back { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; margin-left: -0.4rem; padding: 0; color: var(--ink); background: none; border: 0; }
html.phone .talk-back svg { width: 1.3rem; height: 1.3rem; }
html.phone .chat-body .talk-side { flex: 1; padding: 0.6rem; }
html.phone .said-words, html.phone .said-edit { max-width: 82%; }
html.phone .said-tools { display: none; }      /* a long press on a bubble opens its dropdown instead */
html.phone .login-card { width: 100%; padding: 2rem 1.2rem; }
html.phone .login-title { font-size: 2.6rem; }

/* windows: nearly the whole screen */
html.phone .modal-panel { width: calc(100vw - 1.5rem) !important; max-width: none !important; max-height: calc(var(--vh, 1vh) * 100 - 2rem) !important; }
html.phone .home-run { height: 10rem; }
html.phone .home-key { height: 10rem; }
/* draw: the toolbar wraps onto as many rows as it needs, as a rounded box rather than a pill */
html.phone .draw-panel #toolbar { flex-wrap: wrap; justify-content: center; border-radius: 1.4rem; padding: var(--tight); }
html.phone .draw-panel .toolbar-group { flex-wrap: wrap; justify-content: center; }
/* the chat fills the screen between the strip and the marks, rather than running on under them: the thread
   scrolls inside itself and the message box stays in sight */
html.phone .app-content:has(#chatPanel:not([hidden])) #homeScreen { height: 100%; min-height: 0; }
html.phone #chatPanel { flex: 1; min-height: 0; }
html.phone .talk-start-face { width: 3.5rem; height: 3.5rem; }
/* holding shift, only the bin shows beside a message: the edit, copy and dots step aside */
.talk-log.is-shift .said-tools { visibility: hidden !important; }