/* The cozy theme: the look of Today's Little Shop (今日杂货铺), the calendar
   app moko made, by way of 豆家便签板, the household's clipboard: paper, tape
   and cards on a cloth desk, in six themes. Tokens and themes come first, then
   the page, the header and its theme menu, boards and cards, file rows,
   buttons, and the narrow layouts last. README.md says how a page uses it. */

/* Moko's two fonts, cut down to the clipboard's own words (README.md lists
   what they hold). Free text, such as file names, keeps the system's font. */
@font-face {
	font-family: "Cozy Body";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/body.woff2") format("woff2");
}

/* The display font, for the fixed words only. Pages name it only as
   --display-font, so this src line alone swaps it (README.md lists OFL fonts
   that would fit). */
@font-face {
	font-family: "Cozy Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/display.woff2") format("woff2");
}

/* ------------------------------------------------------------ tokens */

:root {
	--body-font:
		"Cozy Body", "KaiTi", "STKaiti", "PingFang SC", "Microsoft YaHei",
		sans-serif;
	--display-font:
		"Cozy Display", "Cozy Body", "PingFang SC", "Microsoft YaHei", sans-serif;
	--content-font:
		system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
	--ease-craft: cubic-bezier(0.2, 0.8, 0.2, 1);
	--text-halo:
		0 1px 0 rgba(255, 254, 248, 0.88), 1px 0 0 rgba(255, 254, 248, 0.76),
		-1px 0 0 rgba(255, 254, 248, 0.76), 0 -1px 0 rgba(255, 254, 248, 0.68);
}

/* The rabbit theme is the default, and each theme after it changes what it
   needs: its paper, ink, cloth, tape and the six stickers its art puts around
   the page. This block holds on every [data-theme] element as well as the
   root, so a part of the page can wear another theme (the theme picker's
   swatches do), with the textures below made from that theme's colours. */
:root,
[data-theme] {
	--canvas: #dce3d3;
	--linen: #eee5d1;
	--paper: #f4ebd9;
	--paper-warm: #f1e4cd;
	--ink: #71635c;
	--deep-ink: #66554e;
	--muted: #837468;
	--line: #d5c9b5;
	--surface-rgb: 151, 134, 114;
	--header-paper: #f0e4d0;
	--day-paper: #fff7e6;
	--tab-cloth: #f3e4df;
	--accent-ink: #69795c;
	--accent-line: #a8b599;
	--accent-wash: #eef2e8;
	--action-paper: #e1ebd8;
	--action-ink: #49614e;
	--red: #ba8793;
	--red-soft: #ffe2e4;
	--yellow: #e5b95b;
	--desk-texture: url("textures/fabric-cotton.png");
	--desk-pattern:
		linear-gradient(90deg, rgba(157, 164, 133, 0.06) 50%, transparent 50%),
		linear-gradient(rgba(157, 164, 133, 0.06) 50%, transparent 50%);
	--desk-size: auto, 38px 38px, 38px 38px;
	--desk-tint: 35%;
	--paper-texture: url("textures/fabric-cotton.png");
	--header-texture: url("textures/white-linen.png");
	--header-texture-opacity: 0.36;
	--header-blend: multiply;
	--header-seam: dashed;
	--edge-art: none;
	--edge-opacity: 0.3;
	--tape-a: repeating-linear-gradient(
		90deg,
		#eecfd477 0 8px,
		#fff9f1cc 8px 16px
	);
	--tape-b:
		radial-gradient(circle, #a4b18c77 0 1.5px, transparent 2px),
		linear-gradient(#fcfaed, #fcfaed);
	--pattern-thread: #b77f79;
	--pattern-dot: #859778;
	--board-wash: #ffffff2e;
	--decoration-opacity: 0.23;
	--decoration-filter: saturate(0.65);
	--art-1: url("irasutoya/shop-rabbit.png");
	--art-2: url("irasutoya/shop-cat.png");
	--art-3: url("irasutoya/background-tulip.png");
	--art-4: url("irasutoya/background-star.png");
	--art-5: url("irasutoya/kirakira-2.png");
	--art-6: url("irasutoya/kirakira-3.png");

	--shadow:
		0 2px 0 rgba(var(--surface-rgb), 0.06),
		0 5px 12px rgba(var(--surface-rgb), 0.04);
	--board-rule: rgba(var(--surface-rgb), 0.07);
	--paper-fiber:
		repeating-linear-gradient(
			90deg,
			rgba(var(--surface-rgb), 0.026) 0 1px,
			transparent 1px 7px
		),
		repeating-linear-gradient(
			0deg,
			rgba(var(--surface-rgb), 0.018) 0 1px,
			transparent 1px 8px
		);
	--module-gingham:
		linear-gradient(
			90deg,
			color-mix(in srgb, var(--pattern-thread) 12%, transparent) 50%,
			transparent 50%
		),
		linear-gradient(
			color-mix(in srgb, var(--pattern-thread) 12%, transparent) 50%,
			transparent 50%
		);
	--module-dots: radial-gradient(
		circle,
		color-mix(in srgb, var(--pattern-dot) 30%, transparent) 0 1.8px,
		transparent 2.2px
	);
}

[data-theme="strawberry"] {
	--canvas: #e6d0d0;
	--linen: #f0dedc;
	--paper: #f5e6e0;
	--paper-warm: #eed8dc;
	--ink: #785e65;
	--deep-ink: #73535d;
	--muted: #896b76;
	--line: #d8bac4;
	--surface-rgb: 165, 123, 137;
	--header-paper: #f0dcda;
	--day-paper: #f1f4e8;
	--tab-cloth: #f3dde4;
	--accent-ink: #8e5f70;
	--accent-line: #c393a3;
	--accent-wash: #faebef;
	--action-paper: #f3e0e6;
	--action-ink: #865965;
	--desk-pattern:
		linear-gradient(90deg, #dc8fa318 50%, transparent 50%),
		linear-gradient(#dc8fa318 50%, transparent 50%);
	--desk-size: auto, 24px 24px, 24px 24px;
	--edge-art: url("irasutoya/lace-pink.png");
	--edge-opacity: 0.45;
	--tape-a: repeating-linear-gradient(
		-45deg,
		#efbfd477 0 5px,
		#fff8f0dd 5px 10px
	);
	--tape-b:
		linear-gradient(90deg, #b6c3a244 50%, transparent 50%),
		linear-gradient(#b6c3a244 50%, #fff9efbb 50%);
	--pattern-thread: #ce8fa5;
	--pattern-dot: #c28fa0;
	--art-1: url("irasutoya/strawberry-friend.png");
	--art-2: url("irasutoya/strawberry-milk.png");
	--art-3: url("irasutoya/sticker-fruit_ichigo_amaou.png");
	--art-4: url("irasutoya/sticker-ribbon_pink.png");
	--art-5: url("irasutoya/sticker-smallflower_ppink.png");
	--art-6: url("irasutoya/sticker-fruit_ichigo_amaou.png");
}

[data-theme="sky"] {
	--canvas: #d4e0e1;
	--linen: #e5e7db;
	--paper: #f1ead9;
	--paper-warm: #e6e9df;
	--ink: #59616a;
	--deep-ink: #4c5660;
	--muted: #727e84;
	--line: #b9cdce;
	--surface-rgb: 137, 158, 174;
	--header-paper: #e9e5d3;
	--day-paper: #fcf6f8;
	--tab-cloth: #e6eef4;
	--accent-ink: #556f85;
	--accent-line: #91a8b7;
	--accent-wash: #edf3f7;
	--action-paper: #e0ebf0;
	--action-ink: #4e6e82;
	--desk-pattern: repeating-linear-gradient(
		0deg,
		#ffffff55 0 2px,
		transparent 2px 28px
	);
	--desk-size: auto, auto;
	--edge-art: url("irasutoya/lace-white.png");
	--edge-opacity: 0.7;
	--tape-a:
		radial-gradient(circle, #a7bcc780 0 1.5px, transparent 2px),
		linear-gradient(#f3f8f9, #f3f8f9);
	--tape-b: repeating-linear-gradient(
		90deg,
		#eed9a255 0 6px,
		#fffaf2bb 6px 12px
	);
	--pattern-thread: #86aeb8;
	--pattern-dot: #c2a161;
	--art-1: url("irasutoya/sunny-doll.png");
	--art-2: url("irasutoya/sticker-mark_tenki_hare.png");
	--art-3: url("irasutoya/sticker-mark_tenki_kumori.png");
	--art-4: url("irasutoya/sticker-mark_tenki_hare.png");
	--art-5: url("irasutoya/sticker-mark_tenki_kumori.png");
	--art-6: url("irasutoya/sticker-mark_tenki_hare.png");
}

[data-theme="halloween"] {
	--canvas: #d5c2b0;
	--linen: #e9d4b9;
	--paper: #f0dfc6;
	--paper-warm: #ead1af;
	--ink: #765d56;
	--deep-ink: #694e50;
	--muted: #82685d;
	--line: #e0cbb7;
	--surface-rgb: 157, 117, 87;
	--header-paper: #e9cfb4;
	--day-paper: #eee5ef;
	--tab-cloth: #edcfaf;
	--accent-ink: #846552;
	--accent-line: #bc997c;
	--accent-wash: #f6e7d5;
	--action-paper: #f1d7b8;
	--action-ink: #765240;
	--desk-texture: url("textures/paper-cardboard.png");
	--desk-pattern: repeating-linear-gradient(
		135deg,
		#80647609 0 13px,
		#ffffff0d 13px 26px
	);
	--desk-size: auto, auto;
	--header-texture: url("textures/natural-paper.png");
	--header-texture-opacity: 0.42;
	--header-seam: solid;
	--tape-a: repeating-linear-gradient(
		-45deg,
		#997d9b99 0 5px,
		#f3d4a8cc 5px 10px
	);
	--tape-b: repeating-linear-gradient(
		90deg,
		#e1b88599 0 7px,
		#fff4e7cc 7px 14px
	);
	--pattern-thread: #c19769;
	--pattern-dot: #a08aad;
	--decoration-opacity: 0.38;
	--art-1: url("irasutoya/ghost-lantern.png");
	--art-2: url("irasutoya/pumpkin.png");
	--art-3: url("irasutoya/candy.png");
	--art-4: url("irasutoya/bat.png");
	--art-5: url("irasutoya/candy.png");
	--art-6: url("irasutoya/pumpkin.png");
}

[data-theme="gothic"] {
	--canvas: #353139;
	--linen: #eee7ec;
	--paper: #f9f2f4;
	--paper-warm: #f4e9ef;
	--ink: #675460;
	--deep-ink: #594452;
	--muted: #94838d;
	--line: #cfb9c5;
	--surface-rgb: 140, 110, 133;
	--header-paper: #e9dde4;
	--day-paper: #f2e7d6;
	--tab-cloth: #645260;
	--accent-ink: #835773;
	--accent-line: #b68ea7;
	--accent-wash: #eadce6;
	--action-paper: #dac5d4;
	--action-ink: #644b61;
	--desk-texture: url("textures/fabric-twill.png");
	--desk-pattern: repeating-linear-gradient(
		90deg,
		#dcc4d10a 0 1px,
		transparent 1px 24px
	);
	--desk-size: auto, auto;
	--desk-tint: 62%;
	--header-texture-opacity: 0.2;
	--header-blend: normal;
	--edge-art: url("irasutoya/lace-black.png");
	--edge-opacity: 0.32;
	--tape-a: repeating-linear-gradient(
		90deg,
		#a08c9bcc 0 6px,
		#e8dbe4cc 6px 12px
	);
	--tape-b:
		radial-gradient(circle, #f0d8b4 0 1px, transparent 1.5px),
		linear-gradient(#877487, #877487);
	--pattern-thread: #a887a2;
	--pattern-dot: #ab8da7;
	--board-wash: transparent;
	--board-rule: transparent;
	--decoration-opacity: 0.65;
	--decoration-filter: saturate(0.55) brightness(1.45);
	--art-1: url("irasutoya/witch-cat.png");
	--art-2: url("irasutoya/black-cat.png");
	--art-3: url("irasutoya/moon.png");
	--art-4: url("irasutoya/bat.png");
	--art-5: url("irasutoya/moon.png");
	--art-6: url("irasutoya/black-cat.png");
}

[data-theme="coffee"] {
	--canvas: #ddd0bd;
	--linen: #faf3e8;
	--paper: #fffaf2;
	--paper-warm: #f9eedf;
	--ink: #75604d;
	--deep-ink: #634b3b;
	--muted: #998574;
	--line: #deccb8;
	--surface-rgb: 144, 112, 80;
	--header-paper: #f5e8d7;
	--day-paper: #eaf0df;
	--tab-cloth: #c8b69d;
	--accent-ink: #786247;
	--accent-line: #b29a7e;
	--accent-wash: #eee2ce;
	--action-paper: #e4d4bb;
	--action-ink: #6b553f;
	--desk-texture: url("textures/paper-cardboard.png");
	--desk-pattern: repeating-linear-gradient(
		90deg,
		#85745012 0 1px,
		transparent 1px 5px,
		#85745012 5px 6px,
		transparent 6px 38px
	);
	--desk-size: auto, auto;
	--desk-tint: 62%;
	--header-texture: url("textures/natural-paper.png");
	--header-texture-opacity: 0.42;
	--header-blend: normal;
	--header-seam: solid;
	--tape-a: repeating-linear-gradient(
		90deg,
		#9b876c88 0 5px,
		#efe3cbdd 5px 10px
	);
	--tape-b:
		linear-gradient(90deg, #a9b49c66 50%, transparent 50%),
		linear-gradient(#a9b49c66 50%, #fff6e7bb 50%);
	--pattern-thread: #b09372;
	--pattern-dot: #9b9f7e;
	--decoration-opacity: 0.35;
	--art-1: url("irasutoya/coffee-bag.png");
	--art-2: url("irasutoya/coffee-cup.png");
	--art-3: url("irasutoya/coffee-beans.png");
	--art-4: url("irasutoya/sticker-pan_toast_kongari.png");
	--art-5: url("irasutoya/coffee-beans.png");
	--art-6: url("irasutoya/coffee-cup.png");
}

/* -------------------------------------------------------------- page */

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	-webkit-text-size-adjust: 100%;
}

/* The cloth desk everything lies on: the page's, or a part's in its own theme */
body,
.desk {
	color: var(--ink);
	background-color: var(--canvas);
	background-image:
		linear-gradient(
			color-mix(in srgb, var(--canvas) var(--desk-tint), transparent),
			color-mix(in srgb, var(--canvas) var(--desk-tint), transparent)
		),
		var(--desk-texture), var(--desk-pattern);
	background-size: auto, var(--desk-size);
	transition: background-color 220ms ease;
}

body {
	min-height: 100vh;
	margin: 0;
	overflow-x: hidden;
	font-family: var(--body-font);
	font-weight: 400;
	font-synthesis: none;
}

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

button {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

a {
	color: var(--accent-ink);
	text-underline-offset: 3px;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px dashed var(--accent-ink);
	outline-offset: 3px;
}

h1,
h2,
p {
	margin: 0;
}

h1,
h2 {
	color: var(--deep-ink);
	font: 400 34px/1.2 var(--display-font);
	-webkit-text-stroke: 0.35px currentColor;
	text-shadow:
		0 1px 0 rgba(255, 254, 248, 0.94),
		1px 0 0 rgba(255, 254, 248, 0.68),
		-1px 0 0 rgba(255, 254, 248, 0.68);
}

/* The page's column. The safe areas keep it clear of the notch and the home
   indicator in landscape, and of the status bar under a Home Screen app's. */
.shell {
	max-width: 1600px;
	margin: 0 auto;
	padding: calc(26px + env(safe-area-inset-top))
		max(16px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom))
		max(16px, env(safe-area-inset-left));
	text-shadow: var(--text-halo);
}

/* A column to read down, such as a folder's list */
.shell.is-narrow {
	max-width: 960px;
}

.stack {
	display: grid;
	gap: 30px;
}

/* An icon from icons.svg: <svg class="icon"><use href="/theme/icons.svg#file"> */
.icon {
	flex: none;
	width: 22px;
	height: 22px;
}

/* The six theme stickers, by slot */
.art {
	display: block;
	background: center / contain no-repeat;
	pointer-events: none;
}
.art-1 {
	background-image: var(--art-1);
}
.art-2 {
	background-image: var(--art-2);
}
.art-3 {
	background-image: var(--art-3);
}
.art-4 {
	background-image: var(--art-4);
}
.art-5 {
	background-image: var(--art-5);
}
.art-6 {
	background-image: var(--art-6);
}

/* ------------------------------------------------------------ header */

.topbar {
	position: relative;
	z-index: 5;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-bottom: 26px;
	padding: 12px 16px;
	border-radius: 7px 5px 8px 4px / 5px 8px 4px 7px;
	background: var(--header-paper);
	box-shadow:
		inset 0 1px 0 #ffffffb3,
		inset 0 -2px 1px rgba(var(--surface-rgb), 0.06),
		0 0 0 1px rgba(var(--surface-rgb), 0.2),
		0 3px 0 rgba(var(--surface-rgb), 0.09),
		0 6px 10px rgba(var(--surface-rgb), 0.05);
}

/* Tape holding the header to the desk */
.topbar::before {
	position: absolute;
	top: -14px;
	left: 26px;
	width: 76px;
	height: 24px;
	border: 1px solid rgba(187, 151, 162, 0.16);
	border-radius: 4px;
	background-color: var(--paper);
	background-image: var(--tape-a);
	background-size: 14px 14px;
	transform: rotate(-4deg);
	content: "";
}

/* Lace along the header's lower edge, in the themes that have it */
.topbar::after {
	position: absolute;
	z-index: -1;
	right: 10px;
	bottom: 0;
	left: 10px;
	height: 9px;
	background: var(--edge-art) repeat-x left bottom / auto 9px;
	opacity: var(--edge-opacity);
	pointer-events: none;
	content: "";
}

/* The header's cloth and its stitched seam: <span class="header-material"> */
.header-material {
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.header-material::before {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--header-texture) repeat left top / auto;
	opacity: var(--header-texture-opacity);
	mix-blend-mode: var(--header-blend);
	content: "";
}

.header-material::after {
	position: absolute;
	inset: 7px;
	border: 1px var(--header-seam)
		color-mix(in srgb, var(--pattern-thread) 26%, transparent);
	border-radius: 4px 3px 5px 4px;
	box-shadow: 0 1px 0 #ffffff70;
	content: "";
}

/* The shopkeeper and the name, which may link home */
.brand {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.brand-mark {
	flex: none;
	width: 62px;
	height: 86px;
	background-position: center bottom;
	filter: saturate(0.78) drop-shadow(1px 2px 1px rgba(var(--surface-rgb), 0.08));
	transform: rotate(-7deg);
}

/* The name in crayon on a strip of paper, as her logo is drawn:
   <span class="logo"><span>name</span></span>. The crayon is the SVG filter
   that cozy.js adds to the page. */
.logo {
	position: relative;
	z-index: 0;
	padding: 8px 20px 14px 14px;
	color: var(--deep-ink);
	font: 400 clamp(30px, 3.4vw, 46px) / 1.1 var(--display-font);
	letter-spacing: 0.08em;
	white-space: nowrap;
	text-shadow: none;
}

.logo::before {
	position: absolute;
	z-index: -1;
	inset: 4px 0 6px;
	background:
		var(--paper-fiber), color-mix(in srgb, var(--day-paper) 80%, #fff);
	clip-path: polygon(
		1% 10%,
		4% 0,
		30% 5%,
		62% 0,
		97% 6%,
		100% 2%,
		99% 90%,
		96% 100%,
		60% 95%,
		25% 100%,
		2% 94%,
		0 98%
	);
	transform: rotate(-1.2deg);
	content: "";
}

.logo::after {
	position: absolute;
	z-index: -1;
	right: 16px;
	bottom: 10px;
	left: 12px;
	height: 7px;
	border-radius: 40%;
	background: color-mix(in srgb, var(--yellow) 60%, transparent);
	filter: url(#crayon);
	transform: rotate(-0.8deg);
	content: "";
}

.logo > span {
	display: inline-block;
	-webkit-text-stroke: 0.7px currentColor;
	filter: url(#crayon);
	transform: rotate(-1.5deg);
}

/* The "···" menu, a <details class="top-more"> at the header's end */
.top-more {
	position: relative;
	flex: none;
	margin-left: auto;
}

.top-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 6px;
	color: #8c887c;
	list-style: none;
	cursor: pointer;
	transition:
		transform 190ms var(--ease-craft),
		color 180ms ease;
	-webkit-tap-highlight-color: transparent;
}

.top-icon::-webkit-details-marker {
	display: none;
}

.top-icon:hover {
	color: #665e51;
	transform: translateY(-2px);
}

.top-icon > span {
	display: block;
	font: 32px/1 var(--body-font);
}

.top-more[open] > .top-icon {
	color: var(--accent-ink);
}

/* Without scripts the theme picker stays empty, so the menu stays out. */
@media (scripting: none) {
	.top-more {
		display: none;
	}
}

.more-panel {
	position: absolute;
	z-index: 10;
	top: calc(100% + 8px);
	right: 0;
	display: grid;
	gap: 2px;
	width: 232px;
	max-width: calc(100vw - 32px);
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 5px 7px 4px 6px;
	background: var(--paper-fiber), var(--paper);
	box-shadow:
		4px 6px 0 rgba(90, 74, 62, 0.1),
		0 3px 14px rgba(90, 74, 62, 0.08);
	animation: menu-appear 160ms ease-out;
}

@keyframes menu-appear {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* The themes, each a swatch of its cloth and shopkeeper, which cozy.js puts
   in an empty <fieldset class="theme-picker"> */
.theme-picker {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
	min-width: 0;
	margin: 0;
	padding: 3px 0 0;
	border: 0;
}

.theme-picker legend {
	padding: 0 2px;
	color: var(--muted);
	font: 14px/1.5 var(--body-font);
}

.theme-choice {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 56px;
	border-radius: 4px;
	cursor: pointer;
}

.theme-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.theme-swatch {
	width: 50px;
	height: 38px;
	border: 1px solid rgba(115, 102, 89, 0.15);
	border-radius: 4px 3px 5px 3px;
	background-color: var(--tab-cloth);
	background-image: var(--art-1), var(--paper-texture);
	background-position:
		center,
		left top;
	background-repeat: no-repeat, repeat;
	background-size:
		auto 30px,
		auto;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
	transition: transform 180ms var(--ease-craft);
}

.theme-choice:hover .theme-swatch {
	transform: translateY(-2px) rotate(-3deg);
}

.theme-choice input:checked + .theme-swatch {
	outline: 2px solid var(--accent-line);
	outline-offset: 3px;
}

.theme-choice:has(input:focus-visible) {
	outline: 2px dashed var(--accent-ink);
	outline-offset: 1px;
}

/* ---------------------------------------------------- boards and cards */

/* A panel of grid paper */
.panel {
	position: relative;
	min-width: 0;
	padding: 16px;
	border-radius: 6px 8px 7px 5px / 7px 4px 8px 6px;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.52) 1px, transparent 1px),
		var(--paper);
	background-size: 19px 19px;
	box-shadow:
		0 0 0 1px rgba(var(--surface-rgb), 0.2),
		var(--shadow);
}

/* A board that holds a list: ruled linen with a dotted hem */
.board {
	min-height: 200px;
	background:
		linear-gradient(var(--board-wash), var(--board-wash)), var(--paper-fiber),
		repeating-linear-gradient(
			0deg,
			transparent 0 31px,
			var(--board-rule) 31px 32px
		),
		var(--linen);
}

.board::after {
	position: absolute;
	right: 12px;
	bottom: 2px;
	left: 12px;
	height: 9px;
	background-image: var(--module-dots);
	background-size: 19px 9px;
	pointer-events: none;
	content: "";
}

/* The board's title, how many it holds, and a sticker or two at its end */
.board-head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	min-height: 44px;
	margin-bottom: 18px;
	padding-right: 64px;
}

.count {
	color: var(--muted);
	font-size: 16px;
}

/* Where a list is, each folder above it a link: in the system's font, which
   has every character a folder's name may hold */
.crumbs {
	flex-basis: 100%;
	min-width: 0;
	color: var(--muted);
	font: 15px/1.5 var(--content-font);
	overflow-wrap: anywhere;
}

.crumbs a {
	color: var(--accent-ink);
	text-decoration: none;
}

.crumbs a:hover {
	text-decoration: underline dotted;
}

.board-sticker {
	position: absolute;
	top: -10px;
	right: 6px;
	width: 50px;
	height: 64px;
	opacity: 0.8;
	filter: drop-shadow(2px 3px 0 rgba(104, 84, 64, 0.1));
	transform: rotate(6deg);
}

.sparkle {
	position: absolute;
	top: -4px;
	width: 30px;
	height: 30px;
	filter: drop-shadow(2px 3px 0 rgba(104, 84, 64, 0.1)) saturate(0.92);
}

.sparkle-a {
	right: 58px;
	opacity: 0.64;
	transform: rotate(-10deg);
}

.sparkle-b {
	right: 16px;
	opacity: 0.52;
	transform: rotate(12deg);
}

/* A faint sticker behind a part, placed by the page */
.background-sticker {
	position: absolute;
	z-index: -1;
	opacity: var(--decoration-opacity);
	filter: var(--decoration-filter);
}

.empty-state {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: 112px;
	padding: 18px;
	border: 2px solid rgba(104, 84, 64, 0.14);
	border-radius: 7px 5px 8px 4px / 5px 8px 4px 7px;
	color: var(--muted);
	background: var(--paper-fiber), var(--paper-warm);
	clip-path: polygon(0.8% 1.4%, 98.9% 0.7%, 99.4% 98.4%, 1.1% 99.2%);
	font-size: 18px;
	text-align: center;
}

.card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	align-items: start;
	gap: 22px 16px;
}

/* A card of paper taped to the board. Cards in a list take four papers and
   three tapes in turn, and lift a little under the pointer. */
.card {
	--card-paper: var(--paper);
	position: relative;
	display: grid;
	gap: 12px;
	min-width: 0;
	padding: 16px 14px 14px;
	border: 2px solid rgba(var(--surface-rgb), 0.18);
	border-radius: 9px 6px 8px 7px / 6px 9px 6px 8px;
	background: var(--paper-fiber), var(--card-paper);
	box-shadow:
		0 2px 3px rgba(var(--surface-rgb), 0.06),
		inset 0 0 0 2px rgba(255, 255, 255, 0.42);
	transition:
		transform 180ms var(--ease-craft),
		box-shadow 180ms var(--ease-craft),
		border-color 180ms ease;
}

.card-list > .card:nth-child(2n) {
	--card-paper: color-mix(in srgb, var(--paper) 76%, #e9bfcc);
}

.card-list > .card:nth-child(3n) {
	--card-paper: color-mix(in srgb, var(--paper) 76%, #c4d2b8);
}

.card-list > .card:nth-child(4n) {
	--card-paper: color-mix(in srgb, var(--paper) 76%, #c4d7df);
}

.card-list > .card:hover {
	border-color: rgba(104, 84, 64, 0.26);
	box-shadow:
		5px 7px 0 rgba(104, 84, 64, 0.1),
		inset 0 0 0 2px rgba(255, 255, 255, 0.42);
	transform: translateY(-2px);
}

.card::before {
	position: absolute;
	z-index: 1;
	top: -9px;
	left: 17%;
	width: 52px;
	height: 15px;
	border: 1px solid rgba(52, 43, 36, 0.08);
	border-radius: 3px;
	background-color: var(--paper);
	background-image: var(--tape-a);
	background-size: 12px 12px;
	opacity: 0.85;
	transform: rotate(-4deg);
	content: "";
}

.card-list > .card:nth-child(2n)::before {
	left: 62%;
	background-image: var(--tape-b);
	transform: rotate(5deg);
}

.card-list > .card:nth-child(3n)::before {
	left: 38%;
	background-image: var(--module-gingham);
	transform: rotate(-6deg);
}

.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
}

.card-meta {
	min-width: 0;
	color: var(--muted);
	font-size: 15px;
}

/* Free text, such as what people write: in the system's font, which has
   every character, where the theme's fonts hold only their own words */
.free-text {
	color: var(--ink);
	font: 17px/1.6 var(--content-font);
	overflow-wrap: anywhere;
}

/* A name that comes from data, such as a folder's in a heading, takes the
   system's font too, unless the page marks it is-ascii (all printable ASCII,
   which the theme's fonts have), when it keeps the font around it. */
.name:not(.is-ascii) {
	font-family: var(--content-font);
}

/* ------------------------------------------------------------- files */

/* A list of files, one row each: its icon, its name and what it is, and
   buttons at the end */
.file-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.file-row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 8px 2px;
	border-bottom: 1px dashed var(--line);
}

.file-row:first-child {
	padding-top: 0;
}

.file-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.file-thumb {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 5px 7px 4px 6px;
	color: var(--muted);
	background: var(--paper-fiber), var(--paper-warm);
}

.file-info {
	display: grid;
	min-width: 0;
}

/* A name is free text, in the system's font, and may be a link */
.file-name {
	color: var(--ink);
	font: 15px/1.4 var(--content-font);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.file-name:hover {
	color: var(--accent-ink);
	text-decoration: underline dotted;
}

.file-meta {
	color: var(--muted);
	font-size: 13px;
}

/* A row's own tag after what it is, such as when it leaves */
.file-meta .chip {
	min-height: 0;
	padding: 0 6px;
	font-size: 13px;
	line-height: 18px;
}

.file-actions {
	display: flex;
	gap: 6px;
}

/* ----------------------------------------------------------- buttons */

/* The big buttons, from the drop basket's "schedule" and "for later" */
.action-button {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	min-height: 50px;
	padding: 0 14px;
	border: 1px solid var(--accent-line);
	border-radius: 7px 8px 6px 8px;
	color: var(--action-ink);
	background:
		repeating-linear-gradient(
			0deg,
			transparent 0 3px,
			rgba(255, 255, 255, 0.14) 3px 4px
		),
		repeating-linear-gradient(
			90deg,
			transparent 0 3px,
			rgba(87, 112, 77, 0.025) 3px 4px
		),
		var(--action-paper);
	box-shadow: 0 3px 0 var(--line);
	font: 400 19px/1 var(--display-font);
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	transition:
		transform 180ms var(--ease-craft),
		box-shadow 180ms var(--ease-craft),
		border-color 180ms ease,
		background-color 180ms ease;
}

.action-button::before {
	position: absolute;
	z-index: -1;
	inset: 4px;
	border: 1px dashed var(--accent-line);
	border-radius: 4px;
	pointer-events: none;
	content: "";
}

.action-button .icon {
	transition: transform 220ms var(--ease-craft);
}

.action-button:hover {
	border-color: var(--accent-ink);
	box-shadow: 0 5px 0 var(--line);
	transform: translateY(-1px);
}

.action-button:hover .icon {
	transform: translateY(-1px) rotate(-7deg);
}

.action-button:active {
	box-shadow: 0 1px 0 var(--line);
	transform: translateY(2px);
}

.action-button.is-plain {
	border-color: #c6b299;
	color: #76543f;
	background: var(--paper-fiber), var(--paper-warm);
	box-shadow: 0 3px 0 #d7c9b2;
}

.action-button.is-plain::before {
	border-color: #d6c3a9;
}

.action-button.is-plain:hover {
	border-color: #a4896b;
	background-color: var(--accent-wash);
	box-shadow: 0 5px 0 #d7c9b2;
}

.icon-button {
	position: relative;
	display: inline-grid;
	grid-auto-flow: column;
	place-items: center;
	gap: 4px;
	min-width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid rgba(52, 43, 36, 0.24);
	border-radius: 8px;
	color: var(--ink);
	background:
		var(--paper-fiber),
		radial-gradient(
			circle at 10px 10px,
			rgba(229, 185, 91, 0.2) 0 3px,
			transparent 3.5px
		),
		var(--paper);
	background-size:
		auto,
		18px 18px,
		auto;
	box-shadow: 3px 4px 0 rgba(52, 43, 36, 0.1);
	text-decoration: none;
	transition:
		transform 180ms var(--ease-craft),
		box-shadow 180ms var(--ease-craft),
		border-color 180ms ease,
		color 160ms ease;
}

.icon-button .icon {
	width: 20px;
	height: 20px;
}

.icon-button:hover {
	border-color: var(--red);
	color: var(--red);
	box-shadow: 4px 6px 0 rgba(52, 43, 36, 0.12);
	transform: translateY(-1px) rotate(-2deg);
}

.icon-button:active {
	box-shadow: 1px 2px 0 rgba(52, 43, 36, 0.13);
	transform: translateY(2px) scale(0.94);
}

/* A little tag, such as how long something is kept */
.chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 5px;
	min-height: 34px;
	padding: 3px 10px;
	border: 1px dashed var(--accent-line);
	border-radius: 6px;
	color: var(--accent-ink);
	background: var(--paper-fiber), var(--accent-wash);
	font: 15px/1.2 var(--body-font);
	white-space: nowrap;
	transition: transform 160ms var(--ease-craft);
}

.chip .icon {
	width: 16px;
	height: 16px;
}

:is(a, button).chip:hover {
	border-style: solid;
	transform: translateY(-1px) rotate(-1deg);
}

/* A warning, such as a file that leaves within a day or a broken link */
.chip.is-warning {
	border-color: var(--red);
	color: var(--red);
	background-color: var(--red-soft);
}

/* ---------------------------------------------------------- narrow */

@media (max-width: 860px) {
	.shell {
		padding-top: calc(22px + env(safe-area-inset-top));
	}
}

@media (max-width: 520px) {
	.shell {
		padding-right: max(12px, env(safe-area-inset-right));
		padding-left: max(12px, env(safe-area-inset-left));
	}

	.topbar {
		padding: 12px 10px;
	}

	.brand-mark {
		width: 46px;
		height: 64px;
	}

	.logo {
		padding: 6px 14px 12px 10px;
		font-size: 29px;
	}

	h1,
	h2 {
		font-size: 30px;
	}

	.panel {
		padding: 14px 12px;
	}

	.card {
		padding: 14px 12px 12px;
	}
}

/* Fingers need bigger targets */
@media (pointer: coarse) {
	.icon-button {
		min-width: 44px;
		height: 44px;
	}

	.chip {
		min-height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}