.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;
}

#permission_table .allowed {
    color: #0F0;
}

#permission_table .denied {
    color: #F00;
}

#permission_table .inherited {
    opacity: 0.2;
}

#downtime #message, #downtime #login {
	text-align: center;
}
#downtime H3 {
	margin-top: 32px;
}
#downtime #login_table {
	margin: auto;
}


/* Commission pipeline banner */

.cp-banner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-box);
  background: var(--aw-surface);
}

.cp-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cp-kicker {
  font-family: var(--aw-font-badge);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aw-faint);
}

.cp-toggle {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-pill);
  background: transparent;
  color: var(--aw-faint);
  font-size: 0.72rem;
  line-height: 1.4;
  cursor: pointer;
}

.cp-toggle:hover {
  border-color: var(--aw-primary);
  color: var(--aw-chrome-text);
}

.cp-all {
  margin-left: auto;
  font-size: 0.78rem;
}

.cp-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cp-divider {
  margin-top: 0.15rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--aw-border);
  color: var(--aw-faint);
  font-family: var(--aw-font-badge);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.cp-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}

.cp-avatar IMG {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cp-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aw-tag-bg);
  color: var(--aw-faint);
  font-family: var(--aw-font-mono);
  font-size: 0.8rem;
}

.cp-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-title-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.cp-title {
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cp-note {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--aw-faint);
  font-size: 0.78rem;
}

.cp-status {
  flex: 0 0 auto;
  padding: 0.08rem 0.45rem;
  border-radius: var(--aw-r-pill);
  background: var(--aw-tag-bg);
  color: var(--aw-chrome-text);
  font-family: var(--aw-font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
}

/* Stage colours match the WIP variant bar. */
.cp-status-queued { background: #4b5563; }
.cp-status-roughs { background: #d15353; }
.cp-status-lineart { background: #dd6b24; }
.cp-status-colours { background: #fae98b; color: #1c2128; }
.cp-status-shading { background: #b7e36b; color: #1c2128; }
.cp-status-background { background: #2dd4bf; color: #10221a; }
.cp-status-bg-line { background: #2dd4bf; color: #10221a; }
.cp-status-bg-color { background: #2dd4bf; color: #10221a; }
.cp-status-alt { background: #c75bb1; }
.cp-status-finished { background: #4ade80; color: #10221a; }

.cp-queue {
  flex: 0 0 auto;
  padding: 0.08rem 0.4rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-pill);
  color: var(--aw-faint);
  font-family: var(--aw-font-mono);
  font-size: 0.66rem;
  line-height: 1.5;
}

.cp-more {
  align-self: flex-start;
  color: var(--aw-faint);
  font-size: 0.75rem;
}

.cp-banner.is-collapsed .cp-rows {
  display: none;
}

@media (max-width: 899.98px) {
  .cp-toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .cp-all {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Item Type Filter - the list-page widget and the post-page badge.
 *
 * Colour comes from --itf-colour, set inline per row / per badge from
 * ItemTypeFilter::TYPES (the values in static/itemtype_color_code.md).
 *
 * Every type starts included, so the visual weight is deliberately
 * *inverted* from the usual filter idiom: an included row is a quiet full-colour
 * filled icon, and an excluded one is a dimmed outline icon with a struck-out
 * label. The rest of the time you are reading "what is showing", and an
 * exception - a row that has been taken out - is the thing that should shout.
 *
 * Icons are CSS masks rather than <img>: the SVGs in static/ ship with a
 * hardcoded grey fill, so as images they would all read the same grey. A mask
 * throws the colour away and takes the row's own, and lets outline/filled swap
 * per state with no extra markup.
 *
 * The rail is 14rem wide on this theme, so labels truncate rather than wrap -
 * seven wrapped rows make the widget taller than the thumbnails it sits beside.
 */

/* --- the block headers ------------------------------------------------ */

/* Both blocks carry a real "Item Type" <h3> so a screen reader announces what
 * they are, but it is hidden visually: the arrwulf rail draws every block
 * header as a toggle with a chevron, and a heading above a column of seven
 * icons reads as a collapsible group that isn't one. Every row already carries
 * its own title/aria-label, so nothing is lost for sighted users.
 *
 * Screen-reader-only rather than display:none, for the same reason tag_order
 * keeps the page heading in the markup. */
#item-type-filter > .shm-toggler,
#item-type-badge > .shm-toggler {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.itf-widget {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.itf-row,
.itf-badge {
    /* PHP always sets --itf-colour inline; this is only a fallback for a row
       rendered before that attribute lands (and for the badge, which may have
       no type and therefore no colour of its own). Note it is a *text* colour:
       --aw-chrome is a dark background token on this theme, and using it here
       renders the row nearly invisible against --aw-surface-2. */
    --itf-colour: var(--aw-chrome-text, #b2ccd6);
    display: flex;
    border-radius: 3px;
}

.itf-badge {
    align-items: center;
    gap: 0.45rem;
    color: var(--aw-chrome-text, #d6ded6);
    text-decoration: none;
}

/* --- the widget rows ------------------------------------------------- */

/* The row is a wrapper for two links, not a link itself - see filter_row(). */
.itf-row {
    padding: 0;
    /* No gap: the toggle link supplies its own internal padding, and a gap here
       would open a dead strip between the two hit targets. */
    gap: 0;
    overflow: hidden;
}

.itf-toggle,
.itf-only {
    color: inherit;
    text-decoration: none;
}

.itf-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.2rem 0.3rem 0.4rem;
    /* Grow to fill the row so the glyph and the `<` control sit hard against
       the right edge of the rail rather than bunched up after the label. The
       min-width is what lets the label ellipsise instead of forcing the row
       wider than the rail. */
    flex: 1 1 auto;
    min-width: 0;
}

/* The `<` shortcut is a narrow, quiet target; it needs to be reachable but
   should not compete with the primary action for attention. */
.itf-only {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.35rem;
    align-self: stretch;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.45;
    transition: opacity 120ms ease, background-color 120ms ease;
}

/* The theme's global `A:hover` paints every link theme-green (--aw-primary-text,
   #9fe88d) and underlines it. On this widget that reads as a bug rather than a
   style: hovering a Sticker row flashes it the Commission colour. The row keeps
   its own colour on hover, and drops the underline - the background tint and the
   icon swap already carry the hover state on their own. */
.itf-toggle:hover,
.itf-only:hover {
    color: var(--itf-colour);
    text-decoration: none;
}

.itf-only:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--itf-colour) 20%, transparent);
}

/* --- selected is the resting state ----------------------------------- */

/* Every type starts selected, so "selected" has to be the quiet default and
 * "unselected" the thing that catches the eye. The reverse would put seven
 * full-colour rows on screen for someone who has not filtered anything. */
.itf-row.is-selected {
    color: var(--itf-colour);
}

.itf-row.is-selected .itf-toggle:hover {
    background: color-mix(in srgb, var(--itf-colour) 16%, transparent);
    box-shadow: inset 2px 0 0 var(--itf-colour);
}

/* Dimmed with opacity on a muted text colour, rather than by switching to a
   darker one - on this dark theme a darker colour drops below the block
   background and the row stops being readable at all. */
.itf-row.is-unselected {
    color: var(--aw-faint, #97a0ac);
    opacity: 0.6;
}

.itf-row.is-unselected .itf-label {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.itf-row.is-unselected .itf-toggle:hover {
    background: color-mix(in srgb, var(--itf-colour) 12%, transparent);
}

/* --- the +/- glyph ---------------------------------------------------- */

/* Minus means "click to remove this from the current results", plus means
   "click to bring it back" - so the glyph is the action, not the state. */
.itf-glyph {
    flex: 0 0 auto;
    width: 0.9rem;
    text-align: center;
    font-family: var(--aw-font-mono, monospace);
    font-weight: 700;
    opacity: 0.7;
}

.itf-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
}

/* --- icons ----------------------------------------------------------- */

.itf-icon {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Outline while hidden, filled while included. The pair differs only by
   filename, and the swap is what tells you at a glance which types the current
   results are made of. */
.itf-row .itf-icon {
    -webkit-mask-image: var(--itf-icon-outline);
    mask-image: var(--itf-icon-outline);
}

.itf-row.is-selected .itf-icon {
    -webkit-mask-image: var(--itf-icon-filled);
    mask-image: var(--itf-icon-filled);
}

/* --- the post-page badge --------------------------------------------- */

.itf-badge {
    padding: 0.45rem 0.55rem;
    /* The badge is the one place the type colour is allowed to be loud: it is
       the answer to "what is this", and it sits alone in its own block. */
    color: var(--itf-colour);
    background: color-mix(in srgb, var(--itf-colour) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--itf-colour) 45%, transparent);
}

.itf-badge .itf-icon {
    width: 1.25rem;
    height: 1.25rem;
    -webkit-mask-image: var(--itf-icon-filled);
    mask-image: var(--itf-icon-filled);
}

.itf-badge-label {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.itf-badge-note {
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

/* Unassigned posts: no type, so no colour, no filled icon, and no link - the
   dashed outline is the whole message. */
.itf-badge.is-unassigned {
    color: var(--aw-faint, #97a0ac);
    background: transparent;
    border-color: var(--aw-border, #333842);
    border-style: dashed;
    opacity: 0.75;
}

/* --- mobile touch targets (<900px) ---------------------------------- */
@media (max-width: 899.98px) {
    .itf-row {
        min-height: 44px;
        margin-bottom: 0.35rem;
        border-radius: var(--aw-r-field, 0.5rem);
    }

    .itf-toggle {
        padding: 0.65rem 0.6rem;
        font-size: 0.95rem;
        gap: 0.65rem;
    }

    .itf-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .itf-only {
        width: 44px;
        min-height: 44px;
        font-size: 1.1rem;
        opacity: 0.65;
    }

    .itf-badge {
        min-height: 44px;
        padding: 0.6rem 0.8rem;
    }
}
.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;
}

/* Saved Searches rail block */

.ss-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ss-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ss-label {
  font-family: var(--aw-font-badge);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aw-faint);
}

.ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.ss-link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ss-delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 0;
  border-radius: var(--aw-r-pill);
  background: var(--aw-tag-bg);
  color: var(--aw-faint);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.ss-delete:hover {
  background: var(--aw-warning);
  color: var(--aw-chrome);
}

.ss-save > SUMMARY {
  cursor: pointer;
  color: var(--aw-faint);
  font-size: 0.8rem;
  list-style: none;
}
.ss-save > SUMMARY::-webkit-details-marker { display: none; }
.ss-save > SUMMARY::before { content: "+ "; }
.ss-save[open] > SUMMARY::before { content: "− "; }
.ss-save > SUMMARY:hover { color: var(--aw-chrome-text); }

.ss-save > FORM {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.ss-name {
  flex: 1 1 auto;
  min-width: 0;
}

.ss-submit {
  flex: 0 0 auto;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-box);
  background: var(--aw-surface-2);
  color: var(--aw-chrome-text);
  font-size: 0.8rem;
  cursor: pointer;
}

.ss-submit:hover {
  border-color: var(--aw-primary);
}

@media (max-width: 899.98px) {
  .ss-delete,
  .ss-submit {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .ss-name {
    font-size: 1rem;
  }
}

.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;
}

.boned_color {
	color: red;
}
.boned_color:after {
	content: " 💀";
}

#filter-list{padding:revert; text-align:left;}
.thumb.filtered.filtered-active{display:none;}
.filter-inactive,.filter-inactive:hover{text-decoration: line-through;}
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;}

.blur IMG {
	filter: blur(5px);
	transition: all .3s ease-in;
}
.blur IMG:hover {
	filter: blur(0px);
}
/* Verified-account marker.
 *
 * arrwulf.com draws this as .verified-badge in RecentlyVerified.astro and
 * CommissionQueue.astro: a brand-coloured circle with a tick punched out of
 * it, placed *before* the name. Same shape here, same tokens - the arrwulf
 * theme's --aw-primary and --aw-on-accent are the board's spelling of the
 * main site's --color-primary and --color-primary-content, so a light/dark
 * flip carries the badge along with everything else. The literals are the
 * :root defaults, for installs running a theme that does not define the
 * tokens.
 *
 * margin-right rather than margin-left, because the badge leads the name -
 * which is also what the main site uses. vertical-align nudges the
 * inline-flex box off the text baseline, which otherwise sits it low.
 *
 * script.js builds byte-identical markup to the server-rendered badge in
 * theme.php - keep the two in step.
 */
.uv-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 0.25em;
  vertical-align: -0.15em;
  line-height: 0;
}
.uv-badge svg {
  width: 0.95em;
  height: 0.95em;
  display: block;
}
.uv-badge circle {
  fill: var(--aw-primary, #9fe88d);
}
.uv-badge path {
  stroke: var(--aw-on-accent, #091307);
}

/* Profile-page module. The tick already leads the text here too, so the
 * flex gap replaces the inline margin rather than doubling up with it. */
.uv-module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.uv-module--verified {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}
.uv-module--verified .uv-badge {
  margin-right: 0;
}
.uv-module p {
  margin: 0;
}
.uv-cta {
  display: inline-block;
}
.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;
}

/* Post public links — "Also posted on" chips in the post info box. */

.ppl-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.ppl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.2rem 0.55rem 0.2rem 0.2rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-pill);
  background: var(--aw-surface-2);
  color: var(--aw-chrome-text);
  text-decoration: none;
  line-height: 1.2;
}

.ppl-link:hover {
  border-color: var(--aw-primary);
  color: var(--aw-chrome-text);
  text-decoration: none;
}

.ppl-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.3rem;
  border-radius: var(--aw-r-pill);
  background: var(--aw-tag-bg);
  color: var(--aw-chrome-text);
  font-family: var(--aw-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ppl-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.82rem;
}

.ppl-icon {
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: var(--ppl-icon-url) center / contain no-repeat;
  mask: var(--ppl-icon-url) center / contain no-repeat;
}

.ppl-empty {
  color: var(--aw-faint);
  font-size: 0.82rem;
}

.ppl-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ppl-editor-wrap > SUMMARY {
  cursor: pointer;
  color: var(--aw-faint);
  font-size: 0.8rem;
  list-style: none;
}
.ppl-editor-wrap > SUMMARY::-webkit-details-marker { display: none; }
.ppl-editor-wrap > SUMMARY::before { content: "+ "; }
.ppl-editor-wrap[open] > SUMMARY::before { content: "− "; }
.ppl-editor-wrap > SUMMARY:hover { color: var(--aw-chrome-text); }

.ppl-editor-wrap > FORM {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

/* Platform badge colours. */
.ppl-link[data-platform="furaffinity"] .ppl-code { background: #2e5c8a; }
.ppl-link[data-platform="pixiv"] .ppl-code { background: #0096fa; }
.ppl-link[data-platform="bluesky"] .ppl-code { background: #0085ff; }
.ppl-link[data-platform="twitter"] .ppl-code { background: #1d9bf0; }
.ppl-link[data-platform="telegram"] .ppl-code { background: #229ed9; }
.ppl-link[data-platform="deviantart"] .ppl-code { background: #05cc47; color: #10221a; }
.ppl-link[data-platform="tumblr"] .ppl-code { background: #36465d; }
.ppl-link[data-platform="artstation"] .ppl-code { background: #13aff0; }
.ppl-link[data-platform="itch"] .ppl-code { background: #fa5c5c; }
.ppl-link[data-platform="youtube"] .ppl-code { background: #ff0000; }
.ppl-link[data-platform="instagram"] .ppl-code { background: #c13584; }
.ppl-link[data-platform="kofi"] .ppl-code { background: #ff5e5b; }
.ppl-link[data-platform="patreon"] .ppl-code { background: #ff424d; }
.ppl-link[data-platform="newgrounds"] .ppl-code { background: #f58f00; color: #241300; }
.ppl-link[data-platform="reddit"] .ppl-code { background: #ff4500; }
.ppl-link[data-platform="discord"] .ppl-code { background: #5865f2; }

.ppl-editor {
  width: 100%;
  min-height: 4.5rem;
  font-family: var(--aw-font-mono);
  font-size: 0.8rem;
}

@media (max-width: 899.98px) {
  .ppl-link {
    min-height: 2.75rem;
    padding-right: 0.7rem;
  }

  .ppl-code {
    min-width: 2rem;
    height: 2rem;
  }

  .ppl-icon {
    display: none;
  }
}

.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;
}


div.shm-relationships-alt-thumbs > .shm-alt-thumbs {
  padding-block: 1rem;
  display: inline-flex;
  gap: 0.8rem;
}

#relationships-alt-toggle,#relationships-alt-versions-toggle {
  padding-inline-start: 3rem;
}

.shm-alt-identifier-badge {
text-align: center;
font-size: 0.8em;
opacity: 0.8;
}


a.thumb.shm-thumb.shm-thumb-link > IMG {
  padding: 0px;
  border-inline: 0.3rem solid #a47b57;
  border-top: 0.3rem solid #a47b57;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  box-shadow: 0px 0px 0px transparent !important;
}

/* --- "Other versions" block on alt posts (appended; rules above untouched) --- */
/* NOTE: .shm-alt-identifier-badge is styled as a block under thumbnails, so the
   sentence uses a separate inline pill class to avoid breaking the layout. */
.shm-relationships-alt-versions-thumbs > .shm-main-thumbs,
.shm-relationships-alt-versions-thumbs > .shm-sibling-thumbs {
  padding-block: 1rem;
  display: inline-flex;
  gap: 0.8rem;
}

.shm-alt-identifier-inline {
  display: inline-block;
  padding: 0 6px;
  margin: 0 2px;
  border: 1px solid #a47b57;
  border-radius: 10px;
  background: #dfab7330;
  color: #fff3e0bd;
  font-family: monospace;
  font-weight: 600;
  font-size: 0.85em;
}

.shm-version-thumb {
  display: inline-block;
  margin: 2px;
  text-align: center;
  vertical-align: top;
}

.shm-version-caption {
  font-size: 0.8em;
  opacity: 0.8;
}

/* whole header rows act as toggle triggers */
.shm-relationships-alt-versions-header,
.shm-relationships-alt-header {
  display: block;
  cursor: pointer;
}

/* Horizontal scrolling containment on mobile */
.shm-relationships-alt-thumbs,
.shm-relationships-alt-versions-thumbs {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

div.shm-relationships-alt-thumbs > .shm-alt-thumbs,
.shm-relationships-alt-versions-thumbs > .shm-main-thumbs,
.shm-relationships-alt-versions-thumbs > .shm-sibling-thumbs {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
/* Text transcript: the [cc] launcher in the post float rail, the subtitle
 * overlay it opens over the image, the always-present <details> copy, and the
 * editor.
 *
 * Colours are the arrwulf theme's tokens with literal fallbacks, so the
 * extension still reads correctly on a theme that does not define them.
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * The launcher
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.pcc-launcher {
  display: inline-flex;
}

.pcc-toggle {
  /* !important is load-bearing, not lazy.
   *
   * themes/arrwulf/style.css has
   *   ASIDE.post-float-left SECTION > .blockbody BUTTON { width: 100% }
   * at specificity (0,2,3), which would stretch this pill to the full width
   * of the float rail. Escaping it with a class selector alone is not enough
   * - a bare .pcc-toggle is only (0,1,0), and the theme's stylesheet is
   * concatenated *after* every ext/*/style.css, so order favours the theme
   * too. The same reason relationships_wip_variants needs `top: auto
   * !important`. */
  width: auto !important;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--aw-border-strong, #4a515f);
  border-radius: var(--aw-r-pill, 9999px);
  background: var(--aw-panel, rgb(43 45 49 / 0.9));
  color: var(--aw-chrome-text, #b2ccd6);
  font-family: var(--aw-font-badge, "Roboto Condensed", "Segoe UI", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  cursor: pointer;
}

.pcc-toggle:hover {
  border-color: var(--aw-info, #28ebff);
  color: var(--aw-info-text, #28ebff);
}

.pcc-toggle[aria-expanded="true"] {
  background: var(--aw-info, #28ebff);
  border-color: var(--aw-info, #28ebff);
  color: var(--aw-on-accent, #091307);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Positioning context for the overlay
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Set by script.js on whichever [id$="_media"] section it reparented the
 * overlay into. The arrwulf theme already does this at style.css:988, but the
 * stock theme does not, and without a positioning context `bottom: 1rem`
 * would resolve against the viewport. */
.pcc-host {
  position: relative;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * The overlay
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.pcc-overlay {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 40;

  /* The container is centred; the text inside it is left-aligned. That is the
   * whole TV-subtitle shape - a caption box that tracks its own width, up to a
   * limit, rather than a full-width bar. */
  width: max-content;
  max-width: min(92%, 64rem);
  box-sizing: border-box;

  padding: 0;
  border: 1px solid var(--aw-hairline, rgb(255 255 255 / 0.08));
  border-radius: var(--aw-r-box, 0.75rem);
  background: rgb(0 0 0 / 0.75);
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.45);
}

.pcc-overlay[hidden] {
  display: none;
}

/* No media section to attach to (a mime type with no handler, say) - pin to
 * the viewport instead so the transcript is still readable. */
.pcc-overlay.pcc-orphan {
  position: fixed;
  bottom: 2rem;
}

/* Close button pinned to top right */
.pcc-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(255 255 255 / 0.75);
  cursor: pointer;
  z-index: 2;
  box-sizing: border-box;
}

.pcc-close:hover {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.pcc-text {
  padding: 0.85rem 2.2rem 0.5rem 1.1rem;
  font-family: var(--aw-font-body, "Segoe UI", Roboto, sans-serif);
  font-size: var(--pcc-font-size, 1rem);
  line-height: 1.45;
}

.pcc-line + .pcc-line {
  margin-top: 0.15rem;
}

.pcc-rule {
  margin: 0.5rem 0;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.4);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Overlay footer: Translate + Speak (left), Font size (center), Spacer (right)
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.pcc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.8rem 0.6rem;
  gap: 0.5rem;
}

.pcc-actions-left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 0;
}

.pcc-footer-spacer {
  flex: 1 1 0;
}

.pcc-translate {
  padding: 0.25rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--aw-r-pill, 9999px);
  background: transparent;
  color: rgb(255 255 255 / 0.85);
  font-family: var(--aw-font-badge, "Roboto Condensed", "Segoe UI", sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.pcc-translate:hover {
  border-color: var(--aw-info, #28ebff);
  color: var(--aw-info, #28ebff);
}

.pcc-speak {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0.25rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  background: transparent;
  color: rgb(255 255 255 / 0.85);
  cursor: pointer;
  box-sizing: border-box;
}

.pcc-speak:hover {
  border-color: var(--aw-info, #28ebff);
  color: var(--aw-info, #28ebff);
  background: rgb(255 255 255 / 0.12);
}

.pcc-speak.pcc-speaking {
  border-color: var(--aw-primary, #9fe88d);
  color: var(--aw-primary, #9fe88d);
  background: var(--aw-tint-primary, rgb(159 232 141 / 0.12));
}

.pcc-font-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: var(--aw-r-pill, 9999px);
  padding: 0.1rem 0.3rem;
}

.pcc-font-minus,
.pcc-font-plus,
.pcc-font-reset {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(255 255 255 / 0.8);
  cursor: pointer;
  box-sizing: border-box;
}

.pcc-font-minus:hover,
.pcc-font-plus:hover,
.pcc-font-reset:hover {
  background: rgb(255 255 255 / 0.18);
  color: #fff;
}

/* SVG icon sizing - bigger, bolder */
.pcc-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * The in-page copy
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* The overlay is display:none until opened, so on its own the transcript
 * would be unreachable to a screen reader and to Ctrl+F while closed. This is
 * the always-present copy that makes it work as alt text. */
.pcc-read {
  margin: 0.75rem 0 0;
  border: 1px solid var(--aw-border, #333842);
  border-radius: var(--aw-r-box, 0.75rem);
  background: var(--aw-surface, #242933);
}

.pcc-read-summary {
  padding: 0.5rem 0.85rem;
  color: var(--aw-chrome-text, #b2ccd6);
  font-family: var(--aw-font-badge, "Roboto Condensed", "Segoe UI", sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.pcc-read .pcc-text {
  padding: 0 0.85rem 0.75rem;
  color: var(--aw-content, #b2ccd6);
}

.pcc-read .pcc-rule {
  border-top-color: var(--aw-border-strong, #4a515f);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * The editor
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.pcc-admin {
  margin: 0.75rem 0 0;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--aw-border, #333842);
  border-radius: var(--aw-r-box, 0.75rem);
  background: var(--aw-surface, #242933);
}

.pcc-admin-title {
  margin-bottom: 0.4rem;
  color: var(--aw-chrome-text, #b2ccd6);
  font-family: var(--aw-font-badge, "Roboto Condensed", "Segoe UI", sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pcc-hint {
  margin-bottom: 0.5rem;
  color: var(--aw-faint, #97a0ac);
  font-size: 0.8rem;
}

.pcc-admin TEXTAREA,
#post-text-transcript-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--aw-border-strong, #4a515f);
  border-radius: var(--aw-r-field, 0.5rem);
  background: var(--aw-sunken, #333a45);
  color: var(--aw-content, #b2ccd6);
  font-family: var(--aw-font-mono, "Share Tech Mono", ui-monospace, monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.pcc-admin-actions {
  margin-top: 0.6rem;
}

.pcc-save {
  width: auto;
  padding: 0.4rem 1rem;
  border: 1px solid var(--aw-primary, #9fe88d);
  border-radius: var(--aw-r-pill, 9999px);
  background: var(--aw-tint-primary, rgb(159 232 141 / 0.12));
  color: var(--aw-primary-text, #9fe88d);
  font-family: var(--aw-font-badge, "Roboto Condensed", "Segoe UI", sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.pcc-save:hover {
  background: var(--aw-primary, #9fe88d);
  color: var(--aw-on-accent, #091307);
}

/* --- mobile (<900px) ------------------------------------------------- */
@media (max-width: 899.98px) {
  .pcc-overlay {
    width: 100%;
    max-width: 100%;
    border-radius: var(--aw-r-field, 0.5rem);
  }

  .pcc-footer {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .pcc-actions-left {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pcc-translate {
    min-height: 38px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
  }

  .pcc-speak {
    width: 38px;
    height: 38px;
  }

  .pcc-save {
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    font-size: 0.88rem;
  }
}

.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;
}

/* Tag Implications admin page */

.ti-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ti-table {
  width: 100%;
  border-collapse: collapse;
}

.ti-table TH,
.ti-table TD {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--aw-border);
  text-align: left;
  vertical-align: middle;
}

.ti-table TH {
  font-family: var(--aw-font-badge);
  font-size: 0.75rem;
  color: var(--aw-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ti-tag {
  font-family: var(--aw-font-mono);
  font-size: 0.85rem;
  color: var(--aw-chrome-text);
}

.ti-arrow {
  color: var(--aw-faint);
  padding: 0 0.35rem;
}

.ti-actions FORM {
  display: inline-flex;
  gap: 0.35rem;
  margin: 0;
}

.ti-actions BUTTON {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-pill);
  background: var(--aw-surface-2);
  color: var(--aw-chrome-text);
  font-size: 0.78rem;
  cursor: pointer;
}

.ti-actions BUTTON:hover {
  border-color: var(--aw-primary);
}

.ti-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.ti-input {
  flex: 1 1 12rem;
  min-width: 8rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-box);
  background: var(--aw-surface-2);
  color: var(--aw-chrome-text);
  font-family: var(--aw-font-mono);
  font-size: 0.85rem;
}

@media (max-width: 899.98px) {
  .ti-actions BUTTON,
  .ti-add BUTTON {
    min-height: 2.75rem;
  }

  .ti-input {
    font-size: 1rem;
  }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * WIP / variant picker
 *
 * A metro line drawn over the bottom-right corner of the post image. The
 * panel is a "post_float_left" block, so the arrwulf theme injects it into
 * the post's own *_media section (ArrwulfPage::media_block_or_plain()) and
 * initFloatFollow() in the theme's script.js trails it as you scroll - the
 * same treatment the score/favourites widget gets.
 *
 * The theme parks post_float_left panels at top-left and gives them no width
 * of their own, so everything below re-anchors that one panel to the bottom
 * right. The float-follow offsets `top`, so this keeps `top` as the animated
 * axis and pins itself to the bottom with a flex column - that way following
 * the scroll upwards still works.
 *
 * SPECIFICITY: every rule that styles a badge is scoped under
 * .wip-variant-viewer on purpose. The theme has
 *
 *     BUTTON:not(.btn) { background: var(--aw-surface-2); color: ...; }
 *
 * which is (0,1,1) and therefore beats a bare (0,1,0) class selector - the
 * per-stage colours below would silently lose and every station would come out
 * the same grey. Adding the wrapper takes them to (0,2,0) and they win again.
 * Note that the theme's rule still lands *later* in the bundle, so this is
 * carried by specificity alone.
 *
 * COLOUR: a station is neutral until it is the current one. The per-type rules
 * at the bottom set nothing but a custom property; only the active state reads
 * it. That is what keeps a post with eight stages readable - eight saturated
 * chips competing for attention instead of one.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* The theme re-anchors every post_float_left panel to the top-left and gives
   it no width of its own, so this re-anchors the one panel that holds a
   variant picker to the bottom right of the media box.
 *
 * `top: auto !important` is load-bearing. The theme's initFloatFollow() writes
 * an inline `top` on this aside every animation frame; that inline value beats
 * a plain stylesheet rule, so without the !important the aside ends up with
 * BOTH a top (from JS) and a bottom (here). A position:absolute box with top
 * and bottom both set and height:auto stretches to fill between them, and the
 * stretched box is what grew the scrollbar between the score widget and the
 * picker. Anchoring from the bottom alone also drops the float-follow for this
 * panel, which is what we want anyway - the panel rides the image rather than
 * the viewport. */
ASIDE.post-float-left:has(> .wip-variant-viewer) {
    top: auto !important;
    bottom: 1rem;
    left: auto;
    right: 1rem;
    height: auto;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    max-width: min(60%, 22rem);
    opacity: 1;
}

.wip-variant-viewer {
    position: relative;
    pointer-events: auto;
    user-select: none;
    /* One badge is always exactly this tall, which is what lets the track end
       flush with the first and last station dot instead of overshooting. */
    --wip-stop-h: 1.75rem;
    /* Fallback for a type with no colour of its own. */
    --wip-stop: #6b6b7b;
}

/* The image cross-fade. The script adds the class, swaps src once the new file
   has decoded, and removes it again - so this only ever covers the gap. */
#main_image.wip-variant-target {
    transition: opacity 200ms ease;
}

#main_image.wip-variant-fading {
    opacity: 0;
}

/* --- the line itself ---------------------------------------------------- */

.wip-variant-line {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    padding-left: 1.15rem;
}

/* The track. Ends flush with the centre of the first and last station dots,
   so it stops on "Finished: Main" rather than running on past it. */
.wip-variant-line::before {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: calc(var(--wip-stop-h) / 2);
    bottom: calc(var(--wip-stop-h) / 2);
    width: 3px;
    border-radius: 2px;
    background: rgb(255 255 255 / 22%);
}

/* --- the stations ------------------------------------------------------- */

.wip-variant-viewer .wip-variant-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4em;
    width: 100%;
    min-height: var(--wip-stop-h);
    padding: 0.1rem 0.7rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    /* Resting state: a neutral slab that stays legible over any artwork. */
    background: rgb(14 14 22 / 84%);
    color: rgb(255 255 255 / 82%);
    box-shadow: 0 1px 4px rgb(0 0 0 / 45%);
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

/* The station dot, sitting on the track just left of the pill.
 *
 * Always the stage colour, in both states - the dot is the indicator of
 * which versions exist at all, so dimming it with an unselected pill would
 * hide exactly the thing it exists to tell you. `inherit` would have made the
 * dot go neutral whenever its pill did. */
.wip-variant-viewer .wip-variant-badge::before {
    content: "";
    position: absolute;
    left: -1.03rem;
    top: 50%;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: -0.3rem;
    border-radius: 50%;
    background: var(--wip-stop);
    border: 2px solid rgb(12 12 18 / 90%);
}

/* Hover previews the stage colour too, desaturated just enough that it still
   reads as a preview rather than the current stop - the active one keeps the
   full colour and the white ring. */
.wip-variant-viewer .wip-variant-badge:hover {
    background: var(--wip-stop);
    color: #10101a;
    filter: saturate(0.7);
}

.wip-variant-viewer .wip-variant-badge:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* The current stop: the only chip on the line that takes its stage colour. A
   white ring keeps it distinct from the neutral ones behind it. */
.wip-variant-viewer .wip-variant-badge-active {
    background: var(--wip-stop);
    color: #10101a;
    box-shadow: 0 0 0 2px #fff, 0 2px 8px rgb(0 0 0 / 55%);
}

.wip-variant-label {
    font-weight: 700;
}

/* Names are user-supplied and can be long; clip rather than let one station
   dictate the width of the whole panel. */
.wip-variant-name {
    font-weight: 400;
    opacity: 0.7;
    letter-spacing: 0.02em;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7rem;
}

/* --- one colour per stage ----------------------------------------------- */

/* These set the token only. The pill stays neutral until it is active. */
.wip-variant-viewer .wip-variant-badge-roughs {
    --wip-stop: #d15353;
}

.wip-variant-viewer .wip-variant-badge-lineart {
    --wip-stop: #dd6b24;
}

.wip-variant-viewer .wip-variant-badge-colours {
    --wip-stop: #fae98b;
}

.wip-variant-viewer .wip-variant-badge-background {
    --wip-stop: #2dd4bf;
}

.wip-variant-viewer .wip-variant-badge-alt {
    --wip-stop: #c75bb1;
}

.wip-variant-viewer .wip-variant-badge-finished,
.wip-variant-viewer .wip-variant-badge-main {
    --wip-stop: #4ade80;
}

/* --- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #main_image.wip-variant-target {
        transition: none;
    }

    .wip-variant-viewer .wip-variant-badge {
        transition: none;
    }
}

/* --- narrow screens ----------------------------------------------------- */

/* On one column the image is full-bleed and short; a bottom-right overlay
   would cover most of it, so fall back to sitting under the image. */
@media (max-width: 900px) {
    ASIDE.post-float-left:has(> .wip-variant-viewer) {
        position: static;
        max-width: none;
        margin-top: 0.5rem;
        display: block;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Horizontal variant bar (mobile-only)
 *
 * A horizontal scrolling bar that shows variant buttons left-to-right.
 * Uses 3-letter codes by default, full names when active.
 * Only visible on mobile (<900px).
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.wip-variant-bar-container {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

.wip-variant-bar-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wip-variant-bar-horizontal::-webkit-scrollbar {
    display: none;
}

/* Mobile-only visibility */
@media (max-width: 899.98px) {
    .wip-variant-bar-container {
        display: flex;
    }
}

/* Horizontal bar badge styling */
.wip-variant-bar-horizontal .wip-variant-badge {
    flex-shrink: 0;
    min-height: 44px;
    min-width: 52px;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-radius: var(--aw-r-field, 0.5rem);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    /* Resting state: neutral pill - match drawer colors */
    background: var(--aw-surface-2, #16213e);
    color: var(--aw-chrome-text, #b2ccd6);
    box-shadow: none;
    transition: background 160ms ease, color 160ms ease, filter 160ms ease;
    /* Fallback for a type with no colour of its own */
    --wip-stop: #6b6b7b;
}

/* 3-letter code: visible by default */
.wip-variant-bar-horizontal .wip-variant-code {
    display: inline;
}

/* Full label: hidden by default, shown when active */
.wip-variant-bar-horizontal .wip-variant-full-label {
    display: none;
}

/* Active state: hide code, show full label */
.wip-variant-bar-horizontal .wip-variant-badge-active .wip-variant-code {
    display: none;
}

.wip-variant-bar-horizontal .wip-variant-badge-active .wip-variant-full-label {
    display: inline;
}

/* Hover state - show stage color */
.wip-variant-bar-horizontal .wip-variant-badge:hover {
    background: var(--wip-stop);
    color: #10101a;
}

.wip-variant-bar-horizontal .wip-variant-badge:focus-visible {
    outline: 2px solid var(--aw-accent, #a47b57);
    outline-offset: 2px;
}

/* Active state styling - match drawer colors */
.wip-variant-bar-horizontal .wip-variant-badge-active {
    background: var(--wip-stop);
    color: #10101a;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Count badge styling
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.wip-variant-count {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--aw-chrome-text);
    opacity: 0.6;
    padding: 0.25rem;
    margin-bottom: 0.25rem;
    text-transform: lowercase;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Variant name styling (under code)
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.wip-variant-bar-horizontal .wip-variant-name {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--aw-chrome-text);
    opacity: 0.7;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    height: auto;
    max-height: 2.2em;
    text-transform: none;
    letter-spacing: normal;
}

/* Hide name when badge is active (replaced by full label) */
.wip-variant-bar-horizontal .wip-variant-badge-active .wip-variant-name {
    display: none;
}

/* Variant name color on hover - make it visible against colored background */
.wip-variant-bar-horizontal .wip-variant-badge:hover .wip-variant-name {
    color: #10101a;
    opacity: 1;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Page dots styling
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.wip-variant-dots {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 0.5rem;
}

.wip-variant-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--wip-stop);
    background: transparent;
    flex-shrink: 0;
    pointer-events: none;
    transition: background 160ms ease;
}

.wip-variant-dot.wip-variant-dot-active {
    background: var(--wip-stop);
}

/* Many variants mode (8+ dots) */
.wip-variant-dots-many {
    gap: 4px;
}

.wip-variant-dots-many .wip-variant-dot {
    width: 5px;
    height: 5px;
}

/* Stage colors for horizontal bar - same as vertical viewer */
.wip-variant-bar-horizontal .wip-variant-badge-roughs {
    --wip-stop: #d15353;
}

.wip-variant-bar-horizontal .wip-variant-badge-lineart {
    --wip-stop: #dd6b24;
}

.wip-variant-bar-horizontal .wip-variant-badge-colours {
    --wip-stop: #fae98b;
}

.wip-variant-bar-horizontal .wip-variant-badge-background {
    --wip-stop: #2dd4bf;
}

.wip-variant-bar-horizontal .wip-variant-badge-alt {
    --wip-stop: #c75bb1;
}

.wip-variant-bar-horizontal .wip-variant-badge-finished,
.wip-variant-bar-horizontal .wip-variant-badge-main {
    --wip-stop: #4ade80;
}

/* Variant name styling - grey and smaller when shown */
.wip-variant-bar-horizontal .wip-variant-type-label {
    font-weight: 700;
}

.wip-variant-bar-horizontal .wip-variant-separator {
    opacity: 0.5;
}

.wip-variant-bar-horizontal .wip-variant-name-label {
    opacity: 0.7;
    font-weight: 400;
    font-size: 0.9em;
}

/* Remove uppercase transform when active on horizontal bar */
.wip-variant-bar-horizontal .wip-variant-badge-active .wip-variant-full-label,
.wip-variant-bar-horizontal .wip-variant-badge-active .wip-variant-full-label * {
    text-transform: none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Admin panel: upload form + manager.
 *
 * This one stays in the normal "main" column at position 9 - it is a form
 * with file inputs and a table, which wants room and a predictable place in
 * the page rather than floating over the artwork.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.wip-variant-admin {
    margin-block: 0.75rem;
    padding: 0 0.25rem;
}

.wip-variant-admin-title {
    font-size: 0.8em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-block: 0.6rem 0.35rem;
}

.wip-variant-admin-title:first-child {
    margin-block-start: 0;
}

.wip-variant-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 0.35rem;
    flex-wrap: wrap;
}

.wip-variant-field-label {
    min-width: 3.5em;
    font-size: 0.85em;
    opacity: 0.8;
}

.wip-variant-field input[type="text"],
.wip-variant-field select {
    flex: 1;
    min-width: 8rem;
}

.wip-variant-submit {
    padding: 0.3em 1em;
    border-radius: 4px;
    border: 1px solid var(--aw-accent, #a47b57);
    background: var(--aw-accent, #a47b57);
    color: var(--aw-bg, #10101a);
    font-weight: 700;
    cursor: pointer;
}

.wip-variant-manager {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85em;
}

.wip-variant-manager td {
    padding-block: 0.2rem;
    border-block-end: 1px solid color-mix(in srgb, var(--aw-line, #a47b57) 30%, transparent);
}

.wip-variant-manager-label {
    opacity: 0.9;
}

.wip-variant-manager-actions {
    text-align: end;
    white-space: nowrap;
}

/* --- inline edit form --------------------------------------------------- */

/* The edit form shares a cell with the static label. Only one shows at a time. */
.wip-variant-manager-labelcell form {
    display: none;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
}

.wip-variant-editing .wip-variant-manager-labelcell .wip-variant-manager-label {
    display: none;
}

.wip-variant-editing .wip-variant-manager-labelcell form {
    display: flex;
}

.wip-variant-edit {
    font: inherit;
    line-height: 1;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.wip-variant-edit:hover {
    border-color: var(--aw-accent, #a47b57);
}

.wip-variant-edit-type,
.wip-variant-edit-name {
    font: inherit;
    font-size: 0.85em;
    padding: 0.1rem 0.2rem;
    border: 1px solid var(--aw-border, #a47b57);
    border-radius: 3px;
    background: var(--aw-surface-2, #16213e);
    color: var(--aw-content, #fff3e0bd);
    max-width: 8rem;
}

.wip-variant-edit-name {
    flex: 1;
    min-width: 4rem;
}

.wip-variant-edit-save,
.wip-variant-edit-cancel {
    font: inherit;
    font-size: 0.85em;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    cursor: pointer;
}

.wip-variant-edit-save {
    border: 1px solid var(--aw-accent, #a47b57);
    background: var(--aw-accent, #a47b57);
    color: var(--aw-bg, #10101a);
    font-weight: 700;
}

.wip-variant-edit-cancel {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
}

.wip-variant-edit-cancel:hover {
    border-color: var(--aw-border, #a47b57);
}

/* The move/delete buttons are whole forms so they work without JS; the form
   itself must not add spacing. */
.wip-variant-manager-actions form {
    display: inline;
}

.wip-variant-move,
.wip-variant-delete {
    font: inherit;
    line-height: 1;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.wip-variant-move:hover {
    border-color: var(--aw-accent, #a47b57);
}

.wip-variant-delete:hover {
    border-color: #c0392b;
    color: #e74c3c;
}

.wip-variant-locked {
    opacity: 0.45;
    font-size: 0.9em;
}

.wip-variant-empty {
    opacity: 0.6;
    font-size: 0.85em;
    font-style: italic;
    margin: 0.35rem 0;
}

/* The Post Controls jump-to button. Matches the other .btn variants already in
   the theme, so it only needs to not look like a form submit. */
.wip-variant-jump {
    text-decoration: none;
    white-space: nowrap;
}

/* When arriving from the jump button, briefly outline the panel so the eye
   lands on the upload form rather than the top of the article. */
.wip-variant-admin:target {
    outline: 2px solid var(--aw-accent, #a47b57);
    outline-offset: 3px;
}
.added-tag{background:var(--added-background);}
.deleted-tag{background:var(--removed-background);text-decoration:line-through;}

/* ================================================================
   arrwulf.com theme for Shimmie2
   ------------------------------------------------------------
   THE ONE RULE: no colour literal appears in this file outside the
   :root block in section 1. Every rule below reads var(--aw-*).
   ext/aw_theme swaps those custom properties by flipping
   data-aw-theme on <html>, which is how the light palette works.
   Before committing a change, grep for hex/rgb/hsl and confirm every
   hit is either in :root, an #id selector, or url(../../../themes/arrwulf/#...).

   FILE MAP:

     1. :root - design tokens, then legacy Shimmie aliases
     2. base / reset
     3. page grid (the three columns)
     4. header
     5. rails + block cards
     6. article
     7. forms + buttons
     8. tables
     9. thumbnails, tags, ratings
    10. post-float-left
    11. footer
    12. theme-switch fade
    13. retargeting ext stylesheets that hardcode light-mode colours
    14. below the 900px breakpoint
    15. carried over from default_arr
   ================================================================ */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 1. TOKENS                                             #tokenref *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

:root {
  color-scheme: dark;

  /* -- Surfaces ------------------------------------------------- */
  --aw-page:      #20252e;  /* DaisyUI dim base-300 */
  --aw-surface:   #242933;  /* base-200 - rail cards */
  --aw-surface-2: #2a303c;  /* base-100 - article cards */
  /* A recessed well: lighter than the card on dark, darker on light. This one
     has to move with the theme - see the note in ext/aw_theme's light block,
     where keeping it dark put dark input text on a dark well. */
  --aw-sunken:    #333a45;

  /* Chrome stays dark on both themes, like the island cards on
     arrwulf.com - so the Permanent Marker wordmark needs no second
     treatment and the brand green reads at 11.6:1 either way. */
  --aw-chrome:       #1c2128;
  --aw-panel:        rgb(43 45 49 / 0.9);
  --aw-panel-80:     rgb(43 45 49 / 0.8);
  --aw-chrome-text:  #b2ccd6;
  --aw-chrome-faint: #97a0ac;

  /* -- Lines ---------------------------------------------------- */
  --aw-border:        #333842;
  --aw-border-strong: #4a515f;
  --aw-hairline:      rgb(255 255 255 / 0.08);

  /* -- Text, on the page surfaces ------------------------------- */
  --aw-content: #b2ccd6;
  --aw-muted:   #ccd2da;
  --aw-faint:   #97a0ac;

  /* -- Semantic fills: backgrounds behind --aw-on-accent ------- */
  --aw-primary:   #9fe88d;
  --aw-secondary: #ff7d5d;
  --aw-accent:    #c792e9;
  --aw-info:      #28ebff;
  --aw-success:   #62efbd;
  --aw-warning:   #efd057;
  --aw-error:     #ffae9b;

  /* -- Semantic text: the same hues, readable on the surfaces --- */
  --aw-primary-text:   #9fe88d;
  --aw-secondary-text: #ff7d5d;
  --aw-info-text:      #28ebff;
  --aw-success-text:   #62efbd;
  --aw-warning-text:   #efd057;
  --aw-error-text:     #ffae9b;

  /* Tag pills. tag_categories can set an inline colour on A.tag, so the
     background has to be a neutral that stays readable under either. */
  --aw-tag-bg: #2e3440;
  --aw-character-hover: #314c2b;

  /* Variant count badge backgrounds (80% opacity applied in rules) */
  --aw-alt-bg: rgb(46 107 131);
  --aw-var-bg: rgb(58 117 48);
  --aw-wip-bg: rgb(148 66 53);

  /* -- Derived --------------------------------------------------- */
  --aw-on-accent:    #091307;
  --aw-alt-accent:   var(--aw-secondary);
  --aw-alt-fill:     rgb(255 125 93 / 0.18);
  --aw-shadow:       rgb(0 0 0 / 0.35);
  --aw-tint-primary: rgb(159 232 141 / 0.12);
  --aw-tint-info:    rgb(40 235 255 / 0.12);
  --aw-tint-success: rgb(98 239 189 / 0.12);
  --aw-tint-warning: rgb(239 208 87 / 0.12);
  --aw-tint-error:   rgb(255 174 155 / 0.14);

  /* -- Shape and metrics ---------------------------------------- */
  --aw-r-field: 0.5rem;
  --aw-r-box:   0.75rem;
  --aw-r-pill:  9999px;

  --aw-pad:      1rem;
  --aw-gap:      1rem;
  --aw-nav-w:    15rem;
  --aw-aside-w:  14rem;
  --aw-header-h: 4rem;

  --aw-font-marker: 'Permanent Marker', cursive;
  --aw-font-script: 'Gochi Hand', cursive;
  --aw-font-badge:  'Roboto Condensed', 'Segoe UI', sans-serif;
  --aw-font-body:   'Segoe UI', Roboto, sans-serif;
  --aw-font-mono:   'Share Tech Mono', ui-monospace, monospace;

  font-family: var(--aw-font-body);
  font-size: 14px;
/*legacy shimmie code*/
  --page:            var(--aw-page);
  --text:            var(--aw-content);
  --header:          var(--aw-surface);
  --header-border:   var(--aw-border);
  --title:           var(--aw-surface);
  --title-border:    var(--aw-border);
  --block:           var(--aw-surface);
  --block-border:    var(--aw-border);
  --block-padding:   0.5rem;
  --border-radius:   var(--aw-r-box);
  --danger-color:    var(--aw-error-text);
  --danger-background: var(--aw-tint-error);

  /* ext/static_files declares these in a prefers-color-scheme:dark
     block, which is wrong for us - the board is dark regardless. */
  --flash-color:       var(--aw-surface-2);
  --flash-border:      var(--aw-border-strong);
  --blink-base-color:  rgb(159 232 141 / 0.1);
  --blink-blink-color: rgb(159 232 141 / 0.28);
  --added-background:   var(--aw-tint-success);
  --removed-background: var(--aw-tint-error);

  /* -- Mobile tokens -------------------------------------------- */
  --aw-dock-h: 3.5rem;
  --aw-safe-top: env(safe-area-inset-top, 0px);
  --aw-safe-bottom: env(safe-area-inset-bottom, 0px);
  --aw-safe-left: env(safe-area-inset-left, 0px);
  --aw-safe-right: env(safe-area-inset-right, 0px);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 2. BASE                                                       *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

* { box-sizing: border-box; }

BODY {
  margin: 0;
  background: var(--aw-page);
  color: var(--aw-content);
  -webkit-font-smoothing: antialiased;
}

/* Mobile base safeguards */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

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

H2, H3, H4 {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
}

/* Reset H3 padding to prevent font-size shifts from UA stylesheet */
h3 {
  padding: unset;
}

UL, OL { text-align: left; }

A {
  color: var(--aw-content);
  text-decoration: none;
}
A:hover { color: var(--aw-primary-text); text-decoration: underline; }
A:active { color: var(--aw-secondary-text); }

CODE, PRE {
  background: var(--aw-sunken);
  border-radius: var(--aw-r-field);
  font-family: var(--aw-font-mono);
  font-size: 0.88rem;
}
CODE { padding: 0.1rem 0.3rem; }
PRE { padding: 0.75rem; overflow-x: auto; }

SMALL { color: var(--aw-faint); }
HR { border: none; border-top: 1px solid var(--aw-border); }

::selection { background: var(--aw-tint-primary); }

:focus-visible {
  outline: 2px solid var(--aw-primary);
  outline-offset: 2px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 3. PAGE GRID                                                   *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

BODY.layout-grid {
  display: grid;
  grid-template-columns: var(--aw-nav-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--aw-gap);
  row-gap: var(--aw-gap);
  padding: 0 var(--aw-pad);
  min-height: 100vh;
}

HEADER.site-header { grid-column: 1 / 3; grid-row: 1; }
NAV.rail-left      { grid-column: 1; grid-row: 2; }
ARTICLE.article    { grid-column: 2; grid-row: 2; min-width: 0; }
FOOTER.site-footer { grid-column: 1 / 3; grid-row: 3; }

/* minmax(0, 1fr) on the middle track is deliberate: a plain 1fr lets a
   wide table inflate the column instead of scrolling inside it. */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 4. HEADER                                                      *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* bleed to the viewport edges while the content stays on the grid */
  margin-inline: calc(var(--aw-pad) * -1);
  padding-inline: var(--aw-pad);
  background: var(--aw-chrome);
  border-bottom: 1px solid var(--aw-border);
  color: var(--aw-chrome-text);
}

/* Brand on the left, then arrwulf.com's section links, then its CTA - the
   same single row as the main site's desktop header. The row wraps rather
   than dropping links on narrow viewports: brand keeps its natural width and
   its auto right margin absorbs the slack, so the menu and CTA stay packed
   against the right edge on every wrapped line. 

  - added background, margin-inline, padding-inline  
    bar styling on the header 

    arr 22 oct 2026  */
.header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.5rem;
  padding-top: 0.4rem;
  padding-bottom: 0.3rem;
  background: #29303b;                       
  margin-inline: calc(var(--aw-pad) * -1);   
  padding-inline: var(--aw-pad);             
}

.brand {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin-right: auto;
  line-height: 1;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand-sub {
  font-family: var(--aw-font-badge);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aw-chrome-faint);
  white-space: nowrap;
}

.brand-title {
  margin: 0;
  font-family: var(--aw-font-marker);
  font-size: 2.2rem;
  letter-spacing: 0.02em;
  color: var(--aw-chrome-text);
  /* A wordmark, not prose: one token with a dot in it, so never break it. */
  white-space: nowrap;
}
.brand:hover .brand-title { color: var(--aw-primary); }

/* Ghost buttons, matching the main site's section links. Wraps among itself
   rather than pushing the CTA onto a line of its own - so it has to be
   allowed to shrink, or its max-content width overflows on a phone. */
.header-menu {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  min-width: 0;
}

.header-menu-link {
  font-weight: 500;
  white-space: nowrap;
}
.header-menu-link:hover {
  background: var(--aw-hairline);
  color: var(--aw-chrome-text);
  text-decoration: none;
}

/* The section tabs and the account slot share one flex line: the tabs take
   the slack, the account sits at the far right of the header. */
.header-nav {
  display: flex;
  align-items: center;
  width: 100%;
  border-top: 1px solid var(--aw-hairline);
  background: var(--aw-chrome);
}

/* padding-inline-end: 1rem; removed
   added for desktop version username inline-end indent */
.header-tab-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
}

.header-tab {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--aw-r-field);
  font-family: var(--aw-font-badge);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--aw-chrome-text);
  background: none;
  border: 1px solid transparent;
}
.header-tab:hover { background: var(--aw-hairline); color: var(--aw-chrome-text); text-decoration: none; }
.header-tab.active {
  color: var(--aw-on-accent);
  background: var(--aw-panel);   /*arr */ 
}
.header-tab.active:hover {
  color: var(--aw-on-accent);
  background: var(--aw-panel);   /*arr */ 
}

/* The account slot: one element for the whole board, holding either the
   Telegram login widget or the logged-in user's avatar. On desktop it sits
   at the far right of the tab row; below the breakpoint the mobile rules
   lift it into the top bar instead. */
.header-account {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

/* The "small" Telegram widget is ~24px tall, so it fits within the
   existing nav padding without changing the nav height. */
.header-tg-login {
  display: flex;
  align-items: center;
}

/* Logged-in user indicator (avatar + username), at the same far-right spot.
   The 24px avatar fits within the existing nav padding without changing
   the nav height. */
.header-user {
  display: flex;
  align-items: center;
}
.header-user-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--aw-chrome-text);
}
.header-user-link:hover {
  text-decoration: none;
  color: var(--aw-primary);
}
.header-user-link img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.header-username {
  font-family: var(--aw-font-badge);
  font-size: 0.85rem;
  font-weight: 600;
}


.header-cta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
}

/* shadow-sm on the main site's primary CTA. */
.header-cta .btn-primary { box-shadow: 0 1px 2px var(--aw-shadow); }

.subnav {
  margin-inline: calc(var(--aw-pad) * -1);
  padding-inline: var(--aw-pad);
  border-top: 1px solid var(--aw-border);
  background: var(--aw-panel);
}
.subnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
}
.subnav-link {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--aw-r-pill);
  font-family: var(--aw-font-badge);
  font-size: 0.78rem;
  color: var(--aw-chrome-faint);
}
.subnav-link:hover { background: var(--aw-hairline); color: var(--aw-chrome-text); text-decoration: none; }
.subnav-link.active {
  color: var(--aw-primary);
  font-weight: 700;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 4.1 . Arr's nicer nav                                       *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.btn.btn-ghost.header-tab.active {
  margin-top: -6px;
  margin-block-end: -10px;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  padding-block-end: 10px;
  padding-top: 7px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 5. RAILS AND BLOCK CARDS                                       *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.rail {
  position: sticky;
  top: calc(var(--aw-header-h) + var(--aw-gap));
  align-self: start;
  max-height: calc(100vh - var(--aw-header-h) - var(--aw-gap) * 2);
  max-height: calc(100dvh - var(--aw-header-h) - var(--aw-gap) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rail-body { display: block; }
.rail-toggle { display: none; }
.rail-stack { display: flex; flex-direction: column; gap: var(--aw-gap); }

.rail-stack SECTION { margin: 0; }

/* Block card. Rails get base-200, the article gets base-100, which is
   the same split arrwulf.com makes between its rail cards and its
   content cards. */
SECTION > H3 {
  padding: 0.45rem 0.7rem;
  font-family: var(--aw-font-badge);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aw-primary-text);
  background: var(--aw-surface);
  border: 1px solid var(--aw-border);
  border-bottom: none;
  border-radius: var(--aw-r-box) var(--aw-r-box) 0 0;
}

SECTION > .blockbody {
  padding: 0.65rem;
  background: var(--aw-surface);
  border: 1px solid var(--aw-border);
  border-radius: 0 0 var(--aw-r-box) var(--aw-r-box);
}

ARTICLE > SECTION > H3,
ARTICLE > SECTION > .blockbody { background: var(--aw-surface-2); }

/* A block with no header renders a lone .blockbody, so it has to carry
   both corners itself. */
SECTION > :first-child { border-top-left-radius: var(--aw-r-box); border-top-right-radius: var(--aw-r-box); }
SECTION > :last-child { border-bottom-left-radius: var(--aw-r-box); border-bottom-right-radius: var(--aw-r-box); }

/* ext/static_files sets cursor:pointer on .shm-toggler already; this is
   just the affordance the chevron needs. */
H3.shm-toggler { position: relative; padding-right: 1.6rem; }
H3.shm-toggler::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.7rem;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.28rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.65;
}

.rail-stack TABLE { width: 100%; }
.rail-stack INPUT:not([type="checkbox"]):not([type="radio"]),
.rail-stack TEXTAREA,
.rail-stack SELECT { width: 100%; }

/* Tag list: upstream renders one row per tag with the cells forced
   inline. Keep that, just restyle the count. */
TABLE.tag_list { border-collapse: collapse; }
TABLE.tag_list > THEAD { display: none; }
TABLE.tag_list > TBODY > TR > TD { display: inline; padding: 0; }
TABLE.tag_list > TBODY > TR > TD::after { content: " "; }
.tag_info_link { display: none; }
.tag_count {
  padding: 0 0.3rem;
  border-radius: var(--aw-r-pill);
  background: var(--aw-tag-bg);
  font-family: var(--aw-font-mono);
  font-size: 0.72rem;
  color: var(--aw-faint);
}
.tag_count::before { content: ""; }
.tag_count::after { content: ""; }
.tag_count_cell { padding-left: 0.4rem !important; }

/* Tag refine links: `+` searches the tag, `−` excludes it. Hidden until the
   row is hovered/focused so the rail stays dense; the tag name itself is
   already a search link, which is what mobile relies on. */
.aw-tag-ars { display: none; margin-left: 0.2rem; }
TABLE.tag_list > TBODY > TR:hover .aw-tag-ars,
TABLE.tag_list > TBODY > TR:focus-within .aw-tag-ars { display: inline; }

.aw-tag-add,
.aw-tag-sub,
.aw-tag-remove,
.ars > A {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--aw-r-pill);
  background: var(--aw-tag-bg);
  font-family: var(--aw-font-mono);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--aw-faint);
  text-decoration: none;
}
.aw-tag-add:hover,
.aw-tag-sub:hover,
.aw-tag-remove:hover,
.ars > A:hover {
  background: var(--aw-primary);
  color: var(--aw-chrome-text);
  text-decoration: none;
}

/* A general tag used on exactly one post is usually a typo. */
TABLE.tag_list > TBODY > TR.aw-tag-low .tag_name_cell > A {
  color: var(--aw-warning-text);
}
TABLE.tag_list > TBODY > TR.aw-tag-low .tag_count {
  color: var(--aw-warning-text);
  background: color-mix(in srgb, var(--aw-warning) 16%, transparent);
}

@media (max-width: 899.98px) {
  .aw-tag-ars { display: none !important; }
}

.more::after { content: " >>>"; }

/* Per-block collapsible rails */
.rail-stack > details.rail-block {
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-box);
  background: var(--aw-surface);
  overflow: hidden;
}
.rail-block > summary.rail-block-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.7rem;
  font-family: var(--aw-font-badge);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aw-primary-text);
  background: var(--aw-surface);
  border-bottom: 1px solid var(--aw-border);
  cursor: pointer;
  list-style: none;
}
.rail-block > summary::-webkit-details-marker { display: none; }
.rail-block > summary::after {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.65;
}
.rail-block:not([open]) > summary::after {
  transform: rotate(-45deg) translate(-0.1rem, 0.1rem);
}
.rail-block > .rail-block-body {
  padding: 0.65rem;
}
.rail-block:not([open]) > .rail-block-body {
  display: none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 6. ARTICLE                                                     *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.page-heading {
  margin: 0 0 var(--aw-gap);
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--aw-border);
  font-family: var(--aw-font-badge);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
}

.page-subheading {
  margin: calc(var(--aw-gap) * -1 + 0.6rem) 0 var(--aw-gap);
  font-size: 0.8rem;
  color: var(--aw-faint);
}

ARTICLE > SECTION { margin-bottom: var(--aw-gap); }
ARTICLE > SECTION:last-child { margin-bottom: 0; }

ARTICLE TABLE.form { width: 100%; max-width: 34rem; }

#short-wiki-description > .blockbody { padding: 0.75rem; }
#short-wiki-description h2 { margin: 0 0 0.4em; font-size: 1.1rem; }
#short-wiki-description h2 A { font-size: 0.8em; }

#pagelist { margin-top: var(--aw-gap); }

#paginator { box-shadow: none; }
#paginator > .blockbody {
  padding: 0.5rem;
  background: none;
  border: none;
  text-align: center;
  font-family: var(--aw-font-badge);
}
#paginator B { color: var(--aw-primary-text); }

#flash {
  margin-bottom: var(--aw-gap);
  padding: 0;
  color: var(--aw-content);
  background: var(--aw-surface-2);
  border: 1px solid var(--aw-border-strong);
  border-left: 3px solid var(--aw-primary);
  border-radius: var(--aw-r-box);
}
#flash B { display: block; padding: 0.6rem 0.75rem; }

.comment {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--aw-border);
  text-align: left;
  overflow-wrap: anywhere;
}
.comment:first-child { padding-top: 0; }
.comment:last-child { padding-bottom: 0; border-bottom: none; }
.comment .info {
  color: var(--aw-content);
  background: var(--aw-surface-2);
  border-color: var(--aw-border);
  box-shadow: 0 4px 14px var(--aw-shadow);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 7. FORMS AND BUTTONS                                           *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--aw-r-field);
  font-family: var(--aw-font-badge);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--aw-primary);
  color: var(--aw-on-accent);
  font-weight: 600;
}
.btn-primary:hover { background: var(--aw-primary); color: var(--aw-on-accent); filter: brightness(1.08); }

.btn-ghost { background: none; color: inherit; }
.btn-ghost:hover { color: var(--aw-primary); }         /* arr change */
.btn-square { padding: 0.2rem; width: 1.9rem; }

.site-header .btn-ghost { color: var(--aw-chrome-text); }
.site-header .btn-primary { color: var(--aw-on-accent); }
.site-header .btn-ghost:hover { color: var(--aw-chrome-text); }

INPUT, TEXTAREA, SELECT, BUTTON {
  font-family: inherit;
  font-size: 0.92rem;
}

INPUT:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
TEXTAREA, SELECT {
  width: 100%;
  padding: 0.35rem 0.55rem;
  background: var(--aw-sunken);
  color: var(--aw-content);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-field);
}
INPUT::placeholder, TEXTAREA::placeholder { color: var(--aw-faint); }

INPUT:focus, TEXTAREA:focus, SELECT:focus {
  outline: none;
  border-color: var(--aw-primary);
  box-shadow: 0 0 0 2px var(--aw-tint-primary);
}

INPUT[type="checkbox"], INPUT[type="radio"] {
  accent-color: var(--aw-primary);
  width: 1rem;
  height: 1rem;
}

INPUT[type="submit"] {
  padding: 0.35rem 0.85rem;
  background: var(--aw-primary);
  color: var(--aw-on-accent);
  border: 1px solid transparent;
  border-radius: var(--aw-r-field);
  font-family: var(--aw-font-badge);
  font-weight: 600;
  cursor: pointer;
}
INPUT[type="submit"]:hover { filter: brightness(1.08); }

BUTTON:not(.btn) {
  padding: 0.25rem 0.6rem;
  background: var(--aw-surface-2);
  color: var(--aw-content);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-field);
  cursor: pointer;
}
BUTTON:not(.btn):hover { background: var(--aw-sunken); }
BUTTON:disabled, INPUT:disabled { opacity: 0.45; cursor: not-allowed; }

INPUT[type="color"] { padding: 0.1rem; height: 2rem; }

/* The UA's own file button is a light grey slab that ignores every token
   above, so it has to be restyled to match .btn or the upload card looks
   like it was pasted in from 2009. */
INPUT[type="file"] { padding: 0.3rem; }
INPUT[type="file"]::file-selector-button {
  margin-right: 0.5rem;
  padding: 0.25rem 0.65rem;
  background: var(--aw-surface-2);
  color: var(--aw-content);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-field);
  font-family: var(--aw-font-badge);
  font-size: 0.82rem;
  cursor: pointer;
}
INPUT[type="file"]::file-selector-button:hover {
  background: var(--aw-sunken);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 8. TABLES                                                      *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

TABLE { border-collapse: collapse; }
TH, TD { padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
THEAD TH {
  font-family: var(--aw-font-badge);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aw-faint);
  border-bottom: 1px solid var(--aw-border);
}

TABLE.zebra {
  width: 100%;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-box);
  overflow: hidden;
}
TABLE.zebra TD, TABLE.zebra TH { padding: 0.4rem 0.55rem; }
TABLE.zebra TBODY TR TD, TABLE.zebra TBODY TR TH {
  border-bottom: 1px solid var(--aw-hairline);
}
TABLE.zebra TFOOT TR:last-child TD, TABLE.zebra TFOOT TR:last-child TH { border-bottom: none; }
TABLE.zebra TR:nth-child(odd) { background: none; }
TABLE.zebra TR:nth-child(even) { background: var(--aw-hairline); }
TABLE.zebra TR:hover { background: var(--aw-tint-primary); }
TABLE.zebra INPUT:not([type="checkbox"]):not([type="radio"]),
TABLE.zebra SELECT,
TABLE.zebra TEXTAREA,
TABLE.zebra BUTTON { width: 100%; }

TABLE.form TBODY TR TH { text-align: right; color: var(--aw-muted); font-weight: 400; width: 1%; white-space: nowrap; }
TABLE.form TBODY TR TD { text-align: left; }
TABLE.form TBODY TR.header TD, TABLE.form TBODY TR.header TH { text-align: center; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 9. THUMBNAILS & GALLERY CARDS (Arrwulf Portfolio Style)        *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.shm-image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: var(--aw-gap);
  align-items: start;
  /* ext/index/style.css sets place-items:center, which shrink-wraps each
     card instead of filling its track. Stretch so every card is at least
     as wide as the track (min 250px) and the grid reads as a solid grid. */
  justify-items: stretch;
}

/* ext/index/style.css gives every thumb an 8px bottom margin and centres
   grid items. The gallery grid does its own spacing via `gap`, and the cards
   are blocks that must stay left-aligned, so both are overridden here rather
   than edited at the source. Theme CSS loads after the ext bundle, and the
   selectors have equal specificity, so this wins on order. */
.shm-image-list .thumb {
  margin-bottom: 0;
}

.gallery-card {
  background: var(--aw-surface);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-box);
  overflow: hidden;
  box-shadow: 0 4px 12px var(--aw-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gallery-card:hover {
  border-color: #9fe88d85;
  box-shadow: 0px 0px 6.5px 2px rgba(159, 232, 141, 0.4);
}

.gallery-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* No min-height here: aspect-ratio 4/3 would convert a 250px min-height
   into a 333px min-width contribution, which inflates each card's
   fit-content width past its grid track and breaks the layout (ext/index
   sets place-items:center, so cards shrink-to-fit instead of filling).
   The 250px minimum width the gallery wants comes from the grid tracks
   themselves: minmax(min(250px, 100%), 1fr). */
.aspect-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--aw-sunken);
  overflow: hidden;
}

.aspect-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

/* Rating badge: solid per-rating colour, literal codes (SFW/NSFM/NSFW/NSFL) */
.gallery-rating-badge {
  font-family: var(--aw-font-badge);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--aw-r-pill);
  color: var(--aw-on-accent);
  box-shadow: 0 2px 6px var(--aw-shadow);
  z-index: 2;
  pointer-events: none;
}
.rating-s { background: var(--aw-success); }
.rating-q { background: var(--aw-warning); }
.rating-e { background: var(--aw-error); }
.rating-h { background: var(--aw-accent); }
.rating-\? { background: var(--aw-faint); }

/* Stats bars: two rows below the picture in normal flow.
   Top bar: ALT/VAR/WIP variant counts (centered) - OVERLAID on thumbnail.
   Bottom bar: date (left), item type (center), rating (right). */
.gallery-stats {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  min-height: 1.6rem;
  background: var(--aw-surface-2);
  border-top: 1px solid var(--aw-hairline);
  pointer-events: auto;
}

.gallery-stats-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 1.2rem;
  justify-content: center;
  background: color-mix(in srgb, var(--aw-chrome) 70%, transparent);
  border-top: none;
  border-bottom: 1px solid color-mix(in srgb, var(--aw-hairline) 50%, transparent);
  z-index: 2;
  pointer-events: auto;
}

.gallery-stats-bottom {
  min-height: 1.6rem;
  justify-content: space-between;
}

/* Left: post date in MMM YYYY, solid background. Omitted entirely when the
   post has no recorded original date. */
.gallery-stat-score {
  background: var(--aw-chrome);
  padding: 0.3rem 0.45rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Center: variant count badges, each with its own semi-transparent
   background. Square corners and no group padding, so the pills read as
   flush colour blocks between the date and the rating. */
.gallery-stat-group {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: transparent;
  padding: 0;
  min-width: 0;
  flex-wrap: wrap;
}

.gallery-stat-alt {
  background: color-mix(in srgb, var(--aw-alt-bg) 80%, transparent);
  padding: 0.1rem 0.35rem;
  border-radius: 0;
}

.gallery-stat-var {
  background: color-mix(in srgb, var(--aw-var-bg) 80%, transparent);
  padding: 0.1rem 0.35rem;
  border-radius: 0;
}

.gallery-stat-wip {
  background: color-mix(in srgb, var(--aw-wip-bg) 80%, transparent);
  padding: 0.1rem 0.35rem;
  border-radius: 0;
}

/* Transcript badge [cc] - fixed width, before rating */
.gallery-stat-cc {
  background: color-mix(in srgb, var(--cc-colour) 20%, transparent);
  color: var(--cc-colour);
  padding: 0.1rem 0.35rem;
  border-radius: 0;
  font-family: var(--aw-font-badge);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.gallery-stat-cc .cc-icon {
  width: 0.9em;
  height: 0.9em;
  -webkit-mask-image: var(--cc-icon);
  mask-image: var(--cc-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--cc-colour);
}

/* Thumbnail bar cc icon: larger scale + margin (matches commission icons) */
.gallery-stats-bottom .gallery-stat-cc .cc-icon {
  scale: 2.5;
  margin: 0rem 0.2rem;
}

/* Notes badge: same treatment as the cc badge, warning-tinted. */
.gallery-stat-note {
  background: color-mix(in srgb, var(--aw-warning) 20%, transparent);
  color: var(--aw-warning);
  padding: 0.1rem 0.35rem;
  border-radius: 0;
  font-family: var(--aw-font-badge);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.gallery-stat-note .note-icon {
  width: 0.9em;
  height: 0.9em;
  -webkit-mask-image: var(--note-icon);
  mask-image: var(--note-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--aw-warning);
}

.gallery-stats-bottom .gallery-stat-note .note-icon {
  scale: 2.5;
  margin: 0rem 0.2rem;
}

/* Right: rating badge. Horizontal padding restored to its pre-compaction 0.6rem
   - moving the bar to Roboto Condensed freed enough width to afford it. The
   vertical padding stays at 0: the badge stretches to the bar's height via
   align-items: stretch, so it needs none to fill the row. */
.gallery-stats .gallery-rating-badge {
  position: static;
  border-radius: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  min-width: 0;
  pointer-events: auto;
}

.gallery-stat {
  /* Roboto Condensed rather than the mono face: it is self-hosted and
     preloaded, whereas Share Tech Mono is only declared. On a gallery page
     with dozens of bars that is the difference between text painting in the
     first frame and swapping in after. It is also narrower, which buys room
     for a third count pill on a 13rem card. */
  font-family: var(--aw-font-badge);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--aw-chrome-text);
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
}

/* Item type in gallery stats */
.gallery-stat-type {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--aw-font-badge);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--aw-chrome-text);
  padding: 0.1rem 0.35rem 0.1rem 0.5rem;
  border-radius: 0;
  background: color-mix(in srgb, var(--itf-colour) 20%, transparent);
  flex-grow: 1;
}
.gallery-stat-type .itf-icon {
  width: 0.9em;
  height: 0.9em;
  /* Longhands, not the `mask:` shorthand: the shorthand resets
     repeat/position/size, and this selector outranks the ext's .itf-icon
     rules that set them. */
  -webkit-mask-image: var(--itf-icon-outline);
  mask-image: var(--itf-icon-outline);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--itf-colour);
}

/* Thumbnail bar item type icon: larger scale + end margin */
.gallery-stats-bottom .gallery-stat-type .itf-icon {
  scale: 2.5;
  margin-inline-end: 0.5rem;
}

/* Character / kink / species tags row below thumbnail */
.gallery-characters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  padding: 0.35rem 0.45rem;
  background: var(--aw-surface);
  overflow: hidden;
}

.tag-character-badge {
  display: inline-block;
  font-family: var(--aw-font-badge);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aw-on-accent);
  background: var(--aw-warning);
  padding: 0.12rem 0.45rem;
  border-radius: var(--aw-r-pill);
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}
.tag-character-badge:hover {
  background: #61542e;
  color: var(--aw-chrome-text);
  text-decoration: none;
}

.tag-overflow-badge {
  cursor: default;
}

.tag-kink-badge {
  display: inline-block;
  font-family: var(--aw-font-badge);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aw-on-accent);
  background: #228822;
  padding: 0.12rem 0.45rem;
  border-radius: var(--aw-r-pill);
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}
.tag-kink-badge:hover {
  background: #1a6b1a;
  color: #fff;
  text-decoration: none;
}

.tag-species-badge {
  display: inline-block;
  font-family: var(--aw-font-badge);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aw-on-accent);
  background: #ed5d1f;
  padding: 0.12rem 0.45rem;
  border-radius: var(--aw-r-pill);
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}
.tag-species-badge:hover {
  background: #c44d18;
  color: #fff;
  text-decoration: none;
}

/* ext/relationships tags child/parent frames
.shm-thumb-has_child img { border-color: var(--aw-success) !important; }
.shm-thumb-has_parent img { border-color: var(--aw-warning) !important; }
.shm-thumb-has_child.shm-thumb-has_parent img { border-color: var(--aw-success) var(--aw-warning) var(--aw-warning) var(--aw-success) !important; }
*/

/* Tag pills. tag_categories sets an inline colour: on A.tag, so only
   the chrome here. */
A.tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-pill);
  background: var(--aw-tag-bg);
  font-family: var(--aw-font-badge);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
A.tag:hover { background: var(--aw-hairline); text-decoration: none; }

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

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 10. POST-FLOAT-LEFT                                            *
*                                                              *
* Upstream semantics, kept: post_float_left blocks are pinned to *
* the left edge of the article column rather than stacked into   *
* the nav rail. Anchored off the same custom properties as the    *
* grid, so it tracks the column if either width changes.         *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* The widget is injected into the *_media section (see ArrwulfPage::
   media_block_or_plain()), so it overlays the post media itself and scrolls
   with the page instead of pinning to the viewport. */
[id$="_media"] { position: relative; }
ASIDE.post-float-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: auto;
  max-height: none;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 30;
  opacity: 0.94;
  text-align: center;
}

/* An empty aside is still a 9rem fixed box sitting over the article,
   eating clicks. This is not a cosmetic rule. */
ASIDE.post-float-left:empty { display: none; }

/* Minimal overlay: no border, no shadow, no background on the panel; the
   background lives only on the score/favourites row (see
   .unified-score-favorites__stats below). */
ASIDE.post-float-left {
  padding: 0.5rem;
}
ASIDE.post-float-left SECTION { margin-bottom: 0.5rem; }
ASIDE.post-float-left SECTION:last-child { margin-bottom: 0; }
ASIDE.post-float-left SECTION > H3 {
  padding: 0.2rem 0.1rem;
  background: none;
  border: none;
  border-radius: 0;
}
ASIDE.post-float-left SECTION > .blockbody {
  padding: 0.3rem 0.1rem;
  background: none;
  border: none;
  border-radius: 0;
}
ASIDE.post-float-left SECTION > .blockbody INPUT:not([type="checkbox"]):not([type="radio"]),
ASIDE.post-float-left SECTION > .blockbody TEXTAREA,
ASIDE.post-float-left SECTION > .blockbody BUTTON,
ASIDE.post-float-left SECTION > .blockbody SELECT { width: 100%; }
/* ...but keep the score widget's icon bar compact. */
ASIDE.post-float-left SECTION > .blockbody .unified-score-favorites BUTTON { width: auto; }

.post_controls FORM:last-child { margin-bottom: 0; }
.post_controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.post_controls FORM { margin: 0; display: inline-flex; }

/* Center the post's main image; the unified score widget stays anchored
   top-left via its own absolute positioning. */
#handle_image_media > .blockbody,
#handle_image_media #shm_post_media { text-align: center; }
#handle_image_media .shm-main-image { display: inline-block; }

/* Constrain post view images & media to viewport with object-fit: contain */
[id$="_media"] .shm-main-image,
[id$="_media"] video,
[id$="_media"] audio {
  max-width: 100%;
  max-height: calc(100vh - var(--aw-header-h) - var(--aw-safe-top) - var(--aw-safe-bottom) - 2.5rem);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Unified score + favourites widget. The parent rail supplies its card; this
   component only owns the compact vertical control within it. */
.unified-score-favorites {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.unified-score-favorites FORM { margin: 0; display: inline-flex; }
.unified-score-favorites BUTTON {
  min-height: auto;
  padding: 0.15rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--aw-primary-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.unified-score-favorites__favourite {
  height: 100%;
}
.unified-score-favorites .usf-icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.unified-score-favorites .unified-score-favorites__fav-count {
  font-family: var(--aw-font-badge);
  font-weight: 700;
}
.unified-score-favorites BUTTON:hover:not(:disabled) {
  background: transparent;
}
.unified-score-favorites__vote--up:hover:not(:disabled),
.unified-score-favorites__vote--up[aria-pressed="true"] {
  color: #e5484d;
}
.unified-score-favorites__vote--down:hover:not(:disabled),
.unified-score-favorites__vote--down[aria-pressed="true"] {
  color: #3e63dd;
}
.unified-score-favorites__favourite:hover:not(:disabled),
.unified-score-favorites__favourite[aria-pressed="true"] {
  color: #e93d82;
}
.unified-score-favorites BUTTON:hover:not(:disabled) .usf-icon,
.unified-score-favorites BUTTON[aria-pressed="true"] .usf-icon {
  fill: currentColor;
  stroke: currentColor;
}
.unified-score-favorites BUTTON:focus-visible {
  outline: 2px solid var(--aw-alt-accent);
  outline-offset: 2px;
}
.unified-score-favorites BUTTON:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.unified-score-favorites__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--aw-page);
  border-radius: var(--aw-r-box);
  padding: 0.15rem 0.5rem;
}
.unified-score-favorites__score {
  display: inline-grid;
  place-items: center;
  font-family: var(--aw-font-badge);
  font-weight: 700;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 11. FOOTER                                                     *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.site-footer {
  padding: 0.55rem var(--aw-pad);
  background: var(--aw-panel);
  border-top: 1px solid var(--aw-hairline);
  font-size: 0.78rem;
  color: var(--aw-chrome-faint);
}
.footer-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.footer-links UL {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer A { color: var(--aw-chrome-text); }
.site-footer A:hover { color: var(--aw-primary); }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 12. THEME-SWITCH FADE                                          *
*                                                              *
* Mirrors global.css in the Astro project, including the 400ms    *
* duration in ext/aw_theme's bootstrap (the two must agree) and   *
* the !important, which is what stops any `transition: all` from  *
* snapping at 180ms and making the switch look broken.           *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media (prefers-reduced-motion: no-preference) {
  .theme-switching,
  .theme-switching *,
  .theme-switching *::before,
  .theme-switching *::after {
    transition:
      background-color 400ms ease,
      border-color 400ms ease,
      color 400ms ease,
      box-shadow 400ms ease,
      outline-color 400ms ease,
      text-decoration-color 400ms ease !important;
    transition-delay: 0s !important;
  }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 13. RETARGETING EXT STYLESHEETS                                *
*                                                              *
* These ship hardcoded light-mode colours and land in the bundle  *
* before this file, so plain theme rules are enough to win.      *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.autocomplete_completions {
  background: var(--aw-surface-2);
  color: var(--aw-content);
  border: 1px solid var(--aw-border-strong);
  border-radius: var(--aw-r-field);
  box-shadow: 0 8px 24px var(--aw-shadow);
}
.autocomplete_completions .selected { background: var(--aw-tint-primary); color: var(--aw-content); }

.bbcode BLOCKQUOTE {
  color: var(--aw-content);
  background: var(--aw-sunken);
  border-color: var(--aw-border);
}

.command_example code { border-color: var(--aw-border-strong); background: var(--aw-sunken); }

.tagcategoryblock {
  color: var(--aw-content);
  background: var(--aw-surface);
  border-color: var(--aw-border);
}

/* ext/relationships_alt paints every thumb link with a #a47b57 frame.
   Retarget the frame at the token where it is wanted (its own alt /
* version strips), then reset it in the main grid, where a brown frame
   would fight the rating badge. */
.shm-alt-thumbs a.thumb > IMG,
.shm-main-thumbs a.thumb > IMG,
.shm-sibling-thumbs a.thumb > IMG { border-color: var(--aw-alt-accent) !important; }
/*
.shm-image-list a.thumb.shm-thumb.shm-thumb-link > IMG {
  border: 1px solid var(--aw-border) !important;
  border-radius: var(--aw-r-box);
  box-shadow: 0 4px 12px var(--aw-shadow);
}
*/
.shm-alt-identifier-badge,
.shm-alt-identifier-inline {
  text-align: center;
  color: var(--aw-faint);
}

.shm-version-caption { color: var(--aw-faint); }

/* ext/relationships: parent/child strips.
   Upstream has no layout for these, so the full gallery cards stack as
   block-level elements. Mirror the alt strip: one horizontal row that scrolls
   itself instead of widening the article. */
#PostRelationshipsParent,
#PostRelationshipsChildren {
  margin-bottom: 0.6rem;
}

#PostRelationshipsParent .blockbody > SPAN:first-child,
#PostRelationshipsChildren .blockbody > SPAN:first-child {
  color: var(--aw-faint);
  font-size: 0.85rem;
}

.shm-relationships-parent-toggle,
.shm-relationships-child-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0 0.55rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-pill);
  background: var(--aw-surface-2);
  color: var(--aw-faint);
  font-size: 0.72rem;
  text-decoration: none;
}

.shm-relationships-parent-toggle:hover,
.shm-relationships-child-toggle:hover {
  border-color: var(--aw-primary);
  color: var(--aw-chrome-text);
  text-decoration: none;
}

.shm-relationships-parent-thumbs,
.shm-relationships-child-thumbs {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-block: 0.6rem;
}

.shm-parent-thumbs,
.shm-child-thumbs {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 100%;
}

.shm-parent-thumbs > .gallery-card,
.shm-child-thumbs > .gallery-card {
  flex: 0 0 180px;
  width: 180px;
  max-width: 180px;
}

/* Relationship frames: replace the extension's raw #cc0 / lime with theme
   tokens. The extension sets !important, so these have to as well. */
.shm-thumb-has_parent IMG { border-color: var(--aw-warning) !important; }
.shm-thumb-has_child IMG { border-color: var(--aw-primary) !important; }
.shm-thumb-has_child.shm-thumb-has_parent IMG {
  border-color: var(--aw-primary) var(--aw-warning) var(--aw-warning) var(--aw-primary) !important;
}

@media (max-width: 899.98px) {
  .shm-relationships-parent-toggle,
  .shm-relationships-child-toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* Pools rail block on the post view (ArrwulfPoolsTheme) */
.aw-pool-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.aw-pool-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--aw-border);
}

.aw-pool-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.aw-pool-title {
  font-weight: 600;
}

.aw-pool-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.aw-pool-prev,
.aw-pool-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-pill);
  background: var(--aw-surface-2);
  color: var(--aw-chrome-text);
  font-size: 0.75rem;
  text-decoration: none;
}

.aw-pool-prev:hover,
.aw-pool-next:hover {
  border-color: var(--aw-primary);
  color: var(--aw-chrome-text);
  text-decoration: none;
}

@media (max-width: 899.98px) {
  .aw-pool-prev,
  .aw-pool-next {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* Featured post rail block (ArrwulfFeaturedTheme) */
.aw-featured {
  margin: 0;
}

.aw-featured-link {
  display: block;
  overflow: hidden;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-box);
  background: var(--aw-surface-2);
  text-decoration: none;
}

.aw-featured-link:hover {
  border-color: var(--aw-primary);
  text-decoration: none;
}

.aw-featured-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 15%;
}

/* Downtime: standalone 503 page + admin rail notice (ArrwulfDowntimeTheme) */
.aw-downtime-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.aw-downtime {
  width: min(100%, 30rem);
}

.aw-downtime-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-r-box);
  background: var(--aw-surface);
  box-shadow: 0 12px 32px var(--aw-shadow);
}

.aw-downtime-kicker {
  margin: 0;
  color: var(--aw-primary-text);
  font-family: var(--aw-font-badge);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aw-downtime-title {
  margin: 0;
  font-size: 1.6rem;
}

.aw-downtime-message {
  margin: 0;
  color: var(--aw-chrome-text);
}

.aw-downtime-login {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--aw-border);
}

.aw-downtime-login LABEL {
  color: var(--aw-faint);
  font-size: 0.78rem;
}

.aw-downtime-login INPUT:not([type="submit"]) {
  width: 100%;
}

.aw-downtime-login INPUT[type="submit"] {
  margin-top: 0.3rem;
  align-self: flex-start;
}

.aw-downtime-foot {
  margin: 0;
  color: var(--aw-faint);
  font-size: 0.75rem;
}

.aw-downtime-notice {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--aw-warning);
  border-radius: var(--aw-r-box);
  background: color-mix(in srgb, var(--aw-warning) 14%, transparent);
  color: var(--aw-warning-text);
  font-size: 0.8rem;
}

.aw-downtime-notice-sub {
  color: var(--aw-faint);
  font-size: 0.72rem;
}

/* Hide unwanted blocks from left rail */
#Telegram_Loginleft,
#comment-list-recent,
.Uploadaccount_float_right,
#unknownleft {
  display: none !important;
}

/* Item type filter margin */
#item-type-filter {
  margin-block-start: -20px;
}

/* Item type filter: hide the toggle/summary (no collapse needed) */
#item-type-filter > .rail-block-toggle {
  display: none;
}
#item-type-filter > .rail-block-body {
  padding-top: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 14. BELOW 900px                                                *
*                                                              *
* One layout breakpoint, and it is a 3-way collapse rather than   *
* the upstream 2-way: 3 columns -> nav + article -> everything    *
* stacked with the two rails as closed disclosures. The summary  *
* is display:none above the breakpoint, so a rail is a column     *
* there and a button here.                                        *
*                                                              *
* KEEP IN STEP WITH script.js. That file has                      *
*   var AW_RAIL_BREAKPOINT = 900;                                 *
* and decides "wide" with `window.innerWidth >= 900`. So this     *
* query must fire *below* 900, which is why it says 899.98 and    *
* not a flat 900 — at exactly 900 the JS still treats the layout  *
* as wide and opens the rails, and `max-width: 900px` would       *
* collapse the CSS out from under it. Change one, change both.    *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

 /* Mobile-only elements hidden on desktop */
 .aw-bottom-dock,
 .aw-drawer-panel,
 .aw-drawer-backdrop,
 .aw-drawers-container {
   display: none;
 }

 @media (max-width: 899.98px) {
  BODY.layout-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    padding-bottom: calc(var(--aw-dock-h) + var(--aw-safe-bottom) + 1rem);
  }

  /* Prevent iOS auto-zoom on focus (inputs < 16px trigger zoom) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
  textarea,
  select {
    font-size: 16px;
  }

  HEADER.site-header    { grid-column: 1; grid-row: 1; }
  ARTICLE.article       { grid-column: 1; grid-row: 2; }
  ASIDE.post-float-left { grid-column: 1; grid-row: 3; display: none !important; }
  NAV.rail-left         { grid-column: 1; grid-row: 4; display: none !important; }
  FOOTER.site-footer    { grid-column: 1; grid-row: 5; }

  /* Hide media floating overlays on mobile - they are moved into the Info drawer */
  .wip-variant-viewer:not(#aw-drawer-info .wip-variant-viewer),
  .pcc-launcher:not(#aw-drawer-info .pcc-launcher),
  .pcc-overlay:not(#aw-drawer-info .pcc-overlay) {
    display: none !important;
  }

  .rail { position: static; max-height: none; overflow: visible; }

  .rail-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: var(--aw-gap);
    padding: 0.5rem 0.75rem;
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-r-box);
    font-family: var(--aw-font-badge);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aw-primary-text);
    cursor: pointer;
    list-style: none;
  }
  .rail-toggle::-webkit-details-marker { display: none; }
  .rail-toggle::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
    opacity: 0.7;
  }
  .rail:not([open]) .rail-toggle::after { transform: rotate(-45deg) translate(-0.1rem, 0.1rem); }
  .rail-body[open] > .rail-toggle { margin-bottom: 0; border-radius: var(--aw-r-box) var(--aw-r-box) 0 0; }
  .rail-body[open] > .rail-stack {
    margin-top: 0;
    padding: 0.65rem;
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-top: none;
    border-radius: 0 0 var(--aw-r-box) var(--aw-r-box);
  }
  .rail-body:not([open]) + * { display: none; }

  /* Header: compact brand on left, user widget on right */
  .brand-title { font-size: 1.5rem; }
  .brand-sub { display: none; }
  .header-menu { display: none !important; }
  .header-cta { display: none !important; }
  /* The tab row is gone below the breakpoint - the section links live in
     the drawer instead - but the account slot still has to be shown, so
     the nav drops its box rather than its contents. */
  .header-nav { display: contents; }
  .header-tab-list { display: none; }
  .subnav { display: none !important; }
  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding: 0.35rem 0.5rem;
  }
  /* The account slot leaves the tab row and rides the top bar instead.
     .site-header is position:sticky, so it is the containing block, and
     the slot is anchored to the TOP of it - the header is a stretched grid
     row, so its height changes from page to page and a percentage would
     drift. The box is as tall as the top bar (min-height 2.75rem) and
     centres its own content, which puts it in the middle of the bar.
     right:0.5rem lines it up with the top bar's own padding. */
  .header-account {
    position: absolute;
    top: 0;
    right: 0.5rem;
    height: 2.75rem;
  }
  .header-account .header-username { display: none; }
  .header-account .header-user-link img { width: 28px; height: 28px; }

  .shm-image-list {
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  }

  /* On mobile, character row limited to 3 pills max (handled in PHP),
     kink/species hidden to save space */
  .gallery-characters .tag-kink-badge,
  .gallery-characters .tag-species-badge,
  .gallery-characters .tag-overflow-badge { display: none; }

  /* Post controls on mobile */
  .post_controls {
    gap: 0.5rem;
    width: 100%;
  }
  .post_controls FORM,
  .post_controls A.btn,
  .post_controls BUTTON {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Fixed bottom dock */
  .aw-bottom-dock {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--aw-dock-h) + var(--aw-safe-bottom));
    padding-bottom: var(--aw-safe-bottom);
    background: var(--aw-chrome);
    border-top: 1px solid var(--aw-border);
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
  }
  .aw-dock-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    width: 100%;
  }
  .aw-dock-btn,
  .aw-dock-btn-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    background: none;
    border: none;
    color: var(--aw-chrome-faint);
    font-family: var(--aw-font-badge);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    padding: 0.35rem 0.2rem;
    min-height: 44px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .aw-dock-btn:hover,
  .aw-dock-btn:focus-visible,
  .aw-dock-btn-link:hover {
    color: var(--aw-chrome-text);
    text-decoration: none;
  }
  .aw-dock-btn.active,
  .aw-dock-btn-link.active {
    color: var(--aw-primary);
  }
  .aw-dock-label { line-height: 1; }

  /* Drawer backdrop */
  .aw-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .aw-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer panels */
  .aw-drawers-container { display: block; }
  .aw-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: calc(var(--aw-dock-h) + var(--aw-safe-bottom));
    width: min(88vw, 380px);
    background: var(--aw-surface);
    border-left: 1px solid var(--aw-border);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6);
    z-index: 70;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    visibility: hidden;
  }
  .aw-drawer-panel.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .aw-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--aw-chrome);
    border-bottom: 1px solid var(--aw-border);
    flex-shrink: 0;
  }
  .aw-drawer-title {
    margin: 0;
    font-family: var(--aw-font-badge);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aw-primary-text);
  }
  .aw-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -0.5rem -0.5rem -0.5rem 0;
    background: none;
    border: none;
    color: var(--aw-chrome-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--aw-r-field);
  }
  .aw-drawer-close:hover {
    background: var(--aw-hairline);
    color: var(--aw-primary);
  }
  .aw-drawer-back-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--aw-primary-text);
    font-family: var(--aw-font-badge);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    margin: -0.4rem 0 -0.4rem -0.5rem;
    border-radius: var(--aw-r-field);
  }
  .aw-drawer-back-btn:hover {
    background: var(--aw-hairline);
  }
  .aw-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
  }

  /* Info Drawer Sub-navigation Bar */
  .aw-info-subbar {
    background: var(--aw-surface-2);
    border-bottom: 1px solid var(--aw-border);
    padding: 0.4rem 0.5rem;
    flex-shrink: 0;
  }
  .aw-info-tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0.35rem;
  }
  .aw-info-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.3rem;
    background: var(--aw-chrome);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-r-field);
    color: var(--aw-chrome-faint);
    font-family: var(--aw-font-badge);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 38px;
    transition: all 0.15s ease;
  }
  .aw-info-tab:hover {
    color: var(--aw-chrome-text);
    background: var(--aw-sunken);
  }
  .aw-info-tab.is-active {
    background: var(--aw-panel);
    border-color: var(--aw-primary);
    color: var(--aw-primary-text);
  }
  .aw-info-tab-panel {
    display: none;
  }
  .aw-info-tab-panel.is-active {
    display: block;
  }
  .aw-info-panel-title {
    font-family: var(--aw-font-badge);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aw-primary-text);
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--aw-hairline);
  }
  .aw-info-slot {
    min-height: 60px;
  }
  .aw-info-placeholder {
    font-size: 0.82rem;
    color: var(--aw-faint);
    margin: 0.5rem 0;
    line-height: 1.4;
  }

  /* Info Drawer: Unified Score Widget horizontal layout inside drawer */
  #aw-drawer-info .unified-score-favorites {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--aw-surface-2);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-r-box);
  }
  #aw-drawer-info .unified-score-favorites BUTTON {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }
  #aw-drawer-info .unified-score-favorites .usf-icon {
    width: 1.5em;
    height: 1.5em;
  }

  /* Info Drawer: WIP Variants metro line */
  #aw-drawer-info .wip-variant-viewer {
    display: block !important;
    position: static;
    max-width: 100%;
    opacity: 1;
  }
  #aw-drawer-info .wip-variant-line {
    padding-left: 1.5rem;
  }

  /* Info Drawer: Transcript / CC */
  #aw-drawer-info .pcc-overlay {
    display: flex !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }

  /* Search drawer */
  .aw-drawer-search-box { margin-bottom: 1rem; }
  .aw-quick-search { display: flex; gap: 0.5rem; }
  .aw-quick-search input[type="search"] { flex: 1; min-width: 0; }
  .aw-drawer-block-title {
    font-family: var(--aw-font-badge);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aw-primary-text);
    margin-bottom: 0.5rem;
  }
  .aw-drawer-block-body { padding: 0.5rem 0; }

  /* Filters drawer */
  .aw-drawer-filters-wrap .rail-block,
  .aw-drawer-search-wrap .rail-block {
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-r-box);
    padding: 0.75rem;
    background: var(--aw-surface-2);
    margin-bottom: 0.75rem;
  }

  /* Menu drawer */
  .aw-drawer-menu-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .aw-drawer-user-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--aw-surface-2);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-r-box);
  }
  .aw-drawer-user-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--aw-content);
  }
  .aw-drawer-user-link img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }
  .aw-drawer-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .aw-drawer-username {
    font-family: var(--aw-font-badge);
    font-weight: 700;
    color: var(--aw-content);
  }
  .aw-drawer-userclass {
    font-size: 0.75rem;
    color: var(--aw-faint);
  }
  .aw-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .aw-drawer-section-title {
    font-family: var(--aw-font-badge);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--aw-faint);
    margin-bottom: 0.4rem;
    padding: 0 0.25rem;
  }
  .aw-drawer-nav-list,
  .aw-drawer-subnav-list,
  .aw-drawer-site-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .aw-drawer-nav-item,
  .aw-drawer-subnav-item,
  .aw-drawer-site-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background: var(--aw-surface-2);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-r-field);
    color: var(--aw-content);
    font-family: var(--aw-font-badge);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;
  }
  .aw-drawer-nav-item:hover,
  .aw-drawer-subnav-item:hover,
  .aw-drawer-site-link:hover {
    background: var(--aw-sunken);
    color: var(--aw-primary-text);
    text-decoration: none;
  }
  .aw-drawer-nav-item.active,
  .aw-drawer-subnav-item.active {
    background: var(--aw-panel);
    border-color: var(--aw-primary);
    color: var(--aw-on-accent);
  }
  .aw-drawer-site-link { color: var(--aw-chrome-text); }
  .aw-drawer-ext-icon { opacity: 0.6; font-size: 0.8rem; }
  .aw-drawer-cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .aw-drawer-btn-block {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    font-size: 0.9rem;
  }
  .aw-drawer-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--aw-border);
  }
  .aw-drawer-footer-links a {
    font-size: 0.8rem;
    color: var(--aw-faint);
    text-decoration: underline;
  }
  .aw-drawer-footer-links a:hover { color: var(--aw-primary); }

  /* Prevent body scroll when drawer is open */
  body.aw-drawer-open { overflow: hidden; }
}

@media (max-width: 560px) {
  .btn { font-size: 0.75rem; }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 15. CARRIED OVER FROM default_arr                              *
*                                                              *
* Both of these are deliberate current-theme behaviour, not      *
* accidents - login happens through the account rail, and the     *
* image info table is redundant next to the post page body.       *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#Loginleft { display: none !important; }

BODY:is([data-userclass="user"], [data-userclass="anonymous"]) #ImageInfo {
  display: none;
}

BODY:is([data-userclass="anonymous"]) #Popular_Tagsleft {
  display: none;
}

BODY:is([data-userclass="anonymous"]) #comment-list-recent {
  display: none;
}

/* Example of how to apply specific styles to specific thumbs for specific userclasses */
/*
BODY[data-userclass="anonymous"] .thumb[data-rating="e"] IMG {
  filter: blur(5px);
}
*/

/*# sourceMappingURL=arrwulf.1794162580.6616fdfc60a8da7b65310efd4519be1f.css.map */