/* yui_box base layout. Square corners only: no radius, shadows or decorative gradients.
   Every colour comes from the --yb-* variables below; themes/*.css override them. */

:root {
	color-scheme: light;
	--yb-font: 'Times New Roman', Times, serif;
	--yb-font-size: 11pt;
	--yb-page-bg: var(--yb-bg);
	--yb-bg-image: none;
	--yb-page-width: none;
	/* opacity of panel/box backgrounds; image themes use 90% so the picture shows through (text stays opaque) */
	--yb-alpha: 100%;

	--yb-bg: #ffffee;
	--yb-text: #800000;
	--yb-link: #0000cc;
	--yb-link-hover: #ee0000;
	--yb-logo: var(--yb-text);
	--yb-head-bg: #eeaa88;
	--yb-head-text: var(--yb-text);
	--yb-box: #f0e0d6;
	--yb-border: #d9bfb7;
	--yb-border-strong: #be8080;
	--yb-input-bg: #ffffff;
	--yb-input-text: #000000;
	--yb-error: #ff0000;
	--yb-ok: #117743;

	/* derived; themes rarely need to touch these */
	--yb-muted: color-mix(in srgb, var(--yb-text) 65%, var(--yb-bg));
	--yb-box-alt: color-mix(in srgb, var(--yb-box) 93%, var(--yb-text));
	--yb-button-bg: color-mix(in srgb, var(--yb-box) 65%, var(--yb-input-bg));
	--yb-button-text: var(--yb-text);
	--yb-panel: color-mix(in srgb, var(--yb-bg) var(--yb-alpha), transparent);
	--yb-box-a: color-mix(in srgb, var(--yb-box) var(--yb-alpha), transparent);
	--yb-box-alt-a: color-mix(in srgb, var(--yb-box-alt) var(--yb-alpha), transparent);
	--yb-head-a: color-mix(in srgb, var(--yb-head-bg) var(--yb-alpha), transparent);
	--yb-notice-bg: color-mix(in srgb, var(--yb-ok) 15%, var(--yb-box-a));
	--yb-error-bg: color-mix(in srgb, var(--yb-error) 15%, var(--yb-box-a));
	--yb-restricted-bg: color-mix(in srgb, var(--yb-error) 22%, var(--yb-box-a));
	--yb-staff-bg: color-mix(in srgb, var(--yb-link) 12%, var(--yb-box-a));
	--yb-internal-bg: color-mix(in srgb, #c0a000 22%, var(--yb-box-a));
	/* Statistics chart lines, from each theme's own colours. */
	--yb-chart-1: var(--yb-link);
	--yb-chart-2: var(--yb-ok);
	--yb-chart-3: var(--yb-link-hover);
	--yb-chart-grid: color-mix(in srgb, var(--yb-border) 60%, transparent);
}

*, *::before, *::after,
::file-selector-button,
::-webkit-meter-bar, ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, ::-webkit-meter-even-less-good-value,
::-webkit-progress-bar, ::-webkit-progress-value,
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
	border-radius: 0 !important;
	box-shadow: none !important;
}

body {
	margin: 0;
	background-color: var(--yb-page-bg);
	background-image: var(--yb-bg-image);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: var(--yb-text);
	font-family: var(--yb-font);
	font-size: var(--yb-font-size);
}

/* the content column; full width and solid unless a theme sets a width and alpha */
.page {
	max-width: var(--yb-page-width);
	min-height: 100vh;
	margin: 0 auto;
	padding: 8px 12px;
	box-sizing: border-box;
	background: var(--yb-panel);
	/* Its own stacking context, so the mascot (z-index -1, inside it) paints over this
	   background but under every box, table and line of text. */
	position: relative;
	z-index: 0;
}

a { color: var(--yb-link); }
a:visited { color: var(--yb-link); }
a:hover { color: var(--yb-link-hover); }

hr {
	border: 0;
	border-top: 1px solid var(--yb-border);
	clear: both;
	margin: 8px 0;
}

code, .hash {
	font-family: "Courier New", Courier, monospace;
	font-size: 0.9em;
}

.hash { word-break: break-all; }

[hidden] { display: none !important; }

.sr {
	position: absolute;
	left: -9999px;
}

/* square checkboxes; native ones are slightly rounded */
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 13px;
	height: 13px;
	margin: 0 3px 0 0;
	border: 1px solid var(--yb-border-strong);
	background: var(--yb-input-bg);
	vertical-align: middle;
	position: relative;
	cursor: pointer;
}

input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 0;
	width: 4px;
	height: 8px;
	border: solid var(--yb-text);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
}

/* header & navigation */

.topnav {
	text-align: right;
	font-size: 0.9em;
}

.whoami { margin-right: 6px; }

.logo {
	text-align: center;
	margin: 4px 0 2px;
}

.logo h1 {
	font-size: 24pt;
	font-weight: bold;
	margin: 0;
}

.logo h1 a, .logo h1 a:visited {
	color: var(--yb-logo);
	text-decoration: none;
}

.subtitle {
	margin: 0;
	font-size: 0.9em;
	color: var(--yb-muted);
}

.staffnav {
	text-align: center;
}

/* Staff navigation, pinned to the top while scrolling (staff pages, and user pages for logged-in staff). */
html:has(.staffbar) { scroll-padding-top: 4em; }
.staffbar {
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 0 6px 4px;
	background: var(--yb-box);
	border-bottom: 1px solid var(--yb-border-strong);
}

.staffnav a.alert, .staffnav b.alert {
	color: var(--yb-error);
	font-weight: bold;
}

.staffnav.admin {
	font-size: 0.9em;
}

form.inline {
	display: inline;
	margin: 0;
}

.linkbutton {
	background: none;
	border: 0;
	padding: 0;
	color: var(--yb-link);
	text-decoration: underline;
	font: inherit;
	cursor: pointer;
}

.linkbutton:hover { color: var(--yb-link-hover); }

.footer {
	text-align: center;
	font-size: 0.9em;
}

.stylepicker {
	margin: 6px 0 0;
	text-align: right;
}

/* headings & boxes */

.pagetitle {
	background: var(--yb-head-a);
	color: var(--yb-head-text);
	text-align: center;
	font-size: 1.2em;
	padding: 2px;
	margin: 6px 0 10px;
}

.sectiontitle {
	border-bottom: 1px solid var(--yb-border);
	font-size: 1.1em;
	margin: 18px 0 8px;
}

.box {
	background: var(--yb-box-a);
	border: 1px solid var(--yb-border);
	padding: 6px 12px;
	margin: 10px auto;
	max-width: 640px;
}

.centered { text-align: center; }

/* Site-wide message set by administrators (Settings > Global message). */
.globalMessage {
	color: var(--yb-error);
	font-weight: bold;
	text-align: center;
	margin: 6px 0;
}

/* Files pages: uploads an approved report will remove, with when. */
.removalWarning {
	background: var(--yb-box-a);
	border: 2px solid var(--yb-error);
	padding: 6px 12px;
	margin: 10px auto;
	max-width: 640px;
}
.removalWarning ul { margin: 6px 0; padding-left: 2em; }
.removalWarning li { margin-bottom: 4px; overflow-wrap: anywhere; }
.removalWarningHead {
	color: var(--yb-error);
	font-weight: bold;
}

/* Site rules: the register page box and the admin table keep the line breaks staff typed. */
.ruleText { white-space: pre-line; }
.box.rules { text-align: left; }
.box.rules ol { margin: 6px 0; padding-left: 2em; }
.box.rules li { margin-bottom: 4px; }

/* Admin-set front page texts (intro above the picture, body under it); line breaks kept. */
.frontText { white-space: pre-line; }
.frontBody { margin-top: 8px; text-align: left; }

/* Logged-in visitors get this link on the front page instead of the login form. */
.manageUploads {
	color: var(--yb-error);
	font-weight: bold;
	text-align: center;
	margin: 10px 0;
}
.manageUploads a { color: var(--yb-error); }

/* News: the latest entries in the front page box, and all of them on /news.
   Long words and links wrap inside the box instead of widening it. */
.news {
	text-align: left;
	min-width: 0;
	overflow-wrap: anywhere;
}
.newsTitle {
	text-align: center;
	margin: 12px 0 4px;
}
.newsEntry {
	display: flow-root;
	border-top: 1px solid var(--yb-border);
	padding: 6px 0;
}
.newsEntry .avatar { float: left; margin: 2px 8px 4px 0; }
.newsHead, .newsAuthor { margin: 0 0 2px; }
.newsAuthor { font-size: 0.9em; }
.newsBody { white-space: pre-line; margin-top: 4px; }
.newsCell { overflow-wrap: anywhere; }

/* Front page picture, in the welcome box. */
.welcomeImage {
	display: block;
	margin: 10px auto 0;
	max-width: 100%;
	height: auto;
}

/* The mascot sits in the bottom-right corner of the window behind all page content, and never takes clicks. */
.mascot {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: min(309px, 25vw);
	height: auto;
	pointer-events: none;
	user-select: none;
}
.small { font-size: 0.8em; }
/* The contact form's trap field: off-screen for people, still filled in by form bots. */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.error { color: var(--yb-error); }
.ok { color: var(--yb-ok); font-weight: bold; }

/* Help page: the guide's screenshots shrink to fit; FAQ answers keep their line breaks. */
.help { max-width: 860px; margin: 8px auto; }
.guideShot { text-align: center; }
.guideShot img { max-width: 100%; height: auto; border: 1px solid var(--yb-border); }
.faq { max-width: 860px; margin: 8px auto; }
.faqEntry + .faqEntry { border-top: 1px dotted var(--yb-border); }
.faqQuestion { margin: 8px 0 4px; }
.faqAnswer { white-space: pre-line; margin: 0 0 8px; }

.announcement {
	background: var(--yb-box-a);
	border: 1px dashed var(--yb-text);
	padding: 6px 10px;
	margin: 8px auto;
	max-width: 720px;
	white-space: pre-line;
}

/* [hide] in the announcement's corner, and the one-line stub left when it is hidden. */
.announcementToggle { float: right; margin-left: 8px; font-size: 0.85em; }
.announcementShow { text-align: center; font-size: 0.85em; margin: 4px auto; }

.flash {
	text-align: center;
	font-weight: bold;
	margin: 6px auto;
	padding: 3px;
	max-width: 800px;
}

.flash.notice {
	color: var(--yb-ok);
	background: var(--yb-notice-bg);
	border: 1px solid color-mix(in srgb, var(--yb-ok) 45%, var(--yb-box));
}

.flash.error {
	color: var(--yb-error);
	background: var(--yb-error-bg);
	border: 1px solid color-mix(in srgb, var(--yb-error) 45%, var(--yb-box));
}

/* forms (futaba post form) */

table.postform {
	margin: 0 auto;
	max-width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
}

table.postform th {
	background: var(--yb-head-a);
	color: var(--yb-head-text);
	font-weight: bold;
	text-align: left;
	padding: 2px 6px;
	white-space: nowrap;
	vertical-align: top;
}

table.postform td {
	padding: 1px 2px;
	max-width: 36em;
	overflow-wrap: anywhere;
}

input, select, textarea, button {
	font-family: inherit;
	font-size: 0.9em;
}

input, select, textarea {
	max-width: 100%;
	box-sizing: border-box;
}

input[type="submit"], button:not(.linkbutton), input[type="file"]::file-selector-button {
	appearance: none;
	background: var(--yb-button-bg);
	color: var(--yb-button-text);
	border: 2px outset var(--yb-border-strong);
	padding: 1px 8px;
	cursor: pointer;
}

input[type="submit"]:active, button:not(.linkbutton):active, input[type="file"]::file-selector-button:active {
	border-style: inset;
}

input[type="submit"]:disabled {
	color: var(--yb-muted);
	cursor: default;
}

input[type="text"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
	border: 1px solid var(--yb-border-strong);
	background-color: var(--yb-input-bg);
	color: var(--yb-input-text);
	padding: 1px 2px;
}

input[type="number"] { width: 8em; }

/* flat select with a small drawn arrow (the two gradients only draw the triangle) */
select {
	appearance: none;
	padding-right: 16px;
	background-image: linear-gradient(45deg, transparent 50%, var(--yb-input-text) 50%), linear-gradient(135deg, var(--yb-input-text) 50%, transparent 50%);
	background-position: right 8px center, right 4px center;
	background-size: 4px 4px;
	background-repeat: no-repeat;
}

fieldset {
	border: 1px solid var(--yb-border);
	margin: 0 0 10px;
}

legend {
	font-weight: bold;
	color: var(--yb-text);
}

.filters {
	text-align: center;
	margin: 6px 0;
}

.filters label { margin-right: 6px; }

.toolbar {
	text-align: center;
	margin: 6px 0;
}

/* data tables: wide tables scroll inside their own box instead of widening the page */

.tableScroll {
	overflow-x: auto;
	max-width: 100%;
	margin: 0 0 8px;
}

.tableScroll > table {
	margin-bottom: 0;
}

table.list, table.info {
	margin: 0 auto 8px;
}

table.list { width: 100%; }

table.list th, table.info th {
	background: var(--yb-head-a);
	color: var(--yb-head-text);
	padding: 2px 6px;
	text-align: left;
	white-space: nowrap;
}

table.list td, table.info td {
	background: var(--yb-box-a);
	border-top: 1px solid var(--yb-border);
	padding: 2px 6px;
	vertical-align: middle;
}

table.list tr:nth-child(even) td { background: var(--yb-box-alt-a); }
table.list tr.restricted td { background: var(--yb-restricted-bg); }
table.list tr.banExpired td, table.list tr.banRevoked td { color: var(--yb-muted); }
table.list tr.unread td { font-weight: bold; }

table.info { min-width: 320px; }
table.info th { width: 1%; }

table.compact th { text-align: left; font-weight: normal; }

/* Statistics charts: inline SVG drawn by View/LineChart, two per row on wide screens. */
.charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: 12px;
	margin: 12px 0;
}
figure.chart {
	margin: 0;
	padding: 6px;
	background: var(--yb-box-a);
	border: 1px solid var(--yb-border);
	min-width: 0;
}
figure.chart figcaption { font-weight: bold; margin-bottom: 4px; }
.chartScroll { overflow-x: auto; }
.chartSvg { display: block; width: 100%; min-width: 440px; height: auto; }
.chartGrid { stroke: var(--yb-chart-grid); stroke-width: 1; }
.chartAxis { stroke: var(--yb-border-strong); stroke-width: 1; }
.chartLabel { fill: var(--yb-muted); font-size: 11px; font-family: var(--yb-font); }
.chartLine { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chartDot { stroke: none; }
.chartDot:hover { stroke: var(--yb-text); stroke-width: 2; }
.chartLine.chartS0 { stroke: var(--yb-chart-1); }
.chartLine.chartS1 { stroke: var(--yb-chart-2); }
.chartLine.chartS2 { stroke: var(--yb-chart-3); }
.chartDot.chartS0 { fill: var(--yb-chart-1); }
.chartDot.chartS1 { fill: var(--yb-chart-2); }
.chartDot.chartS2 { fill: var(--yb-chart-3); }
.chartLegend { margin: 4px 0 0; font-size: 0.9em; }
.chartKey {
	display: inline-block;
	width: 14px;
	height: 3px;
	margin: 0 4px 0 10px;
	vertical-align: middle;
}
.chartKey:first-child { margin-left: 0; }
.chartKey.chartS0 { background: var(--yb-chart-1); }
.chartKey.chartS1 { background: var(--yb-chart-2); }
.chartKey.chartS2 { background: var(--yb-chart-3); }

td.num { text-align: right; white-space: nowrap; }
td.date { white-space: nowrap; font-size: 0.9em; }
td.check { width: 1%; text-align: center; }
td.name { min-width: 12em; overflow-wrap: anywhere; }
/* Previews fit within 100px; the img width/height attributes reserve their space before loading. */
td.listThumb { width: 104px; padding: 2px; text-align: center; }
td.listThumb img { display: block; margin: 0 auto; }
td.listThumb .filetype { font-size: 9pt; padding: 8px 6px; min-width: 40px; }
td.share { white-space: nowrap; }

meter, progress {
	appearance: none;
	-webkit-appearance: none;
	width: 160px;
	height: 12px;
	vertical-align: middle;
	background: var(--yb-input-bg);
	border: 1px solid var(--yb-border-strong);
}

meter::-webkit-meter-bar { background: var(--yb-input-bg); border: 0; height: 10px; }
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value { background: var(--yb-link); }
meter::-moz-meter-bar { background: var(--yb-link); }
/* The dashboard's disk bar turns red when the disk is nearly full. */
meter.diskFull::-webkit-meter-optimum-value,
meter.diskFull::-webkit-meter-suboptimum-value,
meter.diskFull::-webkit-meter-even-less-good-value { background: var(--yb-error); }
meter.diskFull::-moz-meter-bar { background: var(--yb-error); }
progress::-webkit-progress-bar { background: var(--yb-input-bg); }
progress::-webkit-progress-value { background: var(--yb-link); }
progress::-moz-progress-bar { background: var(--yb-link); }

#upload-results { max-width: 900px; margin: 0 auto; }
.uploadList { list-style: none; margin: 0; padding: 0; }
.uploadList li { padding: 2px 4px; border-bottom: 1px dotted var(--yb-border); overflow-wrap: anywhere; }
.uploadList progress { width: 200px; max-width: 40%; margin: 0 4px; }
.backupProgress { width: 300px; max-width: 100%; margin-top: 4px; }

/* Folders: the path you're in, the current folder's controls, and folder icons in lists. */
.breadcrumbs { margin: 6px 0; font-size: 1.1em; }
.folderbar {
	margin: 6px 0;
	padding: 4px 6px;
	background: var(--yb-box-a);
	border: 1px solid var(--yb-border);
}
.folderbar form.inline { margin-right: 12px; }
.folderSharing { margin-top: 4px; }
.filetype.folderIcon { border-style: double; border-width: 3px; }

/* Files chosen for upload, before sending (built by yuibox.js). */
.uploadSelection { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.selectedFile {
	width: 150px;
	padding: 3px;
	background: var(--yb-box-a);
	border: 1px solid var(--yb-border);
	text-align: center;
	font-size: 0.9em;
}
.selectedFile .remove { display: block; text-align: left; }
.selectedFile .thumb { display: block; height: 110px; line-height: 110px; overflow: hidden; }
.selectedFile img, .selectedFile video { max-width: 140px; max-height: 110px; width: auto; height: auto; vertical-align: middle; }
.selectedFile .filetype { font-size: 11pt; padding: 12px 8px; }
.selectedFile .name { display: block; overflow-wrap: anywhere; }

.limits { margin: 0; padding-left: 1.2em; max-width: 20em; }
.hint { margin-top: 2px; }

/* Shown while files are dragged over the page. */
body.dragging .dropzone { outline: 2px dashed var(--yb-link); outline-offset: 2px; }
body.dragging::after {
	content: "Drop files to add them";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 8px;
	text-align: center;
	font-weight: bold;
	color: var(--yb-text);
	background: var(--yb-box);
	border-bottom: 2px dashed var(--yb-link);
	z-index: 10;
}

.usage {
	text-align: center;
	font-size: 0.9em;
}

/* tickets & notices */

.message {
	background: var(--yb-box-a);
	border: 1px solid var(--yb-border);
	margin: 8px auto;
	max-width: 860px;
	padding: 4px 8px;
}

.message.staff { background: var(--yb-staff-bg); }

.message.internal {
	background: var(--yb-internal-bg);
	border: 1px dashed #c0a000;
}

.messageHead {
	margin: 0 0 4px;
	font-size: 0.9em;
}

.messageBody {
	white-space: pre-wrap;
	word-break: break-word;
}

/* BBCode in staff-written texts (View\BBCode). [color=] shares the capcode colours below. */
.bbHeading { font-weight: bold; font-size: 1.125em; color: var(--yb-error); }
.bbSpoiler { background: var(--yb-text); color: var(--yb-text); }
.bbSpoiler:hover, .bbSpoiler:focus { background: transparent; color: inherit; }
.bbQuote { margin: 4px 0 4px 1em; padding: 0 0 0 8px; border-left: 3px solid var(--yb-border-strong); color: var(--yb-muted); }
.bbCode, .bbPre { margin: 4px 0; padding: 4px; background: var(--yb-box-alt-a); border: 1px solid var(--yb-border); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; font-family: monospace; text-align: left; }
.bbPre { font-family: inherit; }
.bbScroll { height: 300px; overflow: auto; resize: vertical; border: 1px solid var(--yb-border); padding: 4px; }
/* Shift_JIS art: [sw] (Kokonotsuba's sw), [aa] blocks and [kao] faces. */
.bbSw, .bbAa { margin: 4px 0; white-space: pre-wrap; text-align: left; font-family: 'MS PGothic', 'MS Gothic', Mona, 'IPAMonaPGothic', 'Submona', sans-serif; }
.bbSw { line-height: 1.16; }
.bbAa { font-size: 12pt; line-height: 1; white-space: pre; overflow: auto; }
.bbKao { font-family: 'MS PGothic', Mona, 'IPAMonaPGothic', sans-serif; }
.bbColorGrey, .bbColorRed, .bbColorMagenta, .bbColorPurple, .bbColorBlue, .bbColorSteel, .bbColorGreen, .bbColorTeal, .bbColorOrange, .bbColorGold, .bbColorPink, .bbColorBrown { color: color-mix(in srgb, var(--cc) 75%, var(--yb-text)); }
.bbSize1 { font-size: 0.625em; }
.bbSize2 { font-size: 0.8125em; }
.bbSize3 { font-size: 1em; }
.bbSize4 { font-size: 1.125em; }
.bbSize5 { font-size: 1.5em; }
.bbSize6 { font-size: 2em; }
.bbSize7 { font-size: 3em; }

/* staff identity: Kokonotsuba-style capcodes and profile pictures.
   Capcode colours are blended towards the theme's text colour so they stay readable on dark themes. */

.capcode { color: color-mix(in srgb, var(--cc) 75%, var(--yb-text)); font-weight: bold; }
.capcodeGrey, .bbColorGrey { --cc: #808080; }
.capcodeRed, .bbColorRed { --cc: #ff101a; }
.capcodeMagenta, .bbColorMagenta { --cc: #ff00ff; }
.capcodePurple, .bbColorPurple { --cc: #770099; }
.capcodeBlue, .bbColorBlue { --cc: #0000ff; }
.capcodeSteel, .bbColorSteel { --cc: #3366cc; }
.capcodeGreen, .bbColorGreen { --cc: #117743; }
.capcodeTeal, .bbColorTeal { --cc: #008080; }
.capcodeOrange, .bbColorOrange { --cc: #e07000; }
.capcodeGold, .bbColorGold { --cc: #b8860b; }
.capcodePink, .bbColorPink { --cc: #ff69b4; }
.capcodeBrown, .bbColorBrown { --cc: #8b4513; }

.avatar {
	border: 1px solid var(--yb-border-strong);
	vertical-align: middle;
}

.message { display: flow-root; }
.message .avatar { float: left; margin: 0 8px 4px 0; }
.avatarSmall { width: 20px; height: 20px; }
.avatarLarge { width: 128px; height: 128px; }

/* gallery / catalog */

.gallery {
	text-align: center;
	margin: 4px 0;
}

.tile {
	display: inline-block;
	vertical-align: top;
	width: 170px;
	margin: 4px;
	padding: 4px;
	background: var(--yb-box-a);
	border: 1px solid var(--yb-border);
	text-align: center;
	font-size: 0.8em;
}

.tile .thumb {
	display: block;
	height: 150px;
	line-height: 150px;
	overflow: hidden;
}

.tile img {
	max-width: 160px;
	max-height: 150px;
	vertical-align: middle;
	border: 0;
}

.filetype {
	display: inline-block;
	line-height: normal;
	vertical-align: middle;
	border: 2px solid var(--yb-text);
	background: var(--yb-panel);
	color: var(--yb-text);
	font-weight: bold;
	font-size: 12pt;
	padding: 18px 10px;
	min-width: 60px;
}

.tilename, .tilemeta {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tilename { font-weight: bold; margin-top: 3px; }

/* staff panels */

.panels {
	text-align: center;
}

.panel {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	width: 300px;
	margin: 4px;
	background: var(--yb-box-a);
}

.panel.wide { width: 460px; }
.panel p { margin: 4px 0; }
.panel.danger legend { color: var(--yb-error); }

.preview {
	text-align: center;
	margin: 8px 0;
}

.preview img, .preview video {
	max-width: 100%;
	max-height: 480px;
	/* The width/height attributes give the shape while loading; the size comes from the limits above. */
	width: auto;
	height: auto;
	border: 1px solid var(--yb-border);
}

.preview audio { width: 400px; max-width: 100%; }

.checklist { list-style: none; padding: 0; }

.settingsGroup { max-width: 900px; margin: 0 auto 12px; }

.typegroups { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.typegroup ul { list-style: none; margin: 2px 0 6px; padding: 0; }
.typegroup li { white-space: nowrap; }


.pager {
	text-align: center;
	margin: 8px 0;
}

@media (max-width: 640px) {
	.mascot { display: none; }
	.staffbar { position: static; }
	html:has(.staffbar) { scroll-padding-top: 0; }
	.page { padding: 4px; }
	table.postform, table.postform tbody, table.postform tr, table.postform th, table.postform td {
		display: block;
		width: auto;
		max-width: none;
	}
	table.postform th { margin-top: 4px; }
	table.postform input[type="text"], table.postform input[type="password"], table.postform textarea { width: 100%; }
	input[type="file"] { width: 100%; }
	.topnav { text-align: center; }
	.whoami { display: block; }
	table.list { font-size: 0.9em; }
	td.share input { width: 9em; }
	.tile { width: 140px; }
	.tile img { max-width: 130px; }
	.panel { width: auto; display: block; }
}