/* The mod panel's own styles, served at /mod/assets/mod.css after Bulma (bulma.min.css). Bulma draws the
   controls (buttons, inputs, tags, tables, notifications, boxes, tabs, pagination) and the light and dark themes:
   it follows the system, and data-theme="light" or "dark" on <html> overrides that. This file sizes Bulma down
   to the panel's compact look and adds what Bulma has no component for: the frame, post cards, catalog tiles,
   the dashboard, the "More" menu, the dialog and toasts. Colours come from Bulma's variables, so both themes
   follow. */

/* ---------------------------------------------------------------- Bulma, compact */

:root {
	--bulma-body-size: 13px;
	--bulma-family-primary: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bulma-family-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	--bulma-size-small: .85rem;
	--bulma-control-height: 2.15em;
	--bulma-control-padding-horizontal: .7em;
	--bulma-radius: 6px;
	--bulma-radius-small: 4px;
	--bulma-block-spacing: .75rem;
	--side-w: 210px;
	--top-h: 42px;
	/* Post colours (the site's): light, then dark below. */
	--subject: #0f5a46;
	--name: #2c6e2f;
	--trip: #6b5a14;
	--quote: #5f8f2e;
}
:root[data-theme="dark"] { --subject: #6fcfb0; --name: #8fcf73; --trip: #d6c27a; --quote: #8fbf5e; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --subject: #6fcfb0; --name: #8fcf73; --trip: #d6c27a; --quote: #8fbf5e; }
}

html, body { background-color: var(--bulma-background); }
.box { --bulma-box-padding: .9rem; --bulma-box-radius: var(--bulma-radius); margin-bottom: .9rem; }
.box:not(:last-child) { margin-bottom: .9rem; }
.notification { --bulma-notification-padding: .6rem .9rem; margin-bottom: .9rem; }
.table { --bulma-table-cell-padding: .35em .6em; background: transparent; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bulma-text-weak); }
.table-container:not(:last-child) { margin-bottom: 0; }
.field:not(:last-child) { margin-bottom: 0; }
.field .label { font-size: .9rem; font-weight: 600; margin-bottom: .25em; }
/* Buttons as tall as inputs and selects (Bulma sizes them by padding instead), so a row of them lines up. */
.button:not(.is-small) { height: var(--bulma-control-height); padding-top: 0; padding-bottom: 0; }
/* Bulma's vertical padding is for its taller default controls; at the panel's height it pushes a select's text
   down. Without it the browser centres the text. */
.select select { padding-top: 0; padding-bottom: 0; }
.buttons { gap: .3rem; margin-bottom: 0; }
.buttons .button { margin-bottom: 0; }
.tag { vertical-align: middle; }
.tabs:not(:last-child), .pagination:not(:last-child) { margin-bottom: 0; }
.pagination { margin: .9rem 0; justify-content: flex-start; }
.checkbox, .radio { display: inline-flex; align-items: center; gap: .4em; }
.radio + .radio { margin-left: 0; }
.box h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: .6rem; }

/* is-light, theme-aware: Bulma's is-light stays light in the dark theme; these take its soft shades, which follow
   the theme. (Bulma's own is-soft exists for buttons only.) */
.button.is-link.is-light,
.button.is-info.is-light,
.button.is-success.is-light,
.button.is-warning.is-light,
.button.is-danger.is-light { --bulma-button-background-l: var(--bulma-soft-l); --bulma-button-color-l: var(--bulma-soft-invert-l); }
.tag.is-link.is-light,
.tag.is-info.is-light,
.tag.is-success.is-light,
.tag.is-warning.is-light,
.tag.is-danger.is-light { --bulma-tag-background-l: var(--bulma-soft-l); --bulma-tag-color-l: var(--bulma-soft-invert-l); }
.notification.is-link.is-light,
.notification.is-info.is-light,
.notification.is-success.is-light,
.notification.is-warning.is-light,
.notification.is-danger.is-light { --bulma-notification-background-l: var(--bulma-soft-l); --bulma-notification-color-l: var(--bulma-soft-invert-l); }
/* The current entry: the link colour's soft shade, with the soft text shade the light tags use (the palettes make
   that read at AA on every accent's soft shade). */
.side .menu-list a.is-active { background-color: var(--bulma-link-soft); color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-soft-invert-l)); font-weight: 600; }

/* ---------------------------------------------------------------- colour palettes

   Colours only. A palette sets Bulma's colour variables (the surfaces, borders and text, and the link, info,
   success, warning and danger colours) and the post colours below. The theme menu puts it on <html> as
   data-palette, with data-theme for Bulma's light or dark base underneath. From each palette's published colours,
   by the workspace's mod-palettes.py: the text on each accent is near-black or white, whichever reads at WCAG AA
   (4.5:1) on the button at rest, hovered and pressed; a mid-tone neither reads on has its fill moved a few
   points (text in the accent keeps the palette's shade). */

:root[data-palette="dracula"] { /* Dracula */
	--bulma-scheme-h: 231; --bulma-scheme-s: 15%;
	--bulma-scheme-main-l: 18%; --bulma-scheme-main-bis-l: 20%; --bulma-scheme-main-ter-l: 22%;
	--bulma-background-l: 15%; --bulma-border-weak-l: 24%; --bulma-border-l: 31%;
	--bulma-text-h: 60; --bulma-text-s: 30%; --bulma-text-weak-l: 51%; --bulma-text-l: 96%;
	--bulma-text-strong-l: 100%; --bulma-text-title-l: 100%;
	--bulma-soft-l: 27%; --bulma-soft-invert-l: 98%;
	--bulma-link-h: 265; --bulma-link-s: 89%; --bulma-link-l: 78%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 78%; --bulma-link-rgb: 189, 147, 249;
	--bulma-primary-h: 265; --bulma-primary-s: 89%; --bulma-primary-l: 78%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 78%; --bulma-primary-rgb: 189, 147, 249;
	--bulma-info-h: 191; --bulma-info-s: 97%; --bulma-info-l: 77%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 77%; --bulma-info-rgb: 139, 233, 253;
	--bulma-success-h: 135; --bulma-success-s: 94%; --bulma-success-l: 65%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 65%; --bulma-success-rgb: 80, 250, 123;
	--bulma-warning-h: 31; --bulma-warning-s: 100%; --bulma-warning-l: 71%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 71%; --bulma-warning-rgb: 255, 184, 108;
	--bulma-danger-h: 0; --bulma-danger-s: 100%; --bulma-danger-l: 67%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 67%; --bulma-danger-rgb: 255, 85, 85;
	--subject: #ff79c6; --name: #50fa7b; --trip: #f1fa8c; --quote: #50fa7b;
}
:root[data-palette="monokai"] { /* Monokai */
	--bulma-scheme-h: 70; --bulma-scheme-s: 8%;
	--bulma-scheme-main-l: 15%; --bulma-scheme-main-bis-l: 17%; --bulma-scheme-main-ter-l: 19%;
	--bulma-background-l: 12%; --bulma-border-weak-l: 20%; --bulma-border-l: 26%;
	--bulma-text-h: 60; --bulma-text-s: 30%; --bulma-text-weak-l: 41%; --bulma-text-l: 96%;
	--bulma-text-strong-l: 100%; --bulma-text-title-l: 100%;
	--bulma-soft-l: 24%; --bulma-soft-invert-l: 90%;
	--bulma-link-h: 190; --bulma-link-s: 81%; --bulma-link-l: 67%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 67%; --bulma-link-rgb: 102, 217, 239;
	--bulma-primary-h: 190; --bulma-primary-s: 81%; --bulma-primary-l: 67%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 67%; --bulma-primary-rgb: 102, 217, 239;
	--bulma-info-h: 261; --bulma-info-s: 100%; --bulma-info-l: 75%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 75%; --bulma-info-rgb: 174, 129, 255;
	--bulma-success-h: 80; --bulma-success-s: 76%; --bulma-success-l: 53%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 53%; --bulma-success-rgb: 166, 226, 46;
	--bulma-warning-h: 32; --bulma-warning-s: 98%; --bulma-warning-l: 56%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 56%; --bulma-warning-rgb: 253, 151, 31;
	--bulma-danger-h: 338; --bulma-danger-s: 95%; --bulma-danger-l: 56%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 65%; --bulma-danger-rgb: 249, 38, 114;
	--subject: #f92672; --name: #a6e22e; --trip: #e6db74; --quote: #a6e22e;
}
:root[data-palette="zenburn"] { /* Zenburn */
	--bulma-scheme-h: 0; --bulma-scheme-s: 0%;
	--bulma-scheme-main-l: 25%; --bulma-scheme-main-bis-l: 27%; --bulma-scheme-main-ter-l: 29%;
	--bulma-background-l: 22%; --bulma-border-weak-l: 31%; --bulma-border-l: 37%;
	--bulma-text-h: 60; --bulma-text-s: 19%; --bulma-text-weak-l: 56%; --bulma-text-l: 83%;
	--bulma-text-strong-l: 97%; --bulma-text-title-l: 97%;
	--bulma-soft-l: 32%; --bulma-soft-invert-l: 98%;
	--bulma-link-h: 183; --bulma-link-s: 45%; --bulma-link-l: 69%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 69%; --bulma-link-rgb: 140, 208, 211;
	--bulma-primary-h: 183; --bulma-primary-s: 45%; --bulma-primary-l: 69%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 69%; --bulma-primary-rgb: 140, 208, 211;
	--bulma-info-h: 182; --bulma-info-s: 59%; --bulma-info-l: 73%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 73%; --bulma-info-rgb: 147, 224, 227;
	--bulma-success-h: 120; --bulma-success-s: 14%; --bulma-success-l: 56%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 66%; --bulma-success-rgb: 127, 159, 127;
	--bulma-warning-h: 44; --bulma-warning-s: 68%; --bulma-warning-l: 81%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 81%; --bulma-warning-rgb: 240, 223, 175;
	--bulma-danger-h: 0; --bulma-danger-s: 36%; --bulma-danger-l: 69%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 73%; --bulma-danger-rgb: 204, 147, 147;
	--subject: #f0dfaf; --name: #7f9f7f; --trip: #dfaf8f; --quote: #7f9f7f;
}
:root[data-palette="nord"] { /* Nord */
	--bulma-scheme-h: 222; --bulma-scheme-s: 16%;
	--bulma-scheme-main-l: 28%; --bulma-scheme-main-bis-l: 30%; --bulma-scheme-main-ter-l: 32%;
	--bulma-background-l: 22%; --bulma-border-weak-l: 32%; --bulma-border-l: 36%;
	--bulma-text-h: 219; --bulma-text-s: 28%; --bulma-text-weak-l: 56%; --bulma-text-l: 88%;
	--bulma-text-strong-l: 94%; --bulma-text-title-l: 94%;
	--bulma-soft-l: 34%; --bulma-soft-invert-l: 98%;
	--bulma-link-h: 193; --bulma-link-s: 43%; --bulma-link-l: 67%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 67%; --bulma-link-rgb: 136, 192, 208;
	--bulma-primary-h: 193; --bulma-primary-s: 43%; --bulma-primary-l: 67%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 67%; --bulma-primary-rgb: 136, 192, 208;
	--bulma-info-h: 210; --bulma-info-s: 34%; --bulma-info-l: 63%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 71%; --bulma-info-rgb: 129, 161, 193;
	--bulma-success-h: 92; --bulma-success-s: 28%; --bulma-success-l: 65%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 65%; --bulma-success-rgb: 163, 190, 140;
	--bulma-warning-h: 40; --bulma-warning-s: 71%; --bulma-warning-l: 73%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 73%; --bulma-warning-rgb: 235, 203, 139;
	--bulma-danger-h: 354; --bulma-danger-s: 42%; --bulma-danger-l: 57%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 75%; --bulma-danger-rgb: 191, 97, 106;
	--subject: #b48ead; --name: #a3be8c; --trip: #ebcb8b; --quote: #a3be8c;
}
:root[data-palette="gruvbox-dark"] { /* Gruvbox Dark */
	--bulma-scheme-h: 0; --bulma-scheme-s: 0%;
	--bulma-scheme-main-l: 16%; --bulma-scheme-main-bis-l: 18%; --bulma-scheme-main-ter-l: 20%;
	--bulma-background-l: 12%; --bulma-border-weak-l: 22%; --bulma-border-l: 29%;
	--bulma-text-h: 43; --bulma-text-s: 59%; --bulma-text-weak-l: 51%; --bulma-text-l: 81%;
	--bulma-text-strong-l: 88%; --bulma-text-title-l: 88%;
	--bulma-soft-l: 25%; --bulma-soft-invert-l: 90%;
	--bulma-link-h: 157; --bulma-link-s: 16%; --bulma-link-l: 58%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 58%; --bulma-link-rgb: 131, 165, 152;
	--bulma-primary-h: 157; --bulma-primary-s: 16%; --bulma-primary-l: 58%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 58%; --bulma-primary-rgb: 131, 165, 152;
	--bulma-info-h: 104; --bulma-info-s: 35%; --bulma-info-l: 62%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 62%; --bulma-info-rgb: 142, 192, 124;
	--bulma-success-h: 61; --bulma-success-s: 66%; --bulma-success-l: 44%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 44%; --bulma-success-rgb: 184, 187, 38;
	--bulma-warning-h: 42; --bulma-warning-s: 95%; --bulma-warning-l: 58%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 58%; --bulma-warning-rgb: 250, 189, 47;
	--bulma-danger-h: 6; --bulma-danger-s: 96%; --bulma-danger-l: 59%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 64%; --bulma-danger-rgb: 251, 73, 52;
	--subject: #d3869b; --name: #b8bb26; --trip: #fabd2f; --quote: #b8bb26;
}
:root[data-palette="solarized-dark"] { /* Solarized Dark */
	--bulma-scheme-h: 192; --bulma-scheme-s: 81%;
	--bulma-scheme-main-l: 14%; --bulma-scheme-main-bis-l: 16%; --bulma-scheme-main-ter-l: 18%;
	--bulma-background-l: 11%; --bulma-border-weak-l: 27%; --bulma-border-l: 40%;
	--bulma-text-h: 180; --bulma-text-s: 7%; --bulma-text-weak-l: 45%; --bulma-text-l: 60%;
	--bulma-text-strong-l: 88%; --bulma-text-title-l: 88%;
	--bulma-soft-l: 23%; --bulma-soft-invert-l: 90%;
	--bulma-link-h: 205; --bulma-link-s: 69%; --bulma-link-l: 49%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 58%; --bulma-link-rgb: 38, 139, 210;
	--bulma-primary-h: 205; --bulma-primary-s: 69%; --bulma-primary-l: 49%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 58%; --bulma-primary-rgb: 38, 139, 210;
	--bulma-info-h: 175; --bulma-info-s: 59%; --bulma-info-l: 40%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 42%; --bulma-info-rgb: 42, 161, 152;
	--bulma-success-h: 68; --bulma-success-s: 100%; --bulma-success-l: 30%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 32%; --bulma-success-rgb: 133, 153, 0;
	--bulma-warning-h: 45; --bulma-warning-s: 100%; --bulma-warning-l: 35%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 38%; --bulma-warning-rgb: 181, 137, 0;
	--bulma-danger-h: 1; --bulma-danger-s: 71%; --bulma-danger-l: 57%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 69%; --bulma-danger-rgb: 220, 50, 47;
	--subject: #cb4b16; --name: #859900; --trip: #b58900; --quote: #859900;
}
:root[data-palette="solarized-light"] { /* Solarized Light */
	--bulma-scheme-h: 44; --bulma-scheme-s: 87%;
	--bulma-scheme-main-l: 94%; --bulma-scheme-main-bis-l: 93%; --bulma-scheme-main-ter-l: 92%;
	--bulma-background-l: 88%; --bulma-border-weak-l: 87%; --bulma-border-l: 80%;
	--bulma-text-h: 194; --bulma-text-s: 14%; --bulma-text-weak-l: 60%; --bulma-text-l: 40%;
	--bulma-text-strong-l: 14%; --bulma-text-title-l: 14%;
	--bulma-soft-l: 90%; --bulma-soft-invert-l: 23%;
	--bulma-link-h: 205; --bulma-link-s: 69%; --bulma-link-l: 42%; --bulma-link-invert-l: 100%; --bulma-link-on-scheme-l: 41%; --bulma-link-rgb: 38, 139, 210;
	--bulma-primary-h: 205; --bulma-primary-s: 69%; --bulma-primary-l: 42%; --bulma-primary-invert-l: 100%; --bulma-primary-on-scheme-l: 41%; --bulma-primary-rgb: 38, 139, 210;
	--bulma-info-h: 175; --bulma-info-s: 59%; --bulma-info-l: 47%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 30%; --bulma-info-rgb: 42, 161, 152;
	--bulma-success-h: 68; --bulma-success-s: 100%; --bulma-success-l: 24%; --bulma-success-invert-l: 100%; --bulma-success-on-scheme-l: 23%; --bulma-success-rgb: 133, 153, 0;
	--bulma-warning-h: 45; --bulma-warning-s: 100%; --bulma-warning-l: 29%; --bulma-warning-invert-l: 100%; --bulma-warning-on-scheme-l: 27%; --bulma-warning-rgb: 181, 137, 0;
	--bulma-danger-h: 1; --bulma-danger-s: 71%; --bulma-danger-l: 52%; --bulma-danger-invert-l: 100%; --bulma-danger-on-scheme-l: 49%; --bulma-danger-rgb: 220, 50, 47;
	--subject: #cb4b16; --name: #859900; --trip: #b58900; --quote: #859900;
}
:root[data-palette="catppuccin-mocha"] { /* Catppuccin Mocha */
	--bulma-scheme-h: 240; --bulma-scheme-s: 21%;
	--bulma-scheme-main-l: 15%; --bulma-scheme-main-bis-l: 17%; --bulma-scheme-main-ter-l: 19%;
	--bulma-background-l: 12%; --bulma-border-weak-l: 23%; --bulma-border-l: 31%;
	--bulma-text-h: 226; --bulma-text-s: 64%; --bulma-text-weak-l: 55%; --bulma-text-l: 88%;
	--bulma-text-strong-l: 100%; --bulma-text-title-l: 100%;
	--bulma-soft-l: 24%; --bulma-soft-invert-l: 90%;
	--bulma-link-h: 217; --bulma-link-s: 92%; --bulma-link-l: 76%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 76%; --bulma-link-rgb: 137, 180, 250;
	--bulma-primary-h: 217; --bulma-primary-s: 92%; --bulma-primary-l: 76%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 76%; --bulma-primary-rgb: 137, 180, 250;
	--bulma-info-h: 189; --bulma-info-s: 71%; --bulma-info-l: 73%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 73%; --bulma-info-rgb: 137, 220, 235;
	--bulma-success-h: 115; --bulma-success-s: 54%; --bulma-success-l: 76%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 76%; --bulma-success-rgb: 166, 227, 161;
	--bulma-warning-h: 41; --bulma-warning-s: 86%; --bulma-warning-l: 83%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 83%; --bulma-warning-rgb: 249, 226, 175;
	--bulma-danger-h: 343; --bulma-danger-s: 81%; --bulma-danger-l: 75%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 75%; --bulma-danger-rgb: 243, 139, 168;
	--subject: #cba6f7; --name: #a6e3a1; --trip: #f9e2af; --quote: #a6e3a1;
}
:root[data-palette="one-dark"] { /* One Dark */
	--bulma-scheme-h: 220; --bulma-scheme-s: 13%;
	--bulma-scheme-main-l: 18%; --bulma-scheme-main-bis-l: 20%; --bulma-scheme-main-ter-l: 22%;
	--bulma-background-l: 15%; --bulma-border-weak-l: 23%; --bulma-border-l: 28%;
	--bulma-text-h: 219; --bulma-text-s: 14%; --bulma-text-weak-l: 40%; --bulma-text-l: 71%;
	--bulma-text-strong-l: 90%; --bulma-text-title-l: 90%;
	--bulma-soft-l: 27%; --bulma-soft-invert-l: 90%;
	--bulma-link-h: 207; --bulma-link-s: 82%; --bulma-link-l: 66%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 66%; --bulma-link-rgb: 97, 175, 239;
	--bulma-primary-h: 207; --bulma-primary-s: 82%; --bulma-primary-l: 66%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 66%; --bulma-primary-rgb: 97, 175, 239;
	--bulma-info-h: 187; --bulma-info-s: 47%; --bulma-info-l: 55%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 55%; --bulma-info-rgb: 86, 182, 194;
	--bulma-success-h: 95; --bulma-success-s: 38%; --bulma-success-l: 62%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 62%; --bulma-success-rgb: 152, 195, 121;
	--bulma-warning-h: 39; --bulma-warning-s: 67%; --bulma-warning-l: 69%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 69%; --bulma-warning-rgb: 229, 192, 123;
	--bulma-danger-h: 355; --bulma-danger-s: 65%; --bulma-danger-l: 65%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 67%; --bulma-danger-rgb: 224, 108, 117;
	--subject: #c678dd; --name: #98c379; --trip: #e5c07b; --quote: #98c379;
}
:root[data-palette="lightblue"] { /* Light Blue */
	--bulma-scheme-h: 210; --bulma-scheme-s: 71%;
	--bulma-scheme-main-l: 97%; --bulma-scheme-main-bis-l: 96%; --bulma-scheme-main-ter-l: 95%;
	--bulma-background-l: 92%; --bulma-border-weak-l: 90%; --bulma-border-l: 82%;
	--bulma-text-h: 212; --bulma-text-s: 51%; --bulma-text-weak-l: 46%; --bulma-text-l: 15%;
	--bulma-text-strong-l: 7%; --bulma-text-title-l: 7%;
	--bulma-soft-l: 90%; --bulma-soft-invert-l: 25%;
	--bulma-link-h: 213; --bulma-link-s: 75%; --bulma-link-l: 40%; --bulma-link-invert-l: 100%; --bulma-link-on-scheme-l: 40%; --bulma-link-rgb: 26, 95, 180;
	--bulma-primary-h: 213; --bulma-primary-s: 75%; --bulma-primary-l: 40%; --bulma-primary-invert-l: 100%; --bulma-primary-on-scheme-l: 40%; --bulma-primary-rgb: 26, 95, 180;
	--bulma-info-h: 207; --bulma-info-s: 71%; --bulma-info-l: 42%; --bulma-info-invert-l: 100%; --bulma-info-on-scheme-l: 42%; --bulma-info-rgb: 31, 115, 183;
	--bulma-success-h: 135; --bulma-success-s: 51%; --bulma-success-l: 34%; --bulma-success-invert-l: 100%; --bulma-success-on-scheme-l: 33%; --bulma-success-rgb: 47, 143, 71;
	--bulma-warning-h: 17; --bulma-warning-s: 88%; --bulma-warning-l: 40%; --bulma-warning-invert-l: 100%; --bulma-warning-on-scheme-l: 40%; --bulma-warning-rgb: 194, 65, 12;
	--bulma-danger-h: 8; --bulma-danger-s: 66%; --bulma-danger-l: 49%; --bulma-danger-invert-l: 100%; --bulma-danger-on-scheme-l: 47%; --bulma-danger-rgb: 208, 64, 42;
	--subject: #2f6fc4; --name: #2f8f47; --trip: #c2410c; --quote: #2f8f47;
}
:root[data-palette="darkblue"] { /* Dark Blue */
	--bulma-scheme-h: 218; --bulma-scheme-s: 44%;
	--bulma-scheme-main-l: 15%; --bulma-scheme-main-bis-l: 17%; --bulma-scheme-main-ter-l: 19%;
	--bulma-background-l: 8%; --bulma-border-weak-l: 21%; --bulma-border-l: 27%;
	--bulma-text-h: 217; --bulma-text-s: 61%; --bulma-text-weak-l: 56%; --bulma-text-l: 90%;
	--bulma-text-strong-l: 100%; --bulma-text-title-l: 100%;
	--bulma-soft-l: 24%; --bulma-soft-invert-l: 90%;
	--bulma-link-h: 216; --bulma-link-s: 100%; --bulma-link-l: 75%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 75%; --bulma-link-rgb: 127, 178, 255;
	--bulma-primary-h: 216; --bulma-primary-s: 100%; --bulma-primary-l: 75%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 75%; --bulma-primary-rgb: 127, 178, 255;
	--bulma-info-h: 205; --bulma-info-s: 100%; --bulma-info-l: 78%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 78%; --bulma-info-rgb: 143, 208, 255;
	--bulma-success-h: 146; --bulma-success-s: 53%; --bulma-success-l: 63%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 63%; --bulma-success-rgb: 111, 211, 154;
	--bulma-warning-h: 31; --bulma-warning-s: 100%; --bulma-warning-l: 71%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 71%; --bulma-warning-rgb: 255, 184, 107;
	--bulma-danger-h: 0; --bulma-danger-s: 100%; --bulma-danger-l: 74%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 74%; --bulma-danger-rgb: 255, 122, 122;
	--subject: #8fd0ff; --name: #6fd39a; --trip: #ffd479; --quote: #6fd39a;
}
:root[data-palette="darkred"] { /* Dark Red */
	--bulma-scheme-h: 0; --bulma-scheme-s: 29%;
	--bulma-scheme-main-l: 11%; --bulma-scheme-main-bis-l: 13%; --bulma-scheme-main-ter-l: 15%;
	--bulma-background-l: 6%; --bulma-border-weak-l: 17%; --bulma-border-l: 23%;
	--bulma-text-h: 0; --bulma-text-s: 44%; --bulma-text-weak-l: 54%; --bulma-text-l: 89%;
	--bulma-text-strong-l: 100%; --bulma-text-title-l: 100%;
	--bulma-soft-l: 20%; --bulma-soft-invert-l: 90%;
	--bulma-link-h: 8; --bulma-link-s: 100%; --bulma-link-l: 77%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 77%; --bulma-link-rgb: 255, 154, 138;
	--bulma-primary-h: 8; --bulma-primary-s: 100%; --bulma-primary-l: 77%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 77%; --bulma-primary-rgb: 255, 154, 138;
	--bulma-info-h: 11; --bulma-info-s: 100%; --bulma-info-l: 82%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 82%; --bulma-info-rgb: 255, 179, 161;
	--bulma-success-h: 116; --bulma-success-s: 43%; --bulma-success-l: 68%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 68%; --bulma-success-rgb: 143, 208, 138;
	--bulma-warning-h: 41; --bulma-warning-s: 100%; --bulma-warning-l: 74%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 74%; --bulma-warning-rgb: 255, 212, 121;
	--bulma-danger-h: 0; --bulma-danger-s: 100%; --bulma-danger-l: 75%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 75%; --bulma-danger-rgb: 255, 128, 128;
	--subject: #ff9a8a; --name: #8fd08a; --trip: #ffd479; --quote: #9fd07f;
}
:root[data-palette="pink"] { /* Pink */
	--bulma-scheme-h: 338; --bulma-scheme-s: 100%;
	--bulma-scheme-main-l: 98%; --bulma-scheme-main-bis-l: 97%; --bulma-scheme-main-ter-l: 96%;
	--bulma-background-l: 93%; --bulma-border-weak-l: 90%; --bulma-border-l: 82%;
	--bulma-text-h: 334; --bulma-text-s: 57%; --bulma-text-weak-l: 46%; --bulma-text-l: 16%;
	--bulma-text-strong-l: 9%; --bulma-text-title-l: 9%;
	--bulma-soft-l: 90%; --bulma-soft-invert-l: 25%;
	--bulma-link-h: 336; --bulma-link-s: 78%; --bulma-link-l: 43%; --bulma-link-invert-l: 100%; --bulma-link-on-scheme-l: 43%; --bulma-link-rgb: 194, 24, 91;
	--bulma-primary-h: 336; --bulma-primary-s: 78%; --bulma-primary-l: 43%; --bulma-primary-invert-l: 100%; --bulma-primary-on-scheme-l: 43%; --bulma-primary-rgb: 194, 24, 91;
	--bulma-info-h: 287; --bulma-info-s: 65%; --bulma-info-l: 40%; --bulma-info-invert-l: 100%; --bulma-info-on-scheme-l: 40%; --bulma-info-rgb: 142, 36, 170;
	--bulma-success-h: 135; --bulma-success-s: 51%; --bulma-success-l: 34%; --bulma-success-invert-l: 100%; --bulma-success-on-scheme-l: 33%; --bulma-success-rgb: 47, 143, 71;
	--bulma-warning-h: 26; --bulma-warning-s: 90%; --bulma-warning-l: 37%; --bulma-warning-invert-l: 100%; --bulma-warning-on-scheme-l: 37%; --bulma-warning-rgb: 180, 83, 9;
	--bulma-danger-h: 8; --bulma-danger-s: 66%; --bulma-danger-l: 49%; --bulma-danger-invert-l: 100%; --bulma-danger-on-scheme-l: 47%; --bulma-danger-rgb: 208, 64, 42;
	--subject: #6a1b9a; --name: #2f8f47; --trip: #b45309; --quote: #2f8f47;
}
:root[data-palette="darkgreen"] { /* Dark Green */
	--bulma-scheme-h: 142; --bulma-scheme-s: 30%;
	--bulma-scheme-main-l: 11%; --bulma-scheme-main-bis-l: 13%; --bulma-scheme-main-ter-l: 15%;
	--bulma-background-l: 6%; --bulma-border-weak-l: 16%; --bulma-border-l: 21%;
	--bulma-text-h: 139; --bulma-text-s: 34%; --bulma-text-weak-l: 50%; --bulma-text-l: 87%;
	--bulma-text-strong-l: 100%; --bulma-text-title-l: 100%;
	--bulma-soft-l: 20%; --bulma-soft-invert-l: 90%;
	--bulma-link-h: 140; --bulma-link-s: 61%; --bulma-link-l: 69%; --bulma-link-invert-l: 8%; --bulma-link-on-scheme-l: 69%; --bulma-link-rgb: 127, 224, 160;
	--bulma-primary-h: 140; --bulma-primary-s: 61%; --bulma-primary-l: 69%; --bulma-primary-invert-l: 8%; --bulma-primary-on-scheme-l: 69%; --bulma-primary-rgb: 127, 224, 160;
	--bulma-info-h: 164; --bulma-info-s: 66%; --bulma-info-l: 73%; --bulma-info-invert-l: 8%; --bulma-info-on-scheme-l: 73%; --bulma-info-rgb: 142, 232, 208;
	--bulma-success-h: 140; --bulma-success-s: 45%; --bulma-success-l: 50%; --bulma-success-invert-l: 8%; --bulma-success-on-scheme-l: 50%; --bulma-success-rgb: 69, 184, 108;
	--bulma-warning-h: 41; --bulma-warning-s: 100%; --bulma-warning-l: 74%; --bulma-warning-invert-l: 8%; --bulma-warning-on-scheme-l: 74%; --bulma-warning-rgb: 255, 212, 121;
	--bulma-danger-h: 7; --bulma-danger-s: 100%; --bulma-danger-l: 74%; --bulma-danger-invert-l: 8%; --bulma-danger-on-scheme-l: 74%; --bulma-danger-rgb: 255, 138, 122;
	--subject: #8ee8d0; --name: #7fe0a0; --trip: #ffd479; --quote: #7fe0a0;
}
:root[data-palette="lightgreen"] { /* Light Green */
	--bulma-scheme-h: 129; --bulma-scheme-s: 41%;
	--bulma-scheme-main-l: 97%; --bulma-scheme-main-bis-l: 96%; --bulma-scheme-main-ter-l: 95%;
	--bulma-background-l: 90%; --bulma-border-weak-l: 88%; --bulma-border-l: 79%;
	--bulma-text-h: 139; --bulma-text-s: 45%; --bulma-text-weak-l: 41%; --bulma-text-l: 12%;
	--bulma-text-strong-l: 5%; --bulma-text-title-l: 5%;
	--bulma-soft-l: 90%; --bulma-soft-invert-l: 25%;
	--bulma-link-h: 140; --bulma-link-s: 64%; --bulma-link-l: 29%; --bulma-link-invert-l: 100%; --bulma-link-on-scheme-l: 29%; --bulma-link-rgb: 27, 122, 58;
	--bulma-primary-h: 140; --bulma-primary-s: 64%; --bulma-primary-l: 29%; --bulma-primary-invert-l: 100%; --bulma-primary-on-scheme-l: 29%; --bulma-primary-rgb: 27, 122, 58;
	--bulma-info-h: 169; --bulma-info-s: 77%; --bulma-info-l: 28%; --bulma-info-invert-l: 100%; --bulma-info-on-scheme-l: 28%; --bulma-info-rgb: 17, 128, 107;
	--bulma-success-h: 141; --bulma-success-s: 50%; --bulma-success-l: 34%; --bulma-success-invert-l: 100%; --bulma-success-on-scheme-l: 33%; --bulma-success-rgb: 46, 139, 78;
	--bulma-warning-h: 16; --bulma-warning-s: 74%; --bulma-warning-l: 40%; --bulma-warning-invert-l: 100%; --bulma-warning-on-scheme-l: 40%; --bulma-warning-rgb: 179, 67, 27;
	--bulma-danger-h: 8; --bulma-danger-s: 66%; --bulma-danger-l: 49%; --bulma-danger-invert-l: 100%; --bulma-danger-on-scheme-l: 48%; --bulma-danger-rgb: 208, 64, 42;
	--subject: #11806b; --name: #1b7a3a; --trip: #b3431b; --quote: #1b7a3a;
}
/* Bulma's dark base without a palette: text that reads on these accents when hovered and pressed too. */
:root:not([data-palette])[data-theme="dark"] { --bulma-link-invert-l: 8%; --bulma-link-l: 67%; }
@media (prefers-color-scheme: dark) { :root:not([data-palette]):not([data-theme="light"]) { --bulma-link-invert-l: 8%; --bulma-link-l: 67%; } }

/* Bulma draws neutral buttons, tags, menu entries, inputs and page links in the background's hue and saturation,
   text included. A palette with strongly tinted backgrounds (Solarized) would tint their text the same; under a
   palette, their text takes the palette's text colour instead. */
:root[data-palette] .button:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger),
:root[data-palette] .tag:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger),
:root[data-palette] .pagination-link:not(.is-current),
:root[data-palette] .side .menu-list a:not(.is-active) { color: var(--bulma-text); }
:root[data-palette] .input, :root[data-palette] .textarea, :root[data-palette] .select select { color: var(--bulma-text-strong); }
:root[data-palette] .input::placeholder, :root[data-palette] .textarea::placeholder { color: var(--bulma-text-weak); }

/* ---------------------------------------------------------------- small helpers */

.muted { color: var(--bulma-text-weak); }
.mono { font-family: var(--bulma-family-code); font-size: .92em; }
.grow { flex: 1 1 auto; }
.big { font-size: 1.15rem; }
[hidden] { display: none !important; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.list > * + * { margin-top: .6rem; }
.empty { color: var(--bulma-text-weak); font-style: italic; padding: .75rem 0; }
.section-title { font-size: 1.05rem; font-weight: 600; margin: 1rem 0 .5rem; }
.more-link { font-size: .9rem; font-weight: 400; margin-left: .4rem; }
.bare { list-style: none; margin: 0; padding: 0; }
.bare li + li { margin-top: .3rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .9rem; align-items: start; }
.cols > .box { margin-bottom: 0; }
.cols + * { margin-top: .9rem; }
.form { display: flex; flex-direction: column; gap: .75rem; }
.choices { display: flex; flex-direction: column; gap: .3rem; max-height: 240px; overflow-y: auto; padding: .15rem 0; }
[data-check-group] .checkbox { display: flex; padding: .15rem 0; }
.field .row .input { width: auto; flex: 0 1 12em; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-top: .75rem; }
.inline-form .field { margin: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: 0; }
.facts dt { color: var(--bulma-text-weak); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.table .min { width: 1%; white-space: nowrap; }
.table .links a + a { margin-left: .6rem; }
.users-table td.links { text-align: right; }
.users-new { margin-bottom: .75rem; }
.users-table tr.is-disabled td { color: var(--bulma-text-weak); }
.status-row { display: flex; align-items: center; gap: .6rem; }

/* Groups: the list reuses the inbox's rows; a group's page has its permissions in sections, in columns. */
.perm-sections { columns: 2 22rem; column-gap: 1.5rem; margin: .75rem 0 1rem; }
.perm-section { break-inside: avoid; margin: 0 0 1rem; padding: 0; border: 0; }
.perm-section legend { margin-bottom: .3rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bulma-text-weak); }
.perm-section .checkbox { display: flex; align-items: baseline; gap: .45rem; padding: .12rem 0; }
.group-members { margin: 0; padding: 0; list-style: none; columns: 3 12rem; }
.group-members li { padding: .15rem 0; }
.table tr.dim { opacity: .55; }
.table tr.unread td { font-weight: 600; }
.table .empty { text-align: center; }
.log-text a { word-break: break-all; }
.links .danger { color: var(--bulma-danger); }
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 15px;
	border: 1px solid transparent;
	border-radius: var(--bulma-radius);
	background: none;
	color: var(--bulma-text-weak);
	cursor: pointer;
}
.icon-btn:hover { background: var(--bulma-background); color: var(--bulma-text-strong); border-color: var(--bulma-border); }
.button.toggle.is-success::before { content: "\2713\00a0"; }
.theme-menu { position: relative; }
.theme-menu > summary { list-style: none; }
.theme-menu > summary::-webkit-details-marker { display: none; }
.theme-menu .more-list { min-width: 170px; max-height: calc(100vh - 4rem); overflow-y: auto; }
.more-list .button.is-selected { font-weight: 600; }
.more-list .button.is-selected::before { content: "\2713\00a0"; }
.more-list hr { margin: .2rem 0; background: var(--bulma-border-weak); height: 1px; }

/* ---------------------------------------------------------------- frame */

.shell {
	display: grid;
	grid-template-columns: var(--side-w) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: "top top" "side main";
	min-height: 100vh;
}
.top {
	grid-area: top;
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: var(--top-h);
	padding: .3rem .9rem;
	background: var(--bulma-scheme-main);
	border-bottom: 1px solid var(--bulma-border-weak);
}
.brand { font-weight: 700; color: var(--bulma-text-strong); white-space: nowrap; }
.heading { display: flex; align-items: baseline; gap: .6rem; min-width: 0; flex: 1 1 auto; }
.heading h1 { font-size: 1.3rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bulma-text-strong); }
.heading .sub { color: var(--bulma-text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-search .input { width: 220px; }
/* A page with a search form of its own (the dashboard, search results) doesn't need the top bar's too. */
body:has(#main .search-form) .top-search { display: none; }
.top-right { display: flex; align-items: center; gap: .6rem; }
/* The username opens the user menu: the mod's own account page (their password) and Log out. On a phone it's a
   person icon. */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.who { display: inline-flex; align-items: center; gap: .3rem; max-width: 14em; color: var(--bulma-text-weak); }
.who:hover, .user-menu[open] > .who { color: var(--bulma-text-strong); }
.who-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-name::after { content: "\00a0\25BE"; }
.who-icon { display: none; flex: none; }
.user-menu .more-list { min-width: 140px; }
.nav-toggle { display: none; }

.side {
	grid-area: side;
	position: sticky;
	top: var(--top-h);
	align-self: start;
	/* The full height under the top bar, wherever the page is scrolled to, scrolling itself if the links overflow. */
	height: calc(100vh - var(--top-h));
	overflow-y: auto;
	padding: .75rem .6rem 1.2rem;
	border-right: 1px solid var(--bulma-border-weak);
	background: var(--bulma-scheme-main);
}
.side .menu-list a { display: flex; align-items: center; gap: .45rem; padding: .3em .6em; }
/* Within a line, so every row is the same height. On a standard screen the browser's pixel snapping centres the
   digits as they are; on a high-density one (2x and up) they sit high by the font's descender space, which 2px of
   top padding takes back. Measured on the rendered pixels: 4/4 px above/below at 1x, 7/8 at 2x, 13/17 at 4x. */
.side .menu-list .tag { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; height: 1.5em; min-width: 1.5em; padding: 0 .5em; font-size: .78rem; line-height: 1; }
@media (min-resolution: 1.5dppx) { .side .menu-list .tag { padding-top: 2px; } }
.side .menu-label { margin: 1.1rem .6rem .3rem; font-size: .8rem; }
.side .boards a { white-space: nowrap; overflow: hidden; }
.side .boards .uri { font-family: var(--bulma-family-code); font-size: .92em; min-width: 3.5em; }
.side .boards .t { color: var(--bulma-text-weak); overflow: hidden; text-overflow: ellipsis; }
.side .boards a.is-active .t { color: inherit; }
.site-link { display: block; margin: 1.1rem .6rem 0; color: var(--bulma-text-weak); }

.main { grid-area: main; padding: .9rem 1.2rem 3rem; min-width: 0; max-width: 1180px; }
.main:focus { outline: none; } /* focused after an in-place page load, for screen readers */
body.is-loading-page { cursor: progress; }
body.is-loading-page .main { opacity: .6; transition: opacity .15s .15s; }
.lone { min-height: 100vh; display: grid; place-items: center; padding: 1.2rem; }

@media (max-width: 760px) {
	.shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
	.nav-toggle { display: inline-flex; }
	.side {
		position: fixed;
		inset: var(--top-h) auto 0 0;
		width: 240px;
		height: auto;
		align-self: stretch; /* with start, a fixed box shrinks to its content despite top and bottom */
		z-index: 30;
		transform: translateX(-100%);
		transition: transform .15s ease;
		box-shadow: 0 0 20px rgba(0, 0, 0, .25);
	}
	.side.open { transform: none; }
	.top-search { display: none; }
	.who { width: 28px; height: 28px; justify-content: center; border: 1px solid transparent; border-radius: var(--bulma-radius); }
	.who:hover, .user-menu[open] > .who { background: var(--bulma-background); border-color: var(--bulma-border); }
	.who-name { display: none; }
	.who-icon { display: block; }
	.main { padding: .75rem .75rem 3rem; }
}

/* ---------------------------------------------------------------- the "More" menu */

details > summary { cursor: pointer; user-select: none; }
/* What a <details> holds inherits through the element's own internal slot, not from Bulma's border-box rule, so
   it would size inputs as content-box (100% wide plus padding and border). */
details > * { box-sizing: border-box; }
.more { position: relative; display: inline-block; }
.more > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bulma-border);
	border-radius: var(--bulma-radius);
	color: var(--bulma-text);
	background: var(--bulma-scheme-main);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "\00a0\25BE"; }
.more-list {
	position: absolute;
	right: 0;
	z-index: 15;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	margin-top: .3rem;
	padding: .3rem;
	min-width: 210px;
	background: var(--bulma-scheme-main);
	border: 1px solid var(--bulma-border);
	border-radius: var(--bulma-radius);
	box-shadow: var(--bulma-shadow);
}
.more-list .button { justify-content: flex-start; border-color: transparent; }

/* Action rows (a post's actions, its files' Delete file and Spoiler, reports, appeals, messages, plugins) and the
   "More" menu: one compact size for all of them. */
.acts .button, .file-acts .button, .more > summary, .more-list .button {
	height: 22px;
	padding: 0 .7em;
	font-size: var(--bulma-size-small);
	line-height: 1;
}

/* ---------------------------------------------------------------- dashboard */

.dash { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: .9rem; align-items: start; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.dash-main > .box, .dash-side > .box { margin-bottom: 0; }
.dash-rows li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.dash-boards td { vertical-align: middle; }
.dash-foot { margin: .6rem 0 0; }
.stat { display: flex; align-items: baseline; gap: .6rem; padding: .6rem .9rem; color: var(--bulma-text); }
.stat .num { font-size: 1.55rem; font-weight: 700; }
.stat .lbl { color: var(--bulma-text-weak); }
.stat.danger .num { color: var(--bulma-danger); }
.notice-item + .notice-item { margin-top: .45rem; }

/* Messages: the inbox is a list of conversations, one per mod; a conversation is a chat, theirs on the left and
   the mod's own on the right, with the reply box under it. */
.new-convo { display: inline-block; position: relative; margin-bottom: .75rem; }
.new-convo .more-list { left: 0; right: auto; max-height: 60vh; overflow-y: auto; }
.convos { padding: 0; overflow: hidden; }
.convos .empty { padding: 1rem; }
.convo { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; color: var(--bulma-text); }
.convo:hover { background: var(--bulma-background); color: var(--bulma-text); }
.avatar { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--bulma-link-soft); color: var(--bulma-link-text); font-weight: 600; }
.convo-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.convo-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.convo-name { font-weight: 600; color: var(--bulma-text-strong); }
.convo-top time { flex: none; font-size: .8rem; color: var(--bulma-text-weak); }
.convo-last { color: var(--bulma-text-weak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-last em { font-style: normal; }
.convo.unread .convo-last { color: var(--bulma-text-strong); font-weight: 600; }
/* The chat fills the main area under the top bar, so the reply box stays at the bottom of the screen; only the
   messages scroll. */
.main:has(> .chat) { padding-bottom: .9rem; }
.chat { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h) - 1.8rem); min-height: 18rem; margin-bottom: 0; }
.chat-back { flex: none; margin: 0 0 .9rem; font-size: .9rem; }
.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .7rem; padding-right: .25rem; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 42rem); scroll-margin-top: calc(var(--top-h) + 1rem); }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.bubble { padding: .5rem .85rem; border-radius: 1.1rem 1.1rem 1.1rem .3rem; background: var(--bulma-background); color: var(--bulma-text); overflow-wrap: anywhere; }
.msg.mine .bubble { border-radius: 1.1rem 1.1rem .3rem 1.1rem; background: var(--bulma-link); color: var(--bulma-link-invert); }
.msg.mine .bubble a, .msg.mine .bubble .quote { color: inherit; text-decoration: underline; }
.msg:target .bubble { outline: 2px solid var(--bulma-link); outline-offset: 2px; }
.msg-meta { display: flex; align-items: baseline; gap: .5rem; margin: .2rem .5rem 0; font-size: .75rem; color: var(--bulma-text-weak); }
.msg-meta form { display: inline; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--bulma-danger); }
.chat-reply { flex: none; display: flex; align-items: flex-end; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--bulma-border-weak); }
.chat-reply .textarea { flex: 1 1 auto; width: auto; min-width: 0; min-height: 2.6rem; max-height: 40vh; resize: vertical; }
.chat-reply .button { flex: none; }
.notice-item .muted { display: block; font-size: .9rem; }
@media (max-width: 900px) {
	.dash { grid-template-columns: minmax(0, 1fr); }
	.dash-side { order: -1; }
	/* Each board is two lines: its tag and title, then its links underneath, each a column of its own, wide
	   enough to tap. */
	.dash-boards tr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
	.dash-boards tr > td:not(.links) { border-bottom: 0; }
	.dash-boards td.links { grid-column: 1 / -1; display: flex; width: auto; padding-top: 0; }
	.dash-boards .links a { flex: 1 1 0; text-align: center; padding: .35rem 0; }
	.dash-boards .links a + a { margin-left: 0; }
}

/* ---------------------------------------------------------------- forms in pages */

.login { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: .75rem; }
.login h1 { font-size: 1.25rem; font-weight: 600; }
.compose { margin: 0 0 .9rem; }
.compose > summary {
	display: inline-block;
	padding: .25rem .75rem;
	border: 1px dashed var(--bulma-border);
	border-radius: var(--bulma-radius);
	color: var(--bulma-text-weak);
}
.compose[open] > summary { margin-bottom: .6rem; }
.box.compose > summary { border: 0; padding: 0; color: var(--bulma-text-strong); font-weight: 600; }
.compose-form {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	max-width: 640px;
	padding: .75rem;
	background: var(--bulma-scheme-main);
	border: 1px solid var(--bulma-border-weak);
	border-radius: var(--bulma-radius);
}
.compose-form .row .field { flex: 0 1 180px; }
.compose-form .row .field.grow { flex: 1 1 220px; }
.search-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.search-form .input[type=search] { flex: 1 1 260px; width: auto; }
.search-form .help { flex-basis: 100%; margin: 0; }
[data-ban-search] { flex: 0 1 300px; width: auto; }

/* ---------------------------------------------------------------- posts and threads */

.thread { margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--bulma-border-weak); }
.thread.full { border-bottom: 0; }
.thread-foot { margin: .3rem 0 0; font-size: .9rem; }
.replies { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: .3rem; }
.omitted { margin: .3rem 0; color: var(--bulma-text-weak); font-size: .9rem; }

.post {
	position: relative;
	max-width: 100%;
	padding: .45rem .7rem;
	background: var(--bulma-scheme-main);
	border: 1px solid var(--bulma-border-weak);
	border-radius: var(--bulma-radius);
	overflow-wrap: anywhere;
}
.post.op { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }
.list .post, .report .post, .hideable .post { padding: .45rem .7rem; }
.post:target, .post.targeted, .post.flash { box-shadow: 0 0 0 2px var(--bulma-link); }
#main [id] { scroll-margin-top: calc(var(--top-h) + .75rem); } /* clear of the sticky top bar */
.post.gone { opacity: .4; pointer-events: none; }
.post-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-size: .92rem; }
.post-head .subject { color: var(--subject); font-weight: 700; font-size: 1rem; }
.post-head .name { color: var(--name); font-weight: 600; }
.post-head .trip { color: var(--trip); font-family: var(--bulma-family-code); font-size: .85rem; }
.post-head time, .post-head .no { color: var(--bulma-text-weak); }
.post-head .ext { color: var(--bulma-text-weak); margin-left: auto; padding: 0 .15rem; }
.capcode { font-weight: 600; }
.files { display: flex; flex-wrap: wrap; gap: .6rem; margin: .45rem 0 .15rem; }
.file { margin: 0; display: flex; flex-direction: column; gap: .25rem; max-width: 200px; }
.thumb { display: block; max-width: 200px; max-height: 200px; width: auto; height: auto; border-radius: var(--bulma-radius-small); background: var(--bulma-background); }
.thumb.gone { width: 140px; height: 50px; display: grid; place-items: center; color: var(--bulma-text-weak); font-size: .85rem; border: 1px dashed var(--bulma-border); }
.file figcaption { font-size: .85rem; display: flex; flex-wrap: wrap; gap: .15rem .45rem; align-items: center; }
.file-acts { display: inline-flex; gap: .25rem; }
.embed iframe { max-width: 100%; }
.body { margin-top: .4rem; word-wrap: break-word; }
.body p { margin: 0 0 .3rem; }
.body .quote { color: var(--quote); }
.body .spoiler { background: var(--bulma-text); color: var(--bulma-text); }
.body .spoiler:hover { color: var(--bulma-scheme-main); }
.body pre, .body code { white-space: pre-wrap; }
.body .toolong { color: var(--bulma-text-weak); }
.ban-message, .body .public_ban, .body em .ban_reason { color: var(--bulma-danger); font-weight: 600; }
.ban-message { margin-top: .3rem; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .45rem; }
.post .acts { opacity: .85; }
.post:hover .acts, .post:focus-within .acts { opacity: 1; }
.quoted { padding: .45rem .7rem; margin-top: .45rem; background: var(--bulma-background); border-radius: var(--bulma-radius); }
.appeal { margin: .6rem 0; padding: .6rem .75rem; border-left: 3px solid var(--bulma-link); background: var(--bulma-background); white-space: pre-wrap; }
.message { padding: .6rem 0; }

.report { padding: .6rem; background: var(--bulma-scheme-main); border: 1px solid var(--bulma-border-weak); border-left: 3px solid var(--bulma-danger); border-radius: var(--bulma-radius); }
.report .post { border: 0; padding: 0; margin-top: .6rem; }
.report-box { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.report-reason { font-weight: 600; }
.report-box .acts { margin: 0 0 0 auto; }

.hideable { position: relative; }
.hide-btn { position: absolute; top: .3rem; right: 2rem; z-index: 2; }
.hideable.dismissed { display: none; }
.show-dismissed .hideable.dismissed { display: block; opacity: .45; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.tile { display: flex; flex-direction: column; gap: .3rem; padding: .6rem; background: var(--bulma-scheme-main); border: 1px solid var(--bulma-border-weak); border-radius: var(--bulma-radius); }
.tile-thumb { display: grid; place-items: center; min-height: 40px; }
.tile-thumb img { max-height: 150px; border-radius: var(--bulma-radius-small); }
.tile-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .85rem; color: var(--bulma-text-weak); }
.tile-text { color: var(--bulma-text); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
/* The actions menu sits in the tile's bottom right corner, however short its text. */
.tile .more { align-self: flex-end; margin-top: auto; }

.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .75rem; }
.banner { display: flex; flex-direction: column; gap: .5rem; margin: 0 !important; }
.banner-pic { display: flex; align-items: center; justify-content: center; height: 80px; overflow: hidden; border-radius: var(--bulma-radius-small); background: var(--bulma-scheme-main-ter); }
.banner-pic img { max-height: 80px; max-width: 100%; }
.banner-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; min-width: 0; }
.banner-info strong { overflow-wrap: anywhere; }
.banner > .button { align-self: flex-start; margin-top: auto; }   /* level across a row, tag or not */
.banner-add .row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Bulma's file picker shares its class name with the post cards' .file (a column, at most 200px wide): undone here. */
.banner-add .row .file { flex-direction: row; max-width: none; margin: 0; }   /* and Bulma's :not(:last-child) bottom margin */
/* The picker's two parts and the buttons beside it: one height, the small button's, text centred. */
.banner-add .row .button, .banner-add .file-cta, .banner-add .file-name {
	height: 2.3em; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; line-height: 1;
}
.banner-add .grow { flex: 1; }
.banner-add .muted { margin-top: .6rem; }
.captcha-add .row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.captcha-add .row .file { flex-direction: row; max-width: none; margin: 0; }
.captcha-add .captcha-name { width: auto; flex: 1 1 14rem; }
.captcha-add .row .button, .captcha-add .file-cta, .captcha-add .file-name, .captcha-edit .file-cta, .captcha-edit .file-name {
	height: 2.3em; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; line-height: 1;
}
.captcha-noise .row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.captcha-noise .label { margin: 0; }
.captcha-samples { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }
.captcha-samples figure { margin: 0; text-align: center; font-size: .8rem; }
.captcha-samples figcaption { color: var(--bulma-text-weak); }
.captcha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.captcha-answer { display: flex; gap: .75rem; align-items: flex-start; margin: 0 !important; }
/* On the captcha's own ground (js/captcha.js), as visitors see them. */
.captcha-pic { flex: none; width: 64px; height: 64px; padding: 4px; box-sizing: content-box; background: #3a4042; border-radius: var(--bulma-radius-small); }
.captcha-edit { display: flex; flex-direction: column; gap: .4rem; min-width: 0; flex: 1; }
.captcha-edit .file { flex-direction: row; max-width: none; margin: 0; }
.captcha-edit .file-name { max-width: 9rem; }
.captcha-edit .buttons { margin: 0; }
.captcha-edit .tag { align-self: flex-start; }
.plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.plugin { display: flex; gap: .9rem; margin: 0 !important; }
.plugin.active { box-shadow: 0 0 0 1px var(--bulma-success); }
.plugin-thumb { width: 100px; height: 75px; object-fit: cover; border-radius: var(--bulma-radius-small); border: 1px solid var(--bulma-border-weak); flex: none; }
.notice-post .post-head { margin-bottom: .3rem; }
.ban-entry + .ban-entry { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--bulma-border-weak); }
.snippet em { font-style: normal; }
.live-note { position: sticky; bottom: .75rem; margin: 0; text-align: center; }

/* ---------------------------------------------------------------- dialog and toasts */

.dialog {
	width: min(560px, calc(100vw - 24px));
	max-height: calc(100vh - 40px);
	padding: 0;
	color: var(--bulma-text);
	background: var(--bulma-scheme-main);
	border: 1px solid var(--bulma-border);
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.dialog::backdrop { background: rgba(10, 12, 16, .45); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-bottom: 1px solid var(--bulma-border-weak); }
.dialog-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.dialog-body { padding: .9rem; overflow-y: auto; max-height: calc(100vh - 100px); }
.dialog-body .box { box-shadow: none; padding: 0; margin: 0; background: none; }
.dialog-body .confirm-text { margin: 0 0 .9rem; }

.toasts { position: fixed; right: .9rem; bottom: .9rem; z-index: 50; display: flex; flex-direction: column; gap: .45rem; }
.toast {
	padding: .5rem .9rem;
	border-radius: var(--bulma-radius);
	background: var(--bulma-text-strong);
	color: var(--bulma-scheme-main);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	max-width: 360px;
	animation: toast-in .15s ease;
}
.toast.error { background: var(--bulma-danger); color: #fff; }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast, .side { animation: none; transition: none; } }

/* Plugin settings: sections, and fields switched off by the checkbox they need. */
.plugin-form .plugin-section { margin: 1.2rem 0 .6rem; padding-top: .9rem; border-top: 1px solid var(--bulma-border-weak); font-size: 1rem; }
.plugin-form .plugin-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.plugin-form .field.needs { margin-left: 1.4rem; }
.plugin-form .plugin-about { margin-bottom: .4rem; }
.plugin-form .plugin-section-help { margin: -.3rem 0 .2rem; font-size: .9rem; }
.plugin-form .field.is-off { opacity: .5; }
.webring-build p { margin: 0; }
.webring-run { margin-top: .75rem; }
.webring-log { max-height: 20rem; overflow: auto; font-size: .8rem; white-space: pre-wrap; margin-top: .5rem; }
.webring-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin: .75rem 0; }
.webring-hours { display: flex; flex-direction: column; gap: .4rem; margin: .25rem 0; }
.webring-build .section-title, .webring-form .section-title { margin-top: 0; }
.webring-form .section-title + .muted { margin-bottom: .75rem; }
.webring-exceptions { margin-top: .75rem; }
.webring-exceptions .table { margin-top: .5rem; }
.webring-ua { gap: .3rem; }
.webring-ua .input { width: 10rem; }
.banner-tabs { margin-bottom: .9rem; }
.banner-tabs ul { flex-wrap: wrap; }
.banner-tabs .tag { margin-left: .35rem; height: 1.5em; font-size: .72rem; }
.banner-include .muted { margin-top: .5rem; }
.irc-account { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.irc-account dt { font-weight: 600; }
.irc-account dd { margin: 0; word-break: break-word; }
.irc-account .tag { margin: 0 .2rem .2rem 0; }
.irc-form .label { margin: 0; }
.irc-form + .help { margin-top: .5rem; }
.irc-form .input.grow { width: auto; flex: 1 1 12em; }
.box > .section-title:first-child { margin-top: 0; }
.irc-tabs { margin-bottom: .9rem; }
.irc-status p { margin: 0 0 .5rem; }
.irc-name { width: auto; flex: 0 1 14em; }
.irc-settings .field { max-width: 32rem; }
.irc-topic { word-break: break-word; }
.tag.is-offline { background-color: color-mix(in srgb, var(--bulma-text) 12%, transparent); color: var(--bulma-text-weak); }
.sort-button { white-space: nowrap; }
.sort-button.is-sortable { cursor: pointer; }
.sort-button.is-sortable::after { content: "\2195"; margin-left: .3em; opacity: .35; }
th[aria-sort="ascending"] .sort-button::after { content: "\25B2"; opacity: .8; }
th[aria-sort="descending"] .sort-button::after { content: "\25BC"; opacity: .8; }
.sort-button:focus-visible { outline: 2px solid var(--bulma-link); outline-offset: 2px; }
th.is-movable { cursor: grab; }
th.is-dragging { opacity: .4; }
th.drop-before { box-shadow: inset 3px 0 0 var(--bulma-link); }
th.drop-after { box-shadow: inset -3px 0 0 var(--bulma-link); }
.table-reset { margin-top: -.75rem; margin-bottom: .75rem; }