/* Shared booru chrome. Theme overrides can replace these custom properties. */
:root {
  color-scheme: light dark;
  --text: #292f36;
  --muted: #606b77;
  --background: #f5f6f7;
  --paper: #ffffff;
  --surface: #e8ecf0;
  --border: #ccd3da;
  --accent: #245b86;
  --on-accent: #ffffff;
  --error: #ad2727;
  --radius: 2px;
  --sidebar-width: 210px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #d8dee5;
    --muted: #a2acb8;
    --background: #1c2025;
    --paper: #22272d;
    --surface: #2c333b;
    --border: #434c57;
    --accent: #93bde1;
    --on-accent: #16212b;
    --error: #ff9999;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--background); color: var(--text); font-size: .875rem; }
a { color: var(--accent); text-decoration: none; text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; }
h2 { margin: 18px 0 10px; font-size: .9375rem; }
p { margin: 10px 0; }
code { font-size: .95em; }
.skip-link { position: absolute; top: -60px; left: 12px; z-index: 30; padding: 8px 12px; background: var(--paper); }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* One compact header, with search and context down the left edge. */
.masthead { display: grid; grid-template-columns: minmax(var(--sidebar-width), max-content) minmax(0, 1fr) auto; align-items: stretch; column-gap: 24px; padding: 0 18px; border-top: 3px solid var(--accent); border-bottom: 1px solid var(--border); background: var(--surface); }
.site-name { display: flex; align-items: center; padding: 9px 0; color: var(--text); font-size: 1.625rem; font-weight: 700; letter-spacing: -1px; overflow-wrap: anywhere; min-width: 0; max-width: 35vw; }
.site-logo { flex: none; max-height: 1.25em; max-width: 8em; height: auto; width: auto; margin-right: 8px; }
.primary-nav, .account-nav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 16px; min-width: 0; }
.primary-nav > a, .account-nav > a, .account-nav > form { display: flex; align-items: center; padding: 12px 0 10px; border-bottom: 2px solid transparent; }
.masthead a[aria-current] { border-bottom-color: var(--accent); font-weight: 700; }
.account-nav { margin-left: auto; max-width: 280px; font-size: .8125rem; }
.account-nav > a { overflow-wrap: anywhere; min-width: 0; }
.account-nav form { margin: 0; }
.page-shell { flex: 1; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "search content" "sidebar content"; column-gap: 24px; padding: 18px; align-items: start; }
.sidebar, .search-panel { min-width: 0; font-size: .8125rem; }
.sidebar { grid-area: sidebar; }
.search-panel { grid-area: search; }
.sidebar-section { margin: 0 0 20px; }
.sidebar-section > h2, .sidebar-section > summary { margin: 0 0 9px; padding: 5px 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .8125rem; font-weight: 700; }
.sidebar-section > summary { list-style-position: inside; }
.side-nav { display: grid; gap: 6px; padding: 0 8px; }
.search { display: flex; flex-wrap: wrap; gap: 6px; }
.search > input, .search > .tag-input { width: 100%; min-width: 0; }
.search button { padding: 3px 12px; }
.search-options { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; }
.sidebar-jump { display: none; font-size: .75rem; }
.content { grid-area: content; min-width: 0; width: 100%; max-width: 1000px; padding: 0 2px 18px; }
.content-wide { max-width: none; }
.site-footer { padding: 10px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; text-align: center; }

/* Forms stay native, compact, and usable without the script. */
input, button, select, textarea { font: inherit; }
input:not([type]), input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="date"], input[type="number"], select, textarea {
  min-width: 0; max-width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); color: var(--text);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
input[type="file"] { min-width: 0; max-width: 100%; }
textarea { width: 100%; resize: vertical; }
button, .reveal-label { display: inline-block; padding: 5px 13px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); cursor: pointer; line-height: 1.45; }
button:hover, .reveal-label:hover { filter: brightness(.93); }
button.link { padding: 0; border: 0; background: none; color: var(--accent); }
button.link:hover { text-decoration: underline; }
button:disabled { opacity: .6; cursor: not-allowed; }
button.secondary { background: var(--paper); color: var(--accent); border-color: var(--border); }
.stacked { display: grid; gap: 12px; max-width: 440px; }
.stacked label { display: grid; gap: 4px; }
.stacked label.choice { display: inline-flex; align-items: center; gap: 4px; margin: 3px 12px 3px 0; }
.stacked button { justify-self: start; }
.stacked .buttons { display: flex; flex-wrap: wrap; gap: 10px; }
fieldset { margin: 0; padding: 9px 12px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); }
legend { padding: 0 4px; font-weight: 700; }
.hint { margin: 4px 0 8px; color: var(--muted); font-size: .75rem; }
.error { color: var(--error); font-weight: 700; }
.counts, .empty { color: var(--muted); }
.counts { font-size: .75rem; }
.notice { margin: 10px 0; }
details { margin: 12px 0; }
summary { width: fit-content; max-width: 100%; color: var(--accent); cursor: pointer; }
.sidebar-section > summary { width: 100%; }
details > form { margin-top: 12px; }
.settings { max-width: 760px; margin: 24px 0; scroll-margin-top: 12px; }
.settings > h2 { padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.rows { margin: 0 0 16px; padding: 0; list-style: none; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.rows li > div { min-width: 0; overflow-wrap: anywhere; }
.rows .hint { margin: 3px 0 0; }
.rows form { flex-shrink: 0; margin: 0; }
.list { width: 100%; margin-bottom: 16px; border-collapse: collapse; }
.list th, .list td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.list th { background: var(--surface); color: var(--muted); font-size: .75rem; }
.list tbody tr:nth-child(even) { background: var(--paper); }
.list .hint { margin: 3px 0 0; }
.list time { white-space: nowrap; }
.list-frame { position: relative; overflow-x: auto; }
.list-frame .list { min-width: 520px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; }
.filters a[aria-current] { color: var(--text); font-weight: 700; }
form.inline { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
form.inline label { display: grid; gap: 4px; }
.stacked label.option { display: flex; align-items: baseline; gap: 6px; }
.stacked label.option + label:not(.option) { margin-top: 8px; }
.choices { margin-bottom: 12px; border-collapse: collapse; }
.choices th, .choices td { padding: 6px 16px 6px 0; text-align: left; }
.choices td { text-align: center; }
.secret code { display: inline-block; max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); background: var(--paper); user-select: all; overflow-wrap: anywhere; }
.hash { overflow-wrap: anywhere; }

/* Thumbnails retain their proportions, without card backgrounds or captions. */
.listing-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 3px 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.listing-bar h1 { margin: 0; font-size: 1rem; }
.listing-bar .counts { margin: 0; }
.list-navigation { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; }
.thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 18px; margin: 0; padding: 0; list-style: none; }
.thumbnails li { min-width: 0; height: 180px; display: flex; align-items: center; justify-content: center; }
.thumbnail { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; overflow: hidden; padding: 3px; border: 1px solid transparent; }
.thumbnail:hover, .thumbnail:focus-visible { border-color: var(--accent); background: var(--paper); }
.thumbnail img { display: block; width: auto; height: auto; max-width: 100%; max-height: 172px; object-fit: contain; }
.no-file { padding: 12px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.thumbnail .no-file { border: 1px dashed var(--border); font-size: .75rem; }
.empty-state { padding: 44px 16px; text-align: center; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin: 24px 0 6px; }
.pagination a { padding: 4px 9px; border: 1px solid transparent; }
.pagination a:hover { border-color: var(--border); background: var(--paper); }
.pagination a[aria-current] { background: var(--accent); color: var(--on-accent); }
.page-gap { padding: 0 4px; color: var(--muted); }
.tags { margin: 0; padding: 0 5px; list-style: none; }
.tags li { display: flex; align-items: baseline; gap: 5px; padding: 2px 0; }
.tags a { min-width: 0; overflow-wrap: anywhere; }
.post-count { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.post-info .facts { font-size: .75rem; padding: 0 5px; }
.file-links { margin: 12px 5px 0; }
.back-link { margin-left: auto; font-size: .8125rem; }
.post-image { max-width: 100%; }
.post-image img { display: block; max-width: 100%; height: auto; }
.post-editor { margin: 0 0 12px; }
.post-editor[open] { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.post-editor .stacked { max-width: 640px; }
.post-tools { display: flex; flex-wrap: wrap; align-items: start; gap: 0 20px; font-size: .8125rem; }
.post-tools > .post-editor { min-width: 0; }
.post-tools > .post-editor[open] { flex-basis: 100%; }
.post-tools form { font-size: .875rem; }
.related-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font-size: .8125rem; }
.related-posts { margin: 16px 0; font-size: .8125rem; }
.moderation { display: grid; gap: 14px; max-width: 640px; margin-top: 10px; }
button.danger { background: var(--error); border-color: var(--error); color: var(--on-accent); }
.relationship { margin: 14px 0 0; padding: 8px 0; border-top: 1px solid var(--border); font-size: .8125rem; }
.relationship p { margin: 0 0 6px; }
.relationship .thumbnails { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.relationship .thumbnails li { height: 110px; }
.relationship .thumbnail img { max-height: 102px; }
.vote-buttons { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 5px; }
.vote-buttons form { margin: 0; }
.vote-buttons button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.post-score .hint, .post-favorites .hint, .post-favorites form, .favoriters { padding: 0 5px; }
.favoriters { margin: 8px 0 0; overflow-wrap: anywhere; font-size: .75rem; }

/* Pools: their pages, the forms that choose their posts, and their place on a post's page. */
.pool-description { max-width: 820px; margin: 0 0 14px; }
.pool-facts { font-size: .75rem; padding: 0 5px; margin-bottom: 10px; }
.pool-link { display: grid; gap: 2px; padding: 3px 5px; overflow-wrap: anywhere; }
.pool-navigation { display: flex; gap: 12px; font-size: .75rem; }
.pool-adder { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; margin: 8px 0 0; padding: 0 5px; }
.pool-adder label { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pool-adder select { max-width: 100%; }
.pool-import { max-width: 440px; margin: 0 0 14px; }
.choices-grid li { height: auto; min-height: 180px; flex-direction: column; gap: 4px; }
.choice-label { display: flex; align-items: center; gap: 4px; font-size: .75rem; }
.choice-label input[type="number"] { width: 5em; }

/* Bulk changes use one radio choice per action; all controls work without JavaScript. */
.bulk-edit > fieldset { margin-bottom: 12px; }
.bulk-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 20px; }
.bulk-action { min-width: 0; padding: 10px 8px; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; }
.bulk-action:has(input[name="action"]:checked) { border-left-color: var(--accent); background: var(--surface); }
.bulk-action > .option { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin: 0 0 5px; }
.bulk-action > input, .bulk-action > select, .bulk-action > .tag-input { width: 100%; }
.bulk-action > .choice { display: block; margin: 5px 0 0; font-size: .75rem; }
.bulk-action .hint { margin: 4px 0 0; }
.bulk-edit > fieldset:not(.bulk-actions) .option { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-right: 18px; }
.bulk-edit .choices-grid { margin-top: 16px; }

/* Notes: boxes over the image, drawn to its scale, and the list of them below it. */
.noted-image { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.noted-image img { display: block; }
.note-boxes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.note-boxes a { pointer-events: auto; }
.note-box { fill: #fffbe0; fill-opacity: .35; stroke: #8a7a24; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.note-boxes a:hover .note-box, .note-box.active { fill-opacity: .6; stroke: var(--accent); }
.note-box.drawing { fill: var(--accent); fill-opacity: .25; stroke: var(--accent); stroke-dasharray: 4 3; }
.note-boxes.drawing { cursor: crosshair; pointer-events: auto; touch-action: none; }
.notes-section { max-width: 760px; margin: 18px 0 0; }
.notes-section > h2 { padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.note { padding: 6px 0 8px; border-bottom: 1px solid var(--border); scroll-margin-top: 12px; }
.note:target, .note.active { background: var(--surface); }
.note-footer { margin: 4px 0 0; color: var(--muted); font-size: .75rem; }
.note-editor { margin: 4px 0 0; font-size: .8125rem; }
.note-rect { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.note-rect label { display: grid; gap: 2px; font-size: .75rem; }
.note-rect input { width: 6.5em; }
.note-requests { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.note-requests form, .note-requests p { margin: 0; }
.note-popup { position: absolute; z-index: 20; max-width: min(320px, 80vw); padding: 6px 9px; border: 1px solid #8a7a24; border-radius: var(--radius); background: #fffbe0; color: #292f36; box-shadow: 0 3px 8px #0003; font-size: .8125rem; pointer-events: none; }

/* Edit history: each edit's time, editor, and changes, newest first. */
.edits { max-width: 820px; margin: 0; padding: 0; list-style: none; }
.edit { padding: 8px 0 10px; border-bottom: 1px solid var(--border); scroll-margin-top: 12px; }
.edit:target { background: var(--surface); }
.edit-header { margin: 0 0 4px; font-size: .75rem; color: var(--muted); }
.edit-changes { margin: 0 0 6px; padding-left: 18px; overflow-wrap: anywhere; }
.edit-changes li { padding: 1px 0; }
.added-tag::before { content: "+"; }
.removed-tag { text-decoration: line-through; }
.removed-tag::before { content: "−"; }
.edit form { margin: 0; }

/* Reports, in administration beside their posts' thumbnails, and on a post's page. */
.reports { max-width: 820px; margin: 0; padding: 0; list-style: none; }
.report { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 12px; }
.report:target { background: var(--surface); }
.report > .thumbnail { flex: none; width: 160px; max-height: 180px; align-self: flex-start; }
.report > .thumbnail img { max-height: 172px; }
.report-body { flex: 1; min-width: 0; }
.report-header { margin: 0 0 4px; font-size: .75rem; color: var(--muted); }
.report-reason { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.report-actions form { margin: 0; }
.post-reports ul { margin: 0 0 8px; padding: 0; list-style: none; }
.post-reports li { padding: 4px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.post-reports li form { display: inline; margin: 0 0 0 6px; }
.post-reports .report-reason { margin: 0; }

/* Tag lists: the map sizes tags by how much they are used, in Shimmie2's steps. */
.tag-list-filter { margin: 0 0 12px; }
.tag-list-filter input[type="number"] { width: 7em; }
.tag-characters { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 16px; font-size: .9375rem; }
.tag-characters a[aria-current] { color: var(--text); font-weight: 700; }
.tag-map { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .9em; margin: 0; padding: 0; list-style: none; line-height: 1.25; }
.tag-map li { min-width: 0; max-width: 100%; }
.tag-map a { overflow-wrap: anywhere; }
.tag-size-1 { font-size: 1em; }
.tag-size-2 { font-size: 1.25em; }
.tag-size-3 { font-size: 1.5em; }
.tag-size-4 { font-size: 1.75em; }
.tag-size-5 { font-size: 2em; }
.tag-size-6 { font-size: 2.25em; }
.tag-size-7 { font-size: 2.5em; }
.tag-size-8 { font-size: 2.75em; }
.tag-size-9 { font-size: 3em; }
.tag-size-10 { font-size: 3.25em; }
.tag-size-11 { font-size: 3.5em; }
.tag-group h2 { padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.tag-columns { columns: 15em; column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.tag-columns li { padding: 1px 0; break-inside: avoid; overflow-wrap: anywhere; }

/* Help lays terms beside what they do, and above it where there is no room. */
.help-terms { display: grid; grid-template-columns: minmax(9em, max-content) minmax(0, 1fr); gap: 7px 20px; margin: 0 0 8px; }
.help-terms dt { overflow-wrap: anywhere; }
.help-terms dd { margin: 0; }
h3 { margin: 16px 0 8px; font-size: .875rem; }

/* What people write: rendered Markdown in wiki pages and comments. */
.markup { overflow-wrap: anywhere; }
.markup > :first-child { margin-top: 0; }
.markup > :last-child { margin-bottom: 0; }
.markup p, .markup ul, .markup ol, .markup blockquote, .markup pre, .markup table { margin: 0 0 10px; }
.markup ul, .markup ol { padding-left: 24px; }
.markup h2, .markup h3, .markup h4, .markup h5, .markup h6 { margin: 16px 0 8px; font-size: .9375rem; }
.markup h2 { font-size: 1.0625rem; }
.markup blockquote { padding: 2px 12px; border-left: 3px solid var(--border); color: var(--muted); }
.markup code { padding: 1px 4px; background: var(--surface); border-radius: var(--radius); }
.markup pre { padding: 8px 10px; overflow-x: auto; background: var(--surface); }
.markup pre code { padding: 0; background: none; }
.markup table { border-collapse: collapse; }
.markup th, .markup td { padding: 4px 10px; border: 1px solid var(--border); text-align: left; }
.markup img { max-width: 100%; height: auto; }
.markup hr { border: 0; border-top: 1px solid var(--border); }
.spoiler { padding: 0 2px; border-radius: var(--radius); background: var(--text); color: var(--text); cursor: help; }
.spoiler a { color: inherit; }
.spoiler:hover, .spoiler:focus { background: var(--surface); color: var(--text); }
.spoiler:hover a, .spoiler:focus a { color: var(--accent); }

/* Comments under a post, the list of posts with the newest, and the newest beside a listing. */
.comments { max-width: 760px; margin: 24px 0 0; }
.comments > h2 { padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.comment { padding: 8px 0 10px; border-bottom: 1px solid var(--border); scroll-margin-top: 12px; }
.comment-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; font-size: .75rem; }
.comment-author { font-weight: 700; }
.comment-time { color: var(--muted); }
.comment:target { background: var(--surface); }
.comment-actions { display: flex; flex-wrap: wrap; align-items: start; gap: 4px 14px; margin-top: 6px; font-size: .75rem; }
.comment-actions details { margin: 0; min-width: 0; max-width: 100%; }
.comment-actions form { margin: 0; }
.comment-actions .stacked { margin-top: 8px; width: 560px; max-width: 100%; }
.comment-form { margin-top: 14px; max-width: 560px; }
.thread { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.thread > .thumbnail { flex: none; width: 160px; max-height: 180px; align-self: flex-start; }
.thread > .thumbnail img { max-height: 172px; }
.thread-comments { flex: 1; min-width: 0; }
.thread-comments h2 { margin-top: 0; }
.thread-reply { margin: 8px 0 0; }
.thread-reply .stacked { max-width: 560px; }
.newest-comments ul { margin: 0; padding: 0 5px; list-style: none; }
.newest-comments li { padding: 2px 0 4px; overflow-wrap: anywhere; }
.newest-comments p { margin: 4px 5px 0; }

/* Profiles: each account's public page, and its avatar beside its name. */
.avatar { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius); background: var(--surface); }
.avatar.blurred { filter: blur(6px); }
.comment-header .avatar { align-self: center; }
.profile { max-width: 820px; }
.profile-header { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.profile-header h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.profile-avatar { width: 80px; height: 80px; }
.profile-facts { max-width: 480px; margin: 0 0 18px; }
.biography > h2, .profile-comments > h2 { padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.list-frame .account-list { min-width: 0; }
.profile-comment-list { margin: 0; padding: 0; list-style: none; }
.profile-comment-list li { padding: 3px 0; overflow-wrap: anywhere; }
.avatar-choice { margin: 6px 0 0; padding: 0 5px; font-size: .75rem; }
.avatar-removal { margin-top: 12px; }
.titled-avatar { display: flex; align-items: center; gap: 10px; }
.account-filter { margin: 0 0 14px; }

/* The wiki: pages, their editor, history, and changes. */
.wiki-page { max-width: 820px; }
.wiki-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--border); }
.wiki-editor { max-width: 820px; }
.wiki-editor textarea { font-family: ui-monospace, Consolas, monospace; font-size: .8125rem; }
.wiki-conflict textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .8125rem; }
.wiki-preview { max-width: 820px; margin: 0 0 16px; padding: 10px 14px; border: 1px dashed var(--border); background: var(--paper); }
.wiki-preview > h2 { margin-top: 0; }
.form-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wiki-pages { margin: 0; padding: 0; list-style: none; columns: 22em; column-gap: 28px; }
.wiki-pages li { padding: 2px 0; break-inside: avoid; overflow-wrap: anywhere; }
.wiki-new { margin: 0 0 12px; }
.wiki-index { margin: 0 0 16px; }
.wiki-sidebar { margin: 10px 0 0; padding: 0 8px; }
.wiki-sidebar h3, .wiki-sidebar h4, .wiki-sidebar h5, .wiki-sidebar h6 { margin: 10px 0 4px; font-size: .8125rem; }
.side-nav + .wiki-sidebar { padding-top: 8px; border-top: 1px solid var(--border); }
.wiki-summary { max-width: 820px; margin: 0 0 14px; padding: 8px 12px; border-left: 2px solid var(--accent); background: var(--surface); }
.wiki-summary h2 { margin: 0 0 4px; font-size: .875rem; }
.diff-hunk { margin: 0 0 16px; }
.diff-hunk .hint { margin: 0 0 4px; }
.diff { margin: 0; padding: 6px 0; overflow-x: auto; border: 1px solid var(--border); background: var(--paper); font-size: .8125rem; line-height: 1.5; }
.diff span { display: block; padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-removed { background: #f8d7da; color: #5c1e24; }
.diff-added { background: #d4edda; color: #1d4d29; }
@media (prefers-color-scheme: dark) {
  .diff-removed { background: #4a2125; color: #f5c6cb; }
  .diff-added { background: #1e3d27; color: #c3e6cb; }
}
.tag-wiki { color: var(--muted); font-size: .6875rem; }
.formatting pre { margin: 4px 0 0; white-space: pre-wrap; }
.formatting td { width: 50%; }

/* Viewer-selected blurring, including a keyboard-accessible, script-free reveal. */
.blurred img { filter: blur(1rem); }
.thumbnail.blurred:hover img, .thumbnail.blurred:focus-visible img, .reveal:checked ~ .blurred img { filter: none; }
.reveal { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reveal-hide, .reveal:checked ~ .reveal-label .reveal-show { display: none; }
.reveal:checked ~ .reveal-label .reveal-hide { display: inline; }
.reveal:focus-visible + .reveal-label { outline: 2px solid var(--accent); outline-offset: 3px; }
.post-image .reveal-label { margin-bottom: 12px; }
.post-image .blurred { display: block; overflow: hidden; }

/* Autocomplete and the tag editor share the same compact link vocabulary. */
.tag-input { position: relative; min-width: 0; }
.tag-input input { width: 100%; }
.suggestions { position: absolute; z-index: 10; top: 100%; left: 0; min-width: 100%; width: max-content; max-width: min(440px, 80vw); max-height: 280px; overflow-y: auto; margin: 2px 0 0; padding: 3px 0; list-style: none; background: var(--paper); border: 1px solid var(--border); box-shadow: 0 3px 8px #0002; }
.suggestions li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 8px; cursor: pointer; overflow-wrap: anywhere; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--surface); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.tag-chip { padding: 2px 5px; border: 1px solid var(--border); background: var(--paper); color: var(--accent); font-size: .75rem; }
.tag-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

@media (max-width: 1100px) {
  .masthead { grid-template-columns: minmax(0, 1fr) auto; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; }
  .account-nav { grid-column: 2; grid-row: 1; }
  .primary-nav > a { padding: 7px 0; }
  .site-name { padding: 7px 0 3px; max-width: none; }
  .site-logo { max-width: 40%; }
}
@media (max-width: 760px) {
  :root { --sidebar-width: 180px; }
  .masthead { column-gap: 18px; padding: 0 12px; }
  .site-name { font-size: 1.4375rem; }
  .primary-nav, .account-nav { gap: 0 12px; }
  .page-shell { column-gap: 16px; padding: 14px 12px; }
  .thumbnails { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .thumbnails li { height: 155px; }
  .thumbnail img { max-height: 147px; }
}
@media (max-width: 560px) {
  .masthead { column-gap: 12px; }
  .primary-nav > a, .account-nav > a, .account-nav > form { padding: 7px 0; }
  .account-nav { max-width: 230px; font-size: .75rem; justify-content: flex-end; }
  /* Extended navigation follows the content; search remains available above it. */
  .page-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "search" "content" "sidebar"; gap: 8px; padding: 12px; }
  .sidebar-section { margin-bottom: 10px; }
  .search-panel h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .search { flex-wrap: nowrap; }
  .search > input, .search > .tag-input { flex: 1; width: auto; }
  .search button { min-height: 34px; }
  .sidebar-jump { display: inline; }
  .page-shell:not(:has(> .sidebar > *)) .sidebar-jump { display: none; }
  .tag-panel .tags { max-height: 108px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .tag-panel .tags li { max-width: 100%; }
  .tag-panel > summary { margin-bottom: 5px; }
  .side-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; }
  .post-info .facts { display: flex; flex-wrap: wrap; gap: 3px 6px; }
  .post-info .facts dd { margin-right: 8px; }
  .file-links { margin-top: 6px; }
  .content { padding: 0 0 12px; }
  .thumbnails { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 10px; }
  .listing-bar { gap: 5px 10px; }
  .list-navigation { width: 100%; justify-content: flex-end; }
  .stacked { max-width: none; }
  .pagination a { padding: 7px 9px; }
  .thread, .report { flex-direction: column; gap: 8px; }
  .thread > .thumbnail, .report > .thumbnail { width: auto; }
  .help-terms { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .help-terms dd { margin-bottom: 8px; color: var(--muted); }
  .tag-map a { white-space: normal; overflow-wrap: anywhere; }
}

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.settings-grid .settings { min-width: 0; margin: 0 0 12px; }
@media (max-width: 1000px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Customization: blocks, and Shimmie2's home page. */
.custom-block { margin: 0 0 14px; overflow-wrap: anywhere; }
.custom-block img, .custom-block iframe { max-width: 100%; }
.content > .custom-block > h2 { margin-top: 0; }
.admin-section { margin: 20px 0; }
.admin-section > h2 { padding: 5px 8px; border-bottom: 1px solid var(--border); background: var(--surface); }
.admin-section > form + form { margin-top: 10px; }
.admin-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 24px; max-width: 760px; }
.log-filters { margin-bottom: 14px; }
.log-filter-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.log-filter-fields label { display: grid; gap: 4px; min-width: 0; }
.log-filters details { margin-top: 10px; }
.system-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 28px; max-width: 1000px; }
.system-info > .admin-section { margin: 0; }
.site-settings { max-width: 860px; gap: 18px; font-size: .8125rem; }
.settings-actions { position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--paper); border-bottom: 1px solid var(--border); }
.site-settings > details { margin: 0; }
.site-settings > details > summary { font-size: .875rem; font-weight: 700; }
.site-settings .option > span { min-width: 0; overflow-wrap: anywhere; }
.site-settings fieldset { scroll-margin-top: 56px; }
.site-settings legend { font-size: .875rem; }
.site-settings .option { padding: 5px 0; }
.feature-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 18px; }
.setting-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: 8px 18px; padding: 9px 0; }
.setting-row + .setting-row { border-top: 1px solid var(--border); }
.setting-row > label { padding-top: 5px; }
.setting-control { min-width: 0; }
.setting-control > input[type="text"], .setting-control > input[type="password"], .setting-control > input:not([type]), .setting-control > textarea { width: 100%; }
.setting-control > input[type="number"] { width: 8em; }
.setting-control > input[type="checkbox"] { margin-top: 8px; }
.settings-sections { font-size: .8125rem; }
.site-settings textarea { font-family: ui-monospace, Consolas, monospace; font-size: .8125rem; }
.stacked label.option.nested { margin-left: 22px; }
.site-icon-preview { vertical-align: middle; image-rendering: pixelated; }
.site-logo-preview { max-width: 100%; max-height: 120px; }
.front-page-logo { display: block; max-width: 100%; max-height: 240px; margin: 0 auto 14px; }
.front-page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 48px 18px 24px; text-align: center; }
.front-page-name { margin: 0 0 14px; font-size: 2.5rem; letter-spacing: -1px; }
.front-page-name a { color: var(--text); }
.front-page-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 18px; }
.front-page-search { flex-wrap: nowrap; justify-content: center; margin: 0 auto 18px; max-width: 420px; }
.front-page-search > input, .front-page-search > .tag-input { flex: 1; width: auto; }
.front-page-text { margin: 0 0 18px; }
.front-page-counter { display: flex; justify-content: center; gap: 3px; margin: 0 0 18px; }
.front-page-counter span { min-width: 30px; padding: 4px 6px; border: 1px solid var(--border); background: var(--surface); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.front-page-footer { color: var(--muted); font-size: .75rem; }
@media (max-width: 760px) {
  .setting-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .site-settings { gap: 14px; }
}

/* On paper: the content alone, in black on white, without the site's navigation and controls. */
@media print {
  :root { color-scheme: light; --text: #000000; --muted: #444444; --background: #ffffff; --paper: #ffffff; --surface: #ffffff; --border: #999999; --accent: #000000; }
  .skip-link, .masthead, .search-panel, .sidebar, .site-footer, form, button, details:not([open]) { display: none !important; }
  .page-shell { display: block; padding: 0; }
  a { text-decoration: underline; }
}