/* ---------------------------------------------------------------- theme */

:root {
	color-scheme: light;

	--bg:          #ffffff;
	--bg-2:        #f4f4f4;
	--bg-3:        #e9e9e9;
	--nav:         #1c2632;
	--nav-text:    #e8eaed;
	--text:        #1a1a1a;
	--text-soft:   #555;
	--text-faint:  #888;
	--line:        #d0d0d0;
	--line-soft:   #e6e6e6;
	--sel:         #cfe2f5;
	--sel-line:    #7aadd9;
	--pill:        #2b3a4a;
	--pill-off:    #9aa5b1;
	--accent:      #922610;

	--parchment:   #fdf1dc;
	--parch-edge:  #d8cbae;
	--sb-head:     #822000;
	--sb-rule:     #822000;
	--sb-text:     #333333;

	/* the ability block: the publisher's tints, by row */
	--ab-text:     #58180d;
	--ab-top-a:    #dcd2ba;
	--ab-top-b:    #d7c9c2;
	--ab-bot-a:    #d0d5b5;
	--ab-bot-b:    #d4c8db;
	--ab-head:     #69665f;
	--roll:        #337ab7;
	--roll-hover:  #23527c;

	--serif:   "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--display: "Optima", "Iowan Old Style", Palatino, Georgia, serif;
	/* the stat block follows the printed page: a plain text face for the body,
	   an old-style serif for the name and the section headings */
	--sb-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sb-disp: "Times New Roman", Times, Georgia, serif;
	--ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

	--nav-h: 2.1rem;
	--app-max: 1170px;
	--gutter: #ffffff;
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--bg:          #15171a;
	--bg-2:        #1c1f23;
	--bg-3:        #262a2f;
	--nav:         #0e1319;
	--nav-text:    #d8dce1;
	--text:        #dfe2e6;
	--text-soft:   #a2a8b0;
	--text-faint:  #7b8189;
	--line:        #333940;
	--line-soft:   #262b31;
	--sel:         #24405c;
	--sel-line:    #4a86bd;
	--pill:        #33414f;
	--pill-off:    #4a545e;
	--accent:      #d4664c;

	/* no parchment in the dark: the warm brown read as a red cast against the
	   cool greys around it, so the block sits on the pane's own ground */
	--parchment:   #15171a;
	--parch-edge:  #333940;
	--sb-head:     #d4664c;
	--sb-rule:     #a8412a;
	--sb-text:     #ddd6c8;

	/* dark keeps 5etools' restraint: a grey tint, not the daylight colours */
	--ab-text:     #ddd6c8;
	--ab-top-a:    rgba(150, 150, 150, .18);
	--ab-top-b:    rgba(150, 150, 150, .10);
	--ab-bot-a:    rgba(150, 150, 150, .14);
	--ab-bot-b:    rgba(150, 150, 150, .07);
	--ab-head:     #9aa0a8;
	--roll:        #6fb3e0;
	--roll-hover:  #9fcdea;
	--gutter:      #15171a;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	font: 13px/1.45 var(--ui);
	color: var(--text);
	background: var(--gutter);
	-webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- nav */

.nav {
	display: flex;
	align-items: center;
	gap: .5rem;
	height: var(--nav-h);
	padding-inline: max(.6rem, calc((100% - var(--app-max)) / 2 + .6rem));
	background: var(--nav);
	color: var(--nav-text);
}
/* Books, then the two collections. They share one box so they sit on one line;
   the open collection is marked underneath, where it cannot shift the others. */
.nav-link {
	position: relative;
	flex: none;
	margin-left: 1.1rem;
	white-space: nowrap;
	font: 600 .82rem/1 var(--display);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--nav-text);
	text-decoration: none;
	opacity: .6;
}
.nav-link:first-child { margin-left: 0; }
.nav-link:hover { opacity: .9; }
.nav-tab[aria-current="page"] { opacity: 1; }
.nav-tab[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.4em;
	height: 2px;
	background: currentColor;
}
.nav-spacer { flex: 1; }
.nav-btn {
	padding: .1rem .35rem;
	background: none;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 3px;
	color: inherit;
	cursor: pointer;
	font-size: .78rem;
	line-height: 1.3;
}
.nav-btn:hover { background: rgba(255, 255, 255, .1); }

/* On a computer the menu's box steps aside and its links sit in the bar as they
   always have; the menu button and the section's name are for a phone only. */
.nav-menu { display: contents; }
.nav-toggle, .nav-current, .nav-backdrop { display: none; }

/* A phone has no room for five links and three buttons on one line -- they ran
   off the edge and the browser zoomed the whole site out to fit them. There the
   bar holds a menu button, the open section's name and the three buttons, and
   the links open in a drawer from the left, under the bar, which stays put as
   the page scrolls. */
@media (max-width: 42rem) {
	/* a body held to the screen's height would carry the bar off with it once the
	   page scrolled past the first screen */
	body { height: auto; min-height: 100%; }
	.nav { position: sticky; top: 0; z-index: 70; padding-inline: .35rem .6rem; }
	.nav-toggle {
		display: block;
		flex: none;
		width: 2rem;
		height: 1.7rem;
		padding: 0;
		border: 0;
		border-radius: 3px;
		background: none;
		color: inherit;
		font-size: 1.15rem;
		line-height: 1;
		cursor: pointer;
	}
	.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
	.nav-current {
		display: block;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font: 600 .82rem/1 var(--display);
		letter-spacing: .16em;
		text-transform: uppercase;
	}
	.nav-menu {
		position: fixed;
		z-index: 70;
		top: var(--nav-h);
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: min(78vw, 17rem);
		padding: .4rem 0 1rem;
		overflow-y: auto;
		background: var(--nav);
		box-shadow: .4rem 0 1.2rem rgba(0, 0, 0, .35);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .2s ease, visibility 0s linear .2s;
	}
	.nav-menu.is-open { transform: none; visibility: visible; transition: transform .2s ease; }
	.nav-menu .nav-link {
		margin: 0;
		padding: .95rem 1.2rem;
		font-size: .9rem;
		opacity: .75;
	}
	.nav-menu .nav-tab[aria-current="page"] { opacity: 1; background: rgba(255, 255, 255, .08); }
	.nav-menu .nav-tab[aria-current="page"]::after { top: 0; bottom: 0; right: auto; width: 3px; height: auto; }
	.nav-backdrop:not([hidden]) {
		display: block;
		position: fixed;
		z-index: 65;
		inset: var(--nav-h) 0 0 0;
		background: rgba(0, 0, 0, .45);
	}
}

/* ---------------------------------------------------------------- panes */

/* On a wide monitor the reading panel stays a fixed block in the middle rather
   than stretching edge to edge. */
.app {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	height: calc(100vh - var(--nav-h));
	max-width: var(--app-max);
	margin: 0 auto;
	background: var(--bg);
}

/* min-height:0 twice over: once so the grid item may be shorter than its
   content, once so the scrolling list may be shorter than its rows. */
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane-list { border-right: 1px solid var(--line); }
/* Reserve the scrollbar's width: the stat block scrolls and the info tab may not,
   and without this the pane narrows by a scrollbar and the banner resizes with it. */
.pane-detail { overflow-y: auto; scrollbar-gutter: stable; background: var(--bg); }

/* ---------------------------------------------------------------- toolbar */

.toolbar {
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .25rem .35rem;
	border-bottom: 1px solid var(--line-soft);
}

.tb-btn {
	padding: .1rem .45rem;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 3px;
	cursor: pointer;
	font-size: .74rem;
	white-space: nowrap;
}
.tb-btn:hover { background: var(--bg-3); }
.tb-btn[aria-expanded="true"] { background: var(--pill); border-color: var(--pill); color: #fff; }

.tb-search {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .05rem .35rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
}
.tb-icon { color: var(--text-faint); font-size: .8rem; transform: rotate(-45deg); }
.tb-search input {
	flex: 1;
	min-width: 0;
	padding: .08rem 0;
	background: none;
	border: 0;
	outline: none;
	font-size: .76rem;
}
.tb-count { font-size: .68rem; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- source pills */

.sources {
	display: flex;
	flex-wrap: wrap;
	gap: .18rem;
	padding: .25rem .35rem;
	border-bottom: 1px solid var(--line-soft);
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .05rem .38rem .05rem .26rem;
	background: var(--pill);
	border: 1px solid transparent;
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
	font-size: .68rem;
	line-height: 1.45;
	white-space: nowrap;
}
.pill::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 2px;
	background: var(--pill-color, #fff);
}
.pill[aria-pressed="false"] { background: var(--pill-off); }
.pill[aria-pressed="false"]::before { background: transparent; }
.pill:hover { border-color: rgba(255, 255, 255, .45); }

/* ---------------------------------------------------------------- filter panel */

.filters {
	padding: .45rem .5rem;
	background: var(--bg-2);
	border-bottom: 1px solid var(--line-soft);
	font-size: .75rem;
}
.f-row { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.f-row:last-child { margin-bottom: 0; }
.f-label {
	width: 3.1rem;
	flex: none;
	font-size: .64rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.filters select {
	padding: .1rem .25rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: .75rem;
}
.chip {
	padding: .1rem .42rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 9px;
	cursor: pointer;
	font-size: .7rem;
	color: var(--text-soft);
	white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--pill); border-color: var(--pill); color: #fff; }

/* ---------------------------------------------------------------- table */

/* One scroll box holds both the header and the rows: a scrollbar on the list
   alone would narrow its tracks and pull every value left of its heading. */
.table {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.thead, .rows li a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4.9rem 5.8rem;
	align-items: center;
	padding-left: .35rem;
	padding-right: .35rem;
}

.thead {
	position: sticky;
	top: 0;
	z-index: 1;
	padding-top: .12rem;
	padding-bottom: .12rem;
	border-bottom: 1px solid var(--line);
	background: var(--bg-2);
}
.th {
	padding: 0 .25rem;
	background: none;
	border: 0;
	border-left: 1px solid var(--line-soft);
	cursor: pointer;
	font-size: .7rem;
	font-weight: 600;
	text-align: center;
	color: var(--text-soft);
}
.th:first-child { border-left: 0; }
.th-name { text-align: left; }
.th:hover { color: var(--text); }
.th i { display: inline-block; width: .8em; font-style: normal; opacity: .8; }

.rows {
	margin: 0;
	padding: 0 0 1.5rem;
	list-style: none;
}
.rows li a {
	padding-top: 1px;
	padding-bottom: 1px;
	border-bottom: 1px solid var(--line-soft);
	text-decoration: none;
	color: inherit;
	font-size: .7rem;
	line-height: 14px;
}
.rows li:nth-child(even) a { background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.rows li a:hover { background: var(--bg-3); }
.rows li a[aria-current="true"] {
	background: var(--sel);
	box-shadow: inset 2px 0 0 var(--sel-line);
}

.c-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-type, .c-cr, .c-source { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-type { color: var(--text-soft); }
.c-cr { font-variant-numeric: tabular-nums; }
/* an item's kind is a word, not a phrase, and Legendary needs the room a CR does not */
.table[data-view="items"] .thead, .table[data-view="items"] .rows li a {
	grid-template-columns: minmax(0, 1fr) 7rem 6.3rem 5.8rem;
}
/* the research and the places have nothing that stands where a rating does */
.table[data-view="research"] .thead, .table[data-view="research"] .rows li a,
.table[data-view="locations"] .thead, .table[data-view="locations"] .rows li a {
	grid-template-columns: minmax(0, 1fr) 9rem 5.8rem;
}
.table[data-view="research"] .th-cr, .table[data-view="research"] .c-cr,
.table[data-view="locations"] .th-cr, .table[data-view="locations"] .c-cr { display: none; }
.c-source { font-weight: 600; color: var(--src-color, var(--text-soft)); }

.empty { padding: 2rem 1rem; text-align: center; color: var(--text-faint); }

/* ---------------------------------------------------------------- detail */

/* the entry fills what the panel has left once the ad slots have their share:
   a min-height of 100% would make it the panel's whole height on top of them,
   and leave a gap under the stat block as tall as the ads */
.detail { flex: 1 0 auto; }

/* The height is reserved from the ratio, so the banner holds its place before the
   file has loaded and the block below it does not jump. */
.art {
	position: relative;
	/* a flex item with only an aspect ratio to size it gets shrunk away */
	flex: none;
	/* and once its height is capped, the ratio would narrow it to match: the
	   banner keeps the panel's width, and the picture is cropped to fit */
	width: 100%;
	/* one height for every banner, plate or model alike: a strip over the block
	   that the picture is scaled to fill and cropped to */
	aspect-ratio: 1170 / 634;
	max-height: 12rem;
	overflow: hidden;
	background: #000;
}
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-anim { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }

/* on a desktop the banner is a preview: a click opens it large -- a model to be
   turned by hand, a plate to be seen whole. A phone keeps a model's small frame
   turnable instead, so no banner is a button there */
.art-open { display: none; }
@media (min-width: 60.01rem) and (hover: hover) {
	.art-open {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		background: none;
		cursor: zoom-in;
	}
	.art-open::after {
		content: "\2922";
		position: absolute;
		right: .45rem;
		bottom: .35rem;
		padding: .05rem .4rem .15rem;
		border-radius: 3px;
		background: rgba(0, 0, 0, .5);
		color: #fff;
		font-size: .95rem;
		line-height: 1.2;
		opacity: 0;
		transition: opacity .15s;
	}
	.art-open:hover::after, .art-open:focus-visible::after { opacity: 1; }
}


.tabs {
	display: flex;
	flex: none;
	gap: .1rem;
	padding: .25rem .4rem 0;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}
.tab {
	padding: .1rem .5rem;
	background: var(--bg-3);
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	cursor: pointer;
	font-size: .78rem;
	color: var(--text-soft);
	position: relative;
	top: 1px;
}
.tab[aria-selected="true"] {
	background: var(--parchment);
	color: var(--sb-head);
	font-weight: 600;
}

/* no padding here: each tab's content runs to the edge of the pane and sets its own inset */
.tab-body { padding: 0; }

/* -- Lore tab */

.lore { padding: .7rem .9rem 2rem; font: 13.5px/1.6 var(--serif); }
.lore .hook {
	margin: 0 0 1.2em;
	padding-left: .8rem;
	border-left: 3px solid var(--sb-rule);
	font-style: italic;
	color: var(--text-soft);
}
.lore p { margin: 0 0 1em; text-align: justify; hyphens: auto; }
/* an item of a list the book sets inside its prose */
.lore p.lore-item { margin: 0 0 .5em 1.1rem; padding-left: 1.1rem; text-indent: -1.1rem; text-align: left; }
.lore p.drop::first-letter {
	float: left;
	margin: .08em .09em 0 0;
	font: 400 3.1em/.78 var(--display);
	color: var(--sb-head);
}
/* the research is read like an article, not looked up like an entry */
.lore--story { max-width: 40rem; margin-inline: auto; }
.story-title {
	margin: .2rem 0 1.2rem;
	font: 400 1.5rem/1.2 var(--display);
	color: var(--sb-head);
	text-align: center;
}
.story-part {
	margin: 2rem 0 .8rem;
	padding-bottom: .25rem;
	border-bottom: 1px solid var(--line);
	font: 400 1.05rem/1.2 var(--display);
	color: var(--sb-head);
}

/* the works the story was written from, set apart from the telling */
.story-refs { margin-top: 2.4rem; }
.story-refs__group {
	margin: 1.2rem 0 .4rem;
	font: 600 .78rem/1.4 var(--ui);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-soft);
}
.story-refs ul { margin: 0; padding-left: 1.1rem; }
.story-refs li { margin: 0 0 .4em; font-size: .93em; text-align: left; }
.story-refs li::marker { color: var(--sb-head); }
.story-refs__by {
	margin: 1.6rem 0 0;
	font: italic .9rem/1.5 var(--serif);
	color: var(--text-soft);
	text-align: center;
}

.read-on {
	margin: 1.8rem 0 0;
	padding: .9rem 1.1rem;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--sb-rule);
	border-radius: 3px;
	text-align: center;
}
.read-on p {
	margin: 0 0 .5rem;
	font: .82rem/1.4 var(--ui);
	letter-spacing: .02em;
	color: var(--text-soft);
	text-align: center;
}
.book-link {
	display: inline-block;
	padding: .3rem .8rem;
	background: var(--sb-rule);
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	font: 600 .84rem/1.4 var(--ui);
}
a.book-link:hover { filter: brightness(1.12); }
span.book-link { background: none; color: var(--sb-head); font-weight: 600; padding: 0; }

/* -- Token tab */

.shots { display: flex; flex-wrap: wrap; gap: 1.2rem; padding: 1.1rem .9rem 2rem; }
.shot { position: relative; flex: none; margin: 0; }
.shot img {
	display: block;
	max-width: 100%;
	cursor: zoom-in;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg-3);
}
/* the files are 500px square, so 260 stays crisp on a 2x screen */
.shot--token img { width: 260px; height: 260px; border: 0; background: none; }

.shot__save {
	position: absolute;
	right: .3rem;
	bottom: .3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--text-soft);
	/* visible at rest: a hover-only control is missed, and touch has no hover */
	opacity: .6;
	transition: opacity .12s;
}
.shot:hover .shot__save,
.shot__save:focus-visible { opacity: 1; }
.shot__save:hover { border-color: var(--sel-line); color: var(--roll); }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(0, 0, 0, .82);
	cursor: zoom-out;
}
.lightbox img {
	max-width: min(90vw, 700px);
	max-height: 90vh;
	image-rendering: auto;
}

/* a model opened large: the backdrop closes it, the frame is the model's own */
.modelbox {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(0, 0, 0, .82);
	cursor: zoom-out;
}
.modelbox-frame {
	position: relative;
	width: min(92vw, calc(86vh * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .6);
	cursor: auto;
}
.modelbox-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
/* a plate is shown at its own proportions, and never past the size it was made at */
.modelbox-frame--plate { width: min(92vw, 1200px); aspect-ratio: auto; }
.modelbox-frame--plate img { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain; }
.modelbox-close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.modelbox-close:hover, .modelbox-close:focus-visible { background: rgba(0, 0, 0, .8); }

/* ---------------------------------------------------------------- book references */

.refpop {
	position: fixed;
	z-index: 50;
	max-width: 20rem;
	padding: .4rem .6rem .45rem;
	background: var(--bg);
	border: 1px solid rgba(0, 0, 0, .15);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .176);
	color: var(--text);
	font: .74rem/1.5 var(--ui);
	pointer-events: none;
}
.refpop__name {
	font-weight: 700;
	font-size: .82rem;
	color: var(--sb-head);
}
.refpop__note { font-style: italic; color: var(--text-faint); }
.refpop__page { font-variant-numeric: tabular-nums; }
.refpop__page + .refpop__page { color: var(--text-soft); }

/* ---------------------------------------------------------------- roll box */

/* the class sets display, so [hidden] needs to win explicitly */
.rollbox[hidden] { display: none; }

.rollbox {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 40;
	width: 20rem;
	max-width: calc(100vw - 2rem);
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid rgba(0, 0, 0, .15);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .176);
	font-size: .76rem;
}

.rollbox__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .25rem .3rem .25rem .55rem;
	background: var(--nav);
	color: var(--nav-text);
	font-weight: 600;
	letter-spacing: .04em;
}
.rollbox__close {
	padding: 0 .35rem;
	background: none;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	color: inherit;
	font-size: 1rem;
	line-height: 1.2;
}
.rollbox__close:hover { background: rgba(255, 255, 255, .16); }

.rollbox__log {
	max-height: 14rem;
	min-height: 4rem;
	overflow-y: auto;
	padding: .4rem .55rem;
	font-variant-numeric: tabular-nums;
}
.rollbox__source {
	margin: .5rem 0 .15rem;
	font-size: .68rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.rollbox__source:first-child { margin-top: 0; }
.rollbox__line { padding: .1rem 0; border-top: 1px solid var(--line-soft); }
.rollbox__line b { font-size: 1.05em; }
.rollbox__detail { color: var(--text-faint); font-size: .92em; }
.rollbox__detail s { opacity: .5; }

.rollbox__form { padding: .35rem; border-top: 1px solid var(--line); }
.rollbox__form input {
	width: 100%;
	padding: .2rem .4rem;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: .76rem;
}
.rollbox__form input:focus { outline: 2px solid var(--sel-line); outline-offset: -1px; }

@media print { .rollbox { display: none !important; } }

/* ---------------------------------------------------------------- welcome */

/* the entry as the page carries it in plain text (tools/pages.mjs), for the
   moment before the viewer draws it in full -- and for whatever reads the page
   without running it */
.static-entry { padding: .7rem .9rem 2rem; font: 13.5px/1.6 var(--serif); }
.static-entry h1 { margin: 0 0 .2rem; font: 400 1.5rem/1.2 var(--display); color: var(--sb-head); }
.static-entry h2 { margin: 1.1rem 0 .3rem; font: 400 1.1rem/1.2 var(--display); color: var(--sb-head); }
.static-entry p { margin: 0 0 .5em; }

.welcome { max-width: 26rem; margin: 15vh auto; padding: 0 1rem; text-align: center; }
.welcome h1 { margin: 0 0 .4rem; font: 400 1.5rem/1.2 var(--display); color: var(--sb-head); }
.welcome p { color: var(--text-soft); }
.welcome kbd {
	padding: .05rem .3rem;
	background: var(--bg-3);
	border: 1px solid var(--line);
	border-radius: 3px;
	font: 500 .78rem var(--ui);
}

/* ---------------------------------------------------------------- footer */

/* About, Contact and the privacy policy, at the foot of every page -- the reading
   panel's foot on a computer, the page's on a phone */
.site-foot {
	flex: none;
	padding: .8rem .9rem 1rem;
	border-top: 1px solid var(--line-soft);
	color: var(--text-faint);
	font-size: .75rem;
}
.site-foot__links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.site-foot a, .site-foot__consent { color: var(--text-soft); text-decoration: none; }
.site-foot a:hover, .site-foot__consent:hover { color: var(--text); text-decoration: underline; }
.site-foot__consent { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.site-foot__copy { margin: .45rem 0 0; }
@media print { .site-foot { display: none; } }

/* the site's own pages -- About, Contact, Privacy Policy -- read as prose */
.static-entry[data-page] { max-width: 42rem; }
.static-entry ul { margin: 0 0 .6em; padding-left: 1.2rem; }
.static-entry li { margin: .15em 0; }

/* ---------------------------------------------------------------- advertising */

/* An AdSense banner (js/ads.js). The slot is filled once when the page loads and
   is never redrawn, so it sits outside the panels app.js rebuilds. Space and a
   rule keep it apart from the tabs and the list, which a tap must not mistake
   it for. */
.ad-slot {
	flex: none;
	padding: .55rem .6rem;
	border-bottom: 1px solid var(--line-soft);
	background: var(--bg);
}
.ad-slot--detail-bottom { margin-top: 1.2rem; border-top: 1px solid var(--line-soft); border-bottom: 0; }
/* height held for the banner before it arrives, so the page does not jump */
.ad-slot ins.adsbygoogle { min-height: 90px; }
/* above the entry on a computer: two 250 px squares side by side, together as
   wide as the panel, or one where the panel is too narrow for two */
.ad-slot--square { display: flex; justify-content: center; column-gap: 1rem; }
/* a slot Google had nothing for folds away rather than leaving a hole; of two
   banners in one slot, the one left empty goes and the other stays */
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]):not(:has(ins.adsbygoogle:not([data-ad-status="unfilled"]))) { display: none; }
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
/* The margin's slot stands to the left of the site, level with the panels and
   still while they scroll. It needs that margin to be 160 px and a gap wide -- a
   1530 px screen -- and takes 300 px banners from 1810 px. Below that, or on a
   screen too short for 600 px of banner, it is not shown at all. Under the first
   banner js/ads.js sets as much again as the screen has height for: a second
   tall one, a square, or nothing. */
.ad-slot--rail-left {
	position: fixed;
	top: calc(var(--nav-h) + 1rem);
	left: calc((100vw - var(--app-max)) / 2 - 160px - 1.25rem);
	width: 160px;
	padding: 0;
	border: 0;
	background: none;
}
/* the class would otherwise outrank [hidden] and leave an empty box in the margin */
.ad-slot--rail-left:not([hidden]) { display: flex; flex-direction: column; row-gap: 1rem; }
@media (min-width: 1810px) {
	.ad-slot--rail-left { left: calc((100vw - var(--app-max)) / 2 - 300px - 1.25rem); width: 300px; }
}
@media (max-width: 1529.98px), (max-height: 699.98px) {
	.ad-slot--rail-left { display: none !important; }
}
/* ?ads=preview: where the slots sit, before the account is set up */
.ad-preview {
	display: grid;
	place-items: center;
	min-height: 90px;
	border: 1px dashed var(--line);
	border-radius: 3px;
	background: var(--bg-2);
	color: var(--text-faint);
	font: 500 .75rem/1.3 var(--sb-body);
	text-align: center;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 60rem) {
	.app { grid-template-columns: 1fr; height: auto; }
	.pane { overflow: visible; }
	.pane-list { border-right: 0; border-bottom: 1px solid var(--line); }
	.table { max-height: 45vh; }
	.thead, .rows li a { grid-template-columns: minmax(0, 1fr) 4.9rem 5.8rem; }
	.table[data-view="items"] .thead,
	.table[data-view="items"] .rows li a { grid-template-columns: minmax(0, 1fr) 6.3rem 5.8rem; }
	/* the places and the research have no rating, and their kind goes here too:
	   left at three columns, the name was squeezed out and the book fell under "Type" */
	.table[data-view="research"] .thead, .table[data-view="research"] .rows li a,
	.table[data-view="locations"] .thead, .table[data-view="locations"] .rows li a { grid-template-columns: minmax(0, 1fr) 5.8rem; }
	.th-type, .c-type { display: none; }
}

/* ---------------------------------------------------------------- print */

@media print {
	.nav, .pane-list, .tabs, .ad-slot { display: none !important; }
	.app { display: block; height: auto; max-width: none; }
	.pane-detail { overflow: visible; background: #fff; }
	.art img { max-height: 12cm; }
	.tab-body { padding: 0; }
}