.admin {
	padding: 4px;
	border-radius: 4px;
	background: green;
	margin: 6px;
	width: 200px;
	display: inline-block;
}
.admin.protected {
	background: red;
}
.admin INPUT[type="submit"] {
	width: 100%;
}
.admin.protected INPUT[type="submit"] {
	width: 90%;
}


.bbcode {
	overflow-wrap: anywhere;
}
.bbcode BLOCKQUOTE {
	border: 1px solid black;
	padding: 8px;
	background: #DDD;
}
.bbcode .anchor A.alink {
	visibility: hidden;
}
.bbcode .anchor:hover A.alink {
	visibility: visible;
}

.comment {
	text-align: left;
	position: relative;
	overflow-wrap: anywhere;
}
.comment IMG {
	max-width: 100%;
}
.comment .info {
	visibility: hidden;
	text-align: center;
	padding: var(--block-padding);
	background: var(--block);
	border: 1px solid var(--block-border);
	position: absolute;
	top: 0;
	left: -180px;
	width: 180px;
	z-index: 1;
	box-shadow: 0 0 4px #000;
	border-radius: 4px;
}
.comment:hover .info {
	visibility: visible;
}

.comment_add INPUT:not([type="checkbox"]):not([type="radio"]),
.comment_add TEXTAREA,
.comment_add BUTTON,
.comment_add SELECT {
	width: 100%;
}

#comment-list-recent .more {
	display: block;
	padding-top: 8px;
}
.comment_big_list {
	display: flex;
	gap: 1em;
}
.comment_big_list .thumb {
	flex: 0;
}
.comment_big_list .comment_list {
	flex: 1;
	border-left: 1px solid var(--block-border);
}
.comment_big_list .comment {
	margin-left: 0;
}

/* checkbox, title, doc link */
.ext-list TD:nth-child(1) {
    width: 1em;
}
.ext-list TD:nth-child(2) {
    width: 12em;
}
.ext-list TD:nth-child(3) {
    width: 1em;
}

#handle_pixel_media IMG {
    max-width: 100%;
}

.command_example {
	margin: 12pt;
	padding-left: 16pt;
}

.command_example code {
    padding:4pt;
    border: dashed 2px black;
    background: inherit;
}

.command_example p {
    padding-left: 16pt;
}

@media (min-width: 750px) {
    .command_example code {
        display: table-cell;
        width: 256px;
    }

    .command_example p {
        display: table-cell;
    }
}

SECTION#image-list {
	box-shadow: none;
}
SECTION#image-list .blockbody {
	background: none;
	border: none;
	padding: 0px;
	text-align: left;
}
.shm-image-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, calc(var(--thumb-width) + 42px) );
	place-items: center;
}
.shm-image-list .thumb {
	margin-bottom: 8px;
}

.setupblocks {
	column-width: 400px;
	column-gap: 1em;
	max-width: 1200px;
	margin: auto;
}
.setupblocks > .setupblock:first-of-type { margin-top: 0; }

.setupblock {
	break-inside: avoid;
	text-align: center;
}
.setupblock TEXTAREA {
	width: 100%;
	font-size: 0.75rem;
	resize: vertical;
}
.setupblock SELECT[multiple] {
	width: 100%;
}

.advanced_settings INPUT {
	width: 100%;
}

#Setupmain {
	box-shadow: none;
}
#Setupmain>.blockbody {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
}
.setupblock .form {
	width: 100%;
}
.setupblock .form TH {
	font-weight: normal;
}
.setupblock .advanced {
    color: var(--danger-color);
    background: var(--danger-background);
}
.setupsubmit {
	margin-top: 1em;
	padding: 1em;
	width: 100%;
}

:root {
	--added-background: lightgreen;
	--removed-background: lightcoral;

	--flash-color: #882;
	--flash-border: #660;
	--blink-base-color: #FF70;
	--blink-blink-color: #FF7F;
}

@media (prefers-color-scheme: dark) {
	:root {
		--added-background: green;
		--removed-background: coral;
	}
}

INPUT, TEXTAREA, SELECT, BUTTON {
	box-sizing: border-box;
	font-size: 1em;
}

TABLE.form {width: 300px;}
TABLE.zebra {width: 100%;}

TABLE.form TD, TABLE.form TH {vertical-align: middle;}
TABLE.form TBODY TR TD {text-align: left;}
TABLE.form TBODY TR TH {text-align: right; padding-right: 4px; width: 1%; white-space: nowrap;}
TABLE.form TBODY TR.header TD,
TABLE.form TBODY TR.header TH {text-align: center; width: auto;}
TABLE.form TD + TH {padding-left: 8px;}
TABLE.form INPUT:not([type="checkbox"]):not([type="radio"]),
TABLE.form SELECT,
TABLE.form TEXTAREA,
TABLE.form BUTTON {width: 100%;}

H1, H2, H3 {
    overflow-wrap: anywhere;
}

*[onclick],
H3[class~="shm-toggler"] {
    cursor: pointer;
}

@keyframes blink {
    0% {background-color: var(--blink-base-color);}
    25% {background-color: var(--blink-blink-color);}
    50% {background-color: var(--blink-base-color);}
    75% {background-color: var(--blink-blink-color);}
    100% {background-color: var(--blink-base-color);}
}
.blink {
    animation: blink 2s linear 1;
}

#flash {
    color: #444;
    background-color: var(--flash-color);
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--flash-border);
}
#flash B {
    display: block;
    padding: 8px;
    border-radius: var(--border-radius);
}

.tag {
    overflow-wrap: anywhere;
}

.prose {
    text-align: left;
}
.prose P:first-child {
    margin-top: 0;
}
.prose P:last-child {
    margin-bottom: 0;
}

TABLE#large_upload_form.form {
	width: 100%;
}

.mini_upload INPUT:not([type="checkbox"]):not([type="radio"]),
.mini_upload TEXTAREA,
.mini_upload BUTTON,
.mini_upload SELECT {
	width: 100%;
}

TABLE.form.image_info {
    width: 550px;
    max-width: 100%;
}

.image_info .edit {
    display: block;
}
.image_info .view {
    display: none;
}

.image_info.infomode-view .edit {
    display: none;
}
.image_info.infomode-view .view {
    display: block;
}

.image_info TEXTAREA {
    min-width: 100%;
    min-height: 3rem;
}
.image_info .image-info-sidebar-box {
    vertical-align: top;
}

.post_controls FORM {
    margin-bottom: 0.75em;
}
.post_controls FORM:last-child {
    margin-bottom: 0;
}

.autocomplete_completions {
    position: absolute;
    z-index: 1000;
    border: 1px solid #ccc;
    color: #000;
    background-color: #fff;
    padding: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}
.autocomplete_completions LI {
    padding: 0.15em;
}
.autocomplete_completions .selected {
    background-color: #ccc;
    outline: none;
}

.bulk_selected {
	outline: 3px solid blue;
}

.bulk_action {
	margin-top: 8pt;
}
.bulk_selector_controls table td {
	width: 33%;
}
#handle_video_media VIDEO {
    width: 100%;
    max-height: 85vh;
    background: black;
}

div#front-page h1 {font-size: 4rem; margin-top: 2em; margin-bottom: 0; text-align: center; border: none; background: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;}
div#front-page h1 A {text-decoration: none;}
div#front-page {text-align:center;}
div#front-page .space {margin-bottom: 1em;}
div#front-page div#links a {display: inline-block; margin: 0 0.5em;}
div#front-page li {list-style-type: none; margin: 0;}
@media (max-width: 800px) {
	div#front-page h1 {font-size: 3rem; margin-top: 0.5em; margin-bottom: 0.5em;}
}
div#front-page > #search > form {margin: 0 auto;}
div#front-page > #search > form > input[type=submit]{padding: 4px 6px;}
#counter {display: grid; justify-content: center; margin: auto; max-width: 66%;}
.counter-img {grid-row: 1; max-width: 100%; height: auto;}

:root {
   	--level-debug: #999;
	--level-info: var(--text);
	--level-warning: #880;
	--level-error: #C50;
	--level-critical: #F00;
}
/* tweak for dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --level-debug: #666;
        --level-info: var(--text);
        --level-warning: #FFA;
        --level-error: #F88;
        --level-critical: #F55;
    }
}
SPAN.level-debug { color: var(--level-debug); }
SPAN.level-info { color: var(--level-info); }
SPAN.level-warning { color: var(--level-warning); }
SPAN.level-error { color: var(--level-error); }
SPAN.level-critical { color: var(--level-critical); }

.notes-container {
	pointer-events: none;
	position: absolute;
}

.notes-container .note {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	background-color: #FFE;
	border: 1px solid #DDC;
	overflow: hidden;
	position: absolute;
	opacity: 0.5;
	z-index: 1;
	pointer-events: auto;
}
/* note mouse events should be relative to the top-level note,
 * not relative to any inner elements */
.notes-container .note DIV {
    pointer-events: none;
}
.notes-container .note.editing {
	opacity: 1;
	z-index: 2;
}
.notes-container .note.editing.dragging {
	opacity: 0.5;
	z-index: 2;
}
.notes-container .note:hover {
	opacity: 1;
	z-index: 3;
}

.notes-container.dragging .editor {
    display: none;
}
.notes-container .editor {
	display: grid;
	color: black;
	background-color: #EFE;
	border: 1px solid #000;
	position: absolute;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"text text"
		"save cancel"
		"delete delete";
	z-index: 4;
	pointer-events: auto;
}
.notes-container .editor TEXTAREA {
	grid-area: text;
}
.notes-container .editor BUTTON[value="Save"] {
	grid-area: save;
}
.notes-container .editor BUTTON[value="Cancel"] {
	grid-area: cancel;
}
.notes-container .editor BUTTON[value="Delete"] {
	grid-area: delete;
}

.pools_next_img {
	display: block;
	font-size: 77%;
	text-align: right;
	float: right;
}

.pools_prev_img {
	display: block;
	font-size: 77%;
	text-align: left;
	float: left;
}

.thumb IMG {
	border-width: 2px !important;
}

.shm-thumb-has_child img {
	border-color: lime !important;
}

.shm-thumb-has_parent img {
	border-color: #cc0 !important;
}

.shm-thumb-has_child.shm-thumb-has_parent img {
	border-color: lime #cc0 #cc0 lime !important;
}

#reportedimage .reason {
	max-width: 30em;
	overflow-wrap: anywhere;
}
#reportedimage .formstretch INPUT {
	width: 100%;
}

.tagcategoryblock {
	margin:0.6rem 1rem 0.6rem 0;
	padding:0.5rem 0.6rem 0.7rem;
	width:18rem;
	border:1px solid #AAAAAA;
	border-radius:0.25rem;
	display:inline-block;
}
.tagcategoryblock table {
	width:100%;
	border-spacing:0;
}
.tagcategoryblock input, .tagcategoryblock span {
	width:100%;
	height:100%;
}
.tagcategoryblock td:first-child {
	padding:0.3rem 0.7rem 0.4rem 0;
	text-align:right;
	width:40%;
}
.tagcategoryblock td:last-child {
	width:60%;
}
.tagcategoryblock td:last-child span {
	width:7ch;
	padding:0.24rem 0.7rem 0.5rem 0;
	display:inline-block;
}
.tagcategoryblock button {
	width:100%;
	margin-top:0.4rem;
	padding:0.2rem 0.6rem;
}

.tagcategoryblock input[type="color"] {
	height: 22px;
}

.tagcategoryblock .tc_colorswatch {
	display:inline-block;
	vertical-align:middle;
	height:1.25rem;
	width:1.25rem;
	border-radius:4px;
}

.tageditcloud span.tag-selected {
	background:#88EE88;
}

.tageditcloud {
	color: #0000FF;
}

.tageditcloud div#tagcloud_unset {
	color: #0000FF;
}

.tageditcloud div#tagcloud_set {
        color: #0000FF;
	font-style:italic;
}

.tageditcloud div#tagcloud_extra {  
        color: #0000FF;
}

.added-tag{background:var(--added-background);}
.deleted-tag{background:var(--removed-background);text-decoration:line-through;}

:root {
	color-scheme: light dark;

	--page: #FFFFFF;
	--text: black;

	--danger-color: #000;
	--danger-background: #FAA;

	--link-first: #FF3333;
	--link-default: #006FFA;
	--link-hover: #33CFFF;
	--link-header: black;

	--header-selected: #EEEEFF;
	--footer-fg: #555555;
	--tag-count: #AAAAAA;
	--comment-meta: gray;

	--paginator-border: #EEEEEE;
	--paginator-hover-bg: blue;
	--paginator-hover-fg: white;

	--block-border: #AAAAAA;

	--zebra-heading-fg: #171BB3;
	--zebra-hover-bg: #FFD;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #1E1E2C;
		--text: #E8E8EC;

		--danger-color: #E8E8EC;
		--danger-background: #955;

		--link-first: #FF5A5B;
		--link-default: #009BE9;

		--header-selected: #2C2D3F;

		--paginator-hover-bg: #009BE9;
		--paginator-hover-fg: white;

		--zebra-heading-fg: #E8E8EC;
		--zebra-hover-bg: #2C2D3F;
	}
}

:root {
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size-adjust: none;
	font-stretch: normal;
	font-size: 87.5%;
	line-height: normal;
	-x-system-font: none;
}

HEADER {
	grid-column: 1 / 3;
	grid-row: 1;
	margin-bottom: 0.9rem;
	text-align: left;
}

HEADER h1 {
	text-align: left;
}

HEADER #site-title {
	margin-left: 30px;
	font-family: "Tahoma", "Verdana", "Helvetica", sans-serif;
}
HEADER #site-title IMG {
	vertical-align: middle;
	margin-right: .5rem;
	/* The favicon ships as black-on-transparent — barely visible against
	   the dark header. Invert to white-on-transparent so it actually reads.
	   When/if a proper light-on-dark logo asset replaces favicon.ico, drop
	   this rule. */
	filter: invert(1);
}

HEADER ul#navbar,
HEADER ul#subnavbar {
	font-family: "Verdana", "Helvetica", sans-serif;
}

HEADER ul#navbar {
	margin: 0;
	padding: 0 30px 0 30px;
}

HEADER ul#navbar li {
	margin: 0;
}

HEADER ul#navbar li a {
	display: inline-block;
	margin: 0 0.15rem;
	padding: 0.4rem 0.6rem;
}

HEADER ul#navbar li:first-child a {
	margin-left: -0.6rem;
	color: var(--link-first);
	font-weight: bold;
}

HEADER ul#navbar li a.current-page {
	background-color: var(--header-selected);
	font-weight: bold;
}

HEADER ul#subnavbar {
	padding: 0 30px 0 30px;
	background-color: var(--header-selected);
}

HEADER ul#subnavbar li {
	display: inline-block;
	margin: 0 0.15rem;
	padding: 0.4rem 0.6rem;
}

HEADER ul#subnavbar li:first-child {
	margin-left: -0.6rem;
}

body {
	background-color: var(--page);
	color: var(--text);
}

BODY.layout-grid {
	display: grid;
	grid-template-columns: 11.5rem auto;
	grid-gap: 0 4rem;
}
BODY.layout-no-left NAV {
	display: none;
}
BODY.layout-no-left ARTICLE {
	margin-left: 2rem;
}

h1 {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0.35rem;
	font-size: 2rem;
}

h1 a {
	color: var(--link-header);
}

h3 {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0.2rem 0.2rem 0.2rem 0;
	font-size: 1rem;
}

h4 {
	font-size: 1.4rem;
}

h5 {
	font-size: 1.2rem;
}

table.zebra {
	border-spacing: 0;
	border-collapse: collapse;
}

table.zebra>tbody>tr:hover {
	background: var(--zebra-hover-bg);
}

table.zebra th {
	padding-right: 0.4rem;
	color: var(--zebra-heading-fg);
}

table.zebra td {
	margin: 0;
	padding-right: 0.6rem;
	border: 1px dotted #EEE;
}

table.zebra th {
	margin: 0;
	text-align: left;
}

thead {
	font-weight: bold;
	-moz-background-clip: border;
	-moz-background-inline-policy: continuous;
	-moz-background-origin: padding;
}

td {
	vertical-align: top;
}

#subtitle {
	margin: auto;
	width: 256px;
	border-top: medium none;
	text-align: center;
	font-size: 0.75em;
}

#short-wiki-description {
	padding: 0 2em;
	font-size: 1.2em;
}

#short-wiki-description h2 {
	padding-bottom: 0.2em;
}

FOOTER {
	grid-column: 1 / 3;
	grid-row: 3;
	clear: both;
	border-top: solid 1px var(--block-border);
	margin-top: 1rem;
	text-align: center;
	color: var(--footer-fg);
	font-size: 0.8rem;
}

FOOTER>DIV {
	margin: 1rem 2rem;
}

CODE {
	background: #DEDEDE;
	font-size: 0.9rem;
}

form {
	margin: 0;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

NAV {
	grid-column: 1;
	grid-row: 2;
	padding: 0 1rem 0.2rem 2rem;
	width: 11.5rem;
	text-align: left;
}

NAV section+section {
	margin-top: 1rem;
}

NAV table {
	width: 15rem;
}

NAV td {
	vertical-align: middle;
}

NAV input {
	padding: 0;
	width: 100%;
}

NAV select {
	padding: 0;
	width: 100%;
}

NAV h3 {
	text-align: left;
}

#comments p {
	overflow: hidden;
	max-width: 150px;
	width: 15rem;
	text-align: left;
}

SPAN.comment-info SPAN {
    margin-right: 2em;
}
SPAN.comment-info SPAN B {
    margin-right: 0.5em;
}

TABLE.tag_list {
	width: auto;
	border-collapse: collapse;
}

TABLE.tag_list>THEAD {
	display: none;
}

TABLE.tag_list>TBODY>TR>TD {
	display: inline;
	padding: 0;
	line-height: 1em;
}

TABLE.tag_list>TBODY>TR>TD:after {
	content: " ";
}

.tag_count {
	display: inline-block;
	margin-left: 0.4rem;
	color: var(--tag-count);
}

.more {
	content: "More â";
}

.comment {
	margin-bottom: 8px;
}

.comment .meta {
	width: 15rem;
	color: var(--comment-meta);
}

.comment TD {
	text-align: left;
}

.withleft {
	margin-left: 1rem;
}

div#paginator {
	display: block;
	clear: both;
	padding: 2em 0 1em;
	text-align: center;
	font-weight: bold;
	font-size: 1em;
}

.paginator {
	margin: 16px;
	text-align: center;
}

div#paginator b {
	margin: 3px;
	padding: 4px 8px;
}

div#paginator a {
	margin: 3px;
	padding: 4px 8px;
}

div#paginator a:hover {
	background: var(--paginator-hover-bg) none repeat scroll 0 0;
	color: var(--paginator-hover-fg);
}

#pagelist {
	margin-top: 32px;
}

#large_upload_form {
	width: 600px;
}

.setupblock,
.tagcategoryblock {
	margin: 0.6rem 1rem 0.6rem 0;
	padding: 0.5rem 0.6rem 0.7rem;
	border: 1px solid var(--block-border);
	border-radius: 0.25rem;
}

.tagcategoryblock {
	display: inline-block;
	width: 18rem;
}

.tagcategoryblock table {
	width: 100%;
	border-spacing: 0;
}

.tagcategoryblock input,
.tagcategoryblock span {
	width: 100%;
	height: 100%;
}

.tagcategoryblock td:first-child {
	padding: 0.3rem 0.7rem 0.4rem 0;
	text-align: right;
	width: 40%;
}

.tagcategoryblock td:last-child {
	width: 60%;
}

.tagcategoryblock td:last-child span {
	padding: 0.24rem 0.7rem 0.5rem 0;
	display: block;
}

.tagcategoryblock button {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.2rem 0.6rem;
}

.comment .username {
	font-weight: bold;
	font-size: 1.5em;
}

* {
	margin: 0;
	padding: 0;
	font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

a {
	color: var(--link-default);
	text-decoration: none;
}

a:visited {
	color: var(--link-default);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover);
	text-decoration: none;
}

a:active {
	color: var(--link-default);
	text-decoration: none;
}

ul.flat-list {
	display: block;
	margin: 0;
	padding: 0;
}

ul.flat-list * {
	display: inline;
	text-align: left;
}

ul.flat-list li {
	margin: 0 1.3em 0 0;
	list-style-type: none;
	text-align: left;
	font-weight: bold;
}

ul.flat-list li a {
	font-weight: normal;
}

#tips {
	margin-left: 16px;
}

#blotter1 {
	position: relative;
	margin-right: 16px;
	margin-left: 16px;
	font-size: 90%;
}

#blotter2 {
	margin-right: 16px;
	margin-left: 16px;
	font-size: 90%;
}

#flash {
	background: #FDF5D9;
	border: 1px solid #FCEEC1;
	margin: 1rem 0;
	padding: 1rem;
	text-align: center;
	border-radius: 0.5rem;
}

ARTICLE {
	grid-column: 2;
	grid-row: 2;
	margin-right: 1rem;
}

ARTICLE section+section {
	margin-top: 1rem;
}

form+form {
	margin-top: 0.5rem;
}

#Imagemain h3 {
	display: none;
}

/* The @media (width <= 800px) block has been moved to the BOTTOM of this
   file so its rules cascade after the fork's desktop customisations
   (BODY.layout-grid { grid-template-columns: 14rem auto }, NAV { width: 14rem },
   etc.). Keeping it here would lose on equal-specificity source order and the
   mobile layout would be silently overridden — content got wedged into a
   14rem column with a wide empty stripe next to it. Don't move it back. */

/* ============================================================ */
/* Danbooru2topsearch fork customisations (keep in sync with    */
/* page.class.php / common_elements.theme.php / script.js etc.) */
/* ============================================================ */

/* --- Widen sidebar, trim left-side whitespace --- */

BODY.layout-grid {
	grid-template-columns: 14rem auto;
	grid-gap: 0 1rem;
}

NAV {
	width: 14rem;
	padding: 0 0.5rem 0.2rem 0.5rem;
}

HEADER #site-title {
	margin-left: 0.5rem;
}

HEADER ul#navbar,
HEADER ul#subnavbar {
	padding: 0 0.5rem;
}

BODY.layout-no-left ARTICLE {
	margin-left: 0.5rem;
}

/* --- Site-wide top search bar (lives as first child of ARTICLE) --- */

ARTICLE > #top-search {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	box-sizing: border-box;
	margin: 0 0 0.8rem;
}

ARTICLE > #top-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	border: 1px solid var(--block-border);
	border-radius: 4px;
	background: var(--page);
	color: var(--text);
}

ARTICLE > #top-search input[type="search"]:focus {
	outline: 2px solid var(--link-default);
	outline-offset: -1px;
}

ARTICLE > #top-search input[type="submit"] {
	flex: 0 0 auto;
	padding: 0 1.2rem;
	font-size: 0.95rem;
	border: 1px solid var(--block-border);
	border-radius: 4px;
	background: var(--page);
	color: var(--text);
	cursor: pointer;
}

ARTICLE > #top-search input[type="submit"]:hover {
	background: var(--link-default);
	color: #fff;
	border-color: var(--link-default);
}

@media (max-width: 600px) {
	ARTICLE > #top-search input[type="submit"] {
		padding: 0 0.75rem;
	}
}

/* --- Tag edit cloud: only visible in edit mode ---
 * tag_editcloud emits DIVs (tagcloud_set/unset/extra) inside a <table>,
 * which HTML parsers reparent out to be siblings of the table. So a
 * descendant selector doesn't match — use :has() on the body. */
body:has(.image_info.infomode-view) #tagcloud_set,
body:has(.image_info.infomode-view) #tagcloud_unset,
body:has(.image_info.infomode-view) #tagcloud_extra {
	display: none;
}

/* --- Fit the main post image to the viewport --- */

#main_image,
.shm-main-image {
	max-height: 90vh;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

video.shm-main-image,
#main_image[data-type="video"] {
	max-height: 90vh;
	max-width: 100%;
}

/* --- Sidebar Recent Comments widget --- */

#comment-list-recent .comment {
	margin: 0 0 0.8rem 0;
	padding: 0.35rem 0.5rem;
	font-size: 0.85rem;
	line-height: 1.35;
	border-radius: 3px;
	overflow-wrap: anywhere;
}

#comment-list-recent .comment + .comment {
	border-top: 1px solid var(--block-border);
}

#comment-list-recent .comment .username {
	font-size: 0.9rem;
	font-weight: 600;
}

#comment-list-recent .comment a[href*="/ip_ban/"],
#comment-list-recent .comment a[href*="/comment/delete"],
#comment-list-recent .comment a[href*="/comment/edit"],
#comment-list-recent .comment .shm-ip {
	font-size: 0.75rem;
	opacity: 0.55;
}

#comment-list-recent .comment .shm-ip {
	display: block;
	margin-top: 0.15rem;
}

#comment-list-recent > h3,
#comment-list-recent .blockbody > a.more {
	font-size: 0.9rem;
}

#comment-list-recent .blockbody > a.more {
	display: block;
	margin-top: 0.4rem;
	text-align: right;
}

#comment-list-recent .comment-snippet,
#comment-list-recent .comment-date {
	color: var(--text);
	text-decoration: none;
}

#comment-list-recent .comment-snippet:hover,
#comment-list-recent .comment-date:hover {
	text-decoration: underline;
	color: var(--link-default);
}

#comment-list-recent .comment-date {
	font-size: 0.75rem;
	opacity: 0.7;
}

/* --- Main-body comments (post view page) --- */

ARTICLE table.comment {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 0.6rem;
}

ARTICLE table.comment + table.comment {
	border-top: 1px solid var(--block-border);
}

ARTICLE table.comment td.meta {
	width: 11rem;
	padding: 0.5rem 0.8rem 0.5rem 0;
	vertical-align: top;
	font-size: 0.8rem;
	line-height: 1.4;
}

ARTICLE table.comment td.meta .username {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.15rem;
}

ARTICLE table.comment td.meta a[href*="/ip_ban/"],
ARTICLE table.comment td.meta a[href*="/comment/delete"],
ARTICLE table.comment td.meta a[href*="/comment/edit"],
ARTICLE table.comment td.meta .shm-ip {
	font-size: 0.75rem;
	opacity: 0.55;
}

ARTICLE table.comment td.meta .shm-ip {
	display: inline-block;
	margin-top: 0.1rem;
}

ARTICLE table.comment td[id^="c"] {
	padding: 0.5rem 0.2rem;
	vertical-align: top;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

ARTICLE table.comment td[id^="c"] blockquote,
ARTICLE table.comment td[id^="c"] .greentext {
	color: #6a9955;
	margin: 0 0 0.2rem;
}

/* --- /tags/map page: readable tag cloud --- */

/* The map page renders each tag as <a class="tag" style="margin: 0em 1em;
 * font-size: Xem"> — but the small-font tags end up with sub-em margins
 * that visually collapse into a wall of text. Enforce reasonable padding
 * and inline-block behaviour so they wrap cleanly and stay separated. */
ARTICLE a.tag {
	display: inline-block;
	margin: 0.15em 0.5em !important;
	padding: 0.05em 0.2em;
	line-height: 1.9;
}

/* --- Cap sidebar block body height so long tag lists don't blow up layout ---
 * Posts with 100+ tags were pushing the sidebar far past the image, making
 * the page scroll forever. Make any sidebar block body scroll internally
 * once it gets over 70% viewport height. */
NAV section .blockbody {
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Subtle scrollbar styling so it doesn't feel out of place */
NAV section .blockbody::-webkit-scrollbar {
	width: 6px;
}
NAV section .blockbody::-webkit-scrollbar-thumb {
	background: var(--block-border);
	border-radius: 3px;
}
NAV section .blockbody::-webkit-scrollbar-track {
	background: transparent;
}

/* --- Hide the inline "Tags" row from the post-info table ---
 * The tag_list fork puts this post's tags in the left sidebar as a
 * tag-per-row list, so the comma-separated inline copy in the post-info
 * table is redundant. Tag editing still works: the edit textarea lives
 * in the same TR and is reachable by toggling edit mode on the table
 * (it'll unhide because we only hide the table row's VIEW mode content).
 *
 * If you want editing back in the post info, delete this rule and either
 * hide the sidebar Tags block instead, or live with the duplication. */
.image_info.infomode-view tr[data-row="Tags"] {
	display: none;
}

/* --- Login-nudge navbar item (anonymous users only) --- */

HEADER ul#navbar li a.login-nudge {
	color: #ff8855;
	font-style: italic;
}

HEADER ul#navbar li a.login-nudge:hover {
	color: #ffaa77;
	text-decoration: underline;
}

/* --- Thumbnail favorite overlay button --- */

.shm-thumb.shm-thumb-link {
	position: relative;
	display: inline-block;
}

.shm-fav-btn {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 1.8rem;
	height: 1.8rem;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.15s ease, transform 0.1s ease, background 0.15s ease;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
}

.shm-thumb:hover .shm-fav-btn,
.shm-fav-btn:focus {
	opacity: 1;
	outline: none;
}

.shm-fav-btn:hover {
	background: rgba(0, 0, 0, 0.75);
	transform: scale(1.12);
}

.shm-fav-btn.faved {
	color: #ff3366;
	opacity: 1;
}

.shm-fav-btn:disabled {
	cursor: wait;
	opacity: 0.8;
}

.shm-fav-btn.error {
	background: #aa2222;
	color: #fff;
}

@media (hover: none) {
	.shm-fav-btn {
		opacity: 0.85;
	}
}

/* Main post image fav button — wrapper span + slightly larger heart */
.shm-fav-host {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.shm-fav-btn-main {
	width: 2.6rem;
	height: 2.6rem;
	top: 10px;
	left: 10px;
	font-size: 1.4rem;
	opacity: 0.55;
}

.shm-fav-host:hover .shm-fav-btn-main {
	opacity: 1;
}

/* ============================================================ */
/* Mobile layout — MUST stay at end of file so these rules win  */
/* source-order ties against the fork's desktop overrides       */
/* (NAV { width: 14rem }, BODY.layout-grid { grid-template-     */
/* columns: 14rem auto }, etc.). Otherwise phones stay stuck    */
/* with the desktop two-column grid and content gets wedged     */
/* into the 14rem nav column.                                   */
/* ============================================================ */
@media screen and (width <= 800px) {
	BODY.layout-grid {
		grid-template-columns: auto;
	}

	HEADER {
		grid-column: 1;
		grid-row: 1;
	}

	ARTICLE {
		grid-column: 1;
		grid-row: 2;
		margin: 0 16px;
	}

	NAV {
		grid-column: 1;
		grid-row: 3;
		margin: auto;
		width: auto;
		/* Base NAV (inherited from danbooru2) has padding: 0 1rem 0.2rem 2rem
		   — the 2rem left pad is what makes Copyrights / Tags blocks appear
		   shifted right of ARTICLE content on mobile. Match ARTICLE's 16px. */
		padding: 0 16px 0.2rem 16px;
	}

	/* Base NAV table is pinned to 15rem (~240px), which breaks on narrow
	   viewports: tag rows overflow horizontally and/or wrap awkwardly.
	   Let the tag_list table flow to whatever width its container allows. */
	NAV table {
		width: auto;
		max-width: 100%;
	}

	FOOTER {
		grid-column: 1;
		grid-row: 4;
	}

	.withleft {
		margin: 0;
	}

	#image-list .blockbody {
		margin: 0;
	}

	.shm-image-list {
		justify-content: center;
	}

	/* "Link to Post" block (link_image ext) renders a single-row <table>
	   with 4 <td> fieldsets side-by-side (BBCode / HTML / Markdown / Plain
	   Text). Each <td> contains readonly <input>s whose default intrinsic
	   width refuses to shrink, so on narrow viewports the whole table
	   overflows horizontally and forces the page wider than the screen.
	   Stack the four panels vertically and make inputs fill their parent. */
	#Link_to_Postmain table,
	#Link_to_Postmain tbody,
	#Link_to_Postmain tr {
		display: block;
		width: 100%;
	}
	#Link_to_Postmain tr > td {
		display: block;
		width: 100%;
		padding: 0;
	}
	#Link_to_Postmain fieldset {
		margin: 0.3rem 0;
	}
	#Link_to_Postmain input[type="text"] {
		width: 100%;
		box-sizing: border-box;
	}
}

/*# sourceMappingURL=danbooru2topsearch.1777066014.a790e152a965a9c32389e7d5b5f2ef6d.css.map */