/* ================================================================
   YayHooray Theme

   Color variables defined in :root — override to re-theme.
   Font sizes in rem (1rem = 16px).

   Rem reference:
   0.5rem = 8px  | 0.5625rem = 9px  | 0.625rem = 10px
   0.6875rem = 11px | 0.75rem = 12px | 0.875rem = 14px
   1rem = 16px | 1.25rem = 20px | 1.5rem = 24px
   ================================================================ */

/* ── Self-hosted Inter variable font ─────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Inter-roman-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Inter-roman-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Inter-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Inter-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ── Text Colors ───────────────────────────────────────────── */
    --color-text: #494949;
    --color-text-white: #ffffff;
    --color-text-black: #000000;
    --color-text-muted: #737373;
    --color-text-light: #7e7e7e;
    --color-text-medium: #888888;
    --color-text-dim: #666666;
    --color-text-soft: #999999;
    --color-text-faint: #767676;
    --color-text-subtle: #bbbbbb;
    --color-text-dark: #333333;
    --color-text-notify: #545454;
    --color-text-loading: #dddddd;
    --color-text-category: #777777;

    /* ── Link Colors ───────────────────────────────────────────── */
    --color-link: #494949;
    --color-link-hover-text: #ffffff;
    --color-link-hover-bg: #494949;
    --color-link-underline: rgba(0, 0, 0, 0.15);

    /* ── Page Background ───────────────────────────────────────── */
    --color-page-bg: #ffffff;

    /* ── Surface Colors ────────────────────────────────────────── */
    --color-surface: #f4f4f4;
    --color-surface-light: #f2f2f2;
    --color-surface-off: #f9f9f9;
    --color-surface-faint: #fafafa;
    --color-surface-warm: #fef6ea;
    --color-surface-worth: #faf6df;
    --color-surface-neutral: #eeeeee;

    /* ── Slop Detection ──────────────────────────────────────── */
    --color-slop-high: rgba(255, 182, 193, 0.35);
    --color-slop-border: #ff9eb5;
    --color-slop-text: #c44569;

    /* ── Dark Surfaces ─────────────────────────────────────────── */
    --color-dark: #545454;
    --color-dark-alt: #494949;
    --color-dark-hover: #474747;
    --color-dark-deep: #444444;
    --color-dark-deepest: #333333;
    --color-dark-pagination: #666666;

    /* ── Accent: Blue ──────────────────────────────────────────── */
    --color-blue: #00aeef;
    --color-blue-line: #ace1f9;
    --color-blue-bg: #e9f8fe;
    --color-blue-bg-light: #e6f7fe;
    --color-blue-thread: #f5fbfe;
    --color-blue-thread-alt: #f9fcfe;

    /* ── Accent: Green ─────────────────────────────────────────── */
    --color-green-bg: #edf5e1;
    --color-green-listing: #ebf4dd;

    /* ── Status: board + motion ─────────────────────── */
    /* The board and community-action widgets need four outcome states
       plus a "voted against" red. Every value is cut from the palette
       above, not invented: go rides the buddy green, hold pairs the
       warm surface with the [ARCHIVED] brown, live is the brand pink,
       against is the nsfw red family. Change a base token and these
       follow. */
    --color-status-go-bg: var(--color-green-bg);
    --color-status-go: #5b8a28;             /* strong cut of --color-green-bg's hue */
    --color-status-hold-bg: var(--color-surface-warm);
    --color-status-hold: #8b6e4e;           /* the [ARCHIVED] legacy brown */
    --color-status-live-bg: #fde7ef;        /* pale cut of --color-pink */
    --color-status-live: var(--color-pink);
    --color-status-against-bg: var(--color-red-bg);
    --color-status-against: var(--color-red-nsfw);
    --color-status-off-bg: var(--color-surface-neutral);
    --color-status-off: var(--color-text-category);


    /* ── Semantic accents (rebuild phase 1) ── */
    /* vote-down and danger-deep share a value today; themes may split them. */
    --color-vote-up: #4a8a4a;
    --color-vote-down: var(--color-danger-deep);
    --color-danger: #c0392b;
    --color-danger-bright: #e74c3c;
    --color-danger-deep: #8b2020;
    --color-pink-deep: #c50f4a;
    --color-timeout: #e6a817;
    --color-mention: #ea580c;
    --color-mention-strong: #c2410c;
    --color-mention-user-bg: rgba(59, 130, 246, 0.1);
    --color-mention-user-bg-hover: rgba(59, 130, 246, 0.2);
    --color-mention-bg: rgba(234, 88, 12, 0.12);
    --color-forensics: #8a6d0b;
    --color-forensics-border: #d4a017;
    --color-forensics-bg: #fdf6e3;
    --color-mod-only: #981d1f;
    --color-scrim: rgba(0, 0, 0, 0.5);
    --color-media-letterbox: #000000;

    /* Sidebar announcement box (was inline in leftcolumn.html) */
    --color-announce-bg: #d1e7dd;
    --color-announce-border: #2ecc71;
    --color-announce-text: #0f5132;

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-mono-pixel: 'Departure Mono', monospace;

    /* ── Shadows ── */
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.3);

    /* ── Accent: Mod ───────────────────────────────────────────── */
    --color-mod-bg: #2c2c2c;
    --color-mod-text: #e0e0e0;
    --color-mod-link: #b0c4de;
    --color-mod-border: #555555;
    --color-mod-count-bg: #e0e0e0;
    --color-mod-count-text: #2c2c2c;

    /* ── Accent: Pink / Red ────────────────────────────────────── */
    --color-pink: #ed135a;
    --color-pink-profile: #ff6de2;
    --color-red-bg: #ffeaea;
    --color-red-nsfw: #f06171;
    --color-red-toggle: #faa4a4;
    --color-red-error-dark: #cc0000;
    --color-red-error-label: #ff3333;
    --color-red-input-bg: #ffaaaa;

    /* ── Error ─────────────────────────────────────────────────── */
    --color-error: red;
    --color-error-bg: #ffffee;

    /* ── Border Colors ─────────────────────────────────────────── */
    --color-border: #cccccc;
    --color-border-light: #eeeeee;
    --color-border-medium: #bbbbbb;
    --color-border-dotted: #959595;
    --color-border-dark: #545454;
    --color-border-form: #999999;
    --color-border-deck: #f3f3f3;
    --color-border-separator: #dddddd;
    --color-border-control: #8a8a8a;
    --color-border-pending: #aaaaaa;
    --color-border-mobile-header: #dcd4c9;

    /* ── Spoiler ───────────────────────────────────────────────── */
    --color-spoiler-bg: #eeeeee;
    --color-spoiler-label-bg: red;
    --color-spoiler-label-text: white;

    /* ── Game ──────────────────────────────────────────────────── */
    --color-game-bg: #000000;
    --color-game-text: #00ff00;

    /* ── Mobile Pills ──────────────────────────────────────────── */
    --color-mobile-pill-bg: #444444;
    --color-mobile-pill-text: #eeeeee;
    --color-mobile-reload-bg: #333333;
    --color-mobile-reload-text: #dddddd;
}


/* ================================================================
   BASE THEME
   ================================================================ */

body {
    background-color: var(--color-page-bg);
    zoom: 1;
}

body,
div,
td,
input,
select,
textarea {
    color: var(--color-text);
}

a {
    text-decoration: 0.1px underline var(--color-link-underline);
    text-underline-offset: 2.5px;
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover-text);
    background-color: var(--color-link-hover-bg);
}

code {
    color: var(--color-text-black);
}

.dotted-bar {
    border-bottom: 0.1px dotted var(--color-border-dotted);
    margin-top: 14px;
}

.dotted-bar.replypad {
    margin: 0 0 14px 0;
}

.white,
a.white {
    color: var(--color-text-white);
}


/********************************************************
   MAIN LAYOUT
 ********************************************************/

#header {
    display: block;
    text-indent: -9999px;
    width: 87px;
    height: 23px;
    background: url(/img/yay-logo.svg) no-repeat;
    margin-bottom: 16px;
    background-size: 80px;
}

#mobile-menu-btn {
    display: none;
}

#middle {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 15px;
    padding: 15px 25px 0 25px;
}

#left-column {
    width: 200px;
}

#jumpdown {
    display: none;
}

.welcome {
    border: 0.1px dotted var(--color-border-dotted);
}

.welcome h4 {
    padding-bottom: 4px;
}

.welcome li {
    line-height: 1rem;
}

.welcome li a {
    text-transform: uppercase;
    font-size: 0.5rem !important;
}

.main_avatar {
    display: block;
    width: 16px;
    height: 16px;
    float: left;
    padding: 4px;
    margin: 2px 4px 0 0;
}

.lc-node {
    padding: 12px;
    margin-bottom: 12px;
}

.lc-node .error {
    color: var(--color-red-toggle);
}

#messaging {
    background: var(--color-surface-warm);
    font-size: 0.6875rem;
    line-height: 1;
}

#messaging img {
    margin-right: 5px;
}

#messaging ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#messaging li {
    margin: 4px 0;
}

#messaging .messages,
#messaging .notifications,
.applicants,
#messaging .invites {
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: 0 center;
    image-rendering: pixelated;
    padding-left: 22px;
    min-height: 18px;
    line-height: 18px;
}

#messaging .notifications {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext x='1' y='13' font-family='sans-serif' font-size='14' font-weight='bold' fill='%23999'%3E@%3C/text%3E%3C/svg%3E");
}

#messaging .messages {
    background-image: url("/img/iconmessage.svg");
}

.applicants {
    background-image: url('/img/registrations.svg');
}

.noapplicants {
    background-image: url('/img/registrations_no.svg');
}

#messaging .invites {
    background-image: url("/img/iconinvite.svg");
}

#messaging a:hover {
    background: var(--color-dark-deep);
}

/* @mention styling in posts */
a[data-mention="true"] {
    font-weight: 600;
    background: var(--color-mention-user-bg);
    padding: 0 3px;
    text-decoration: none;
}

a[data-mention="true"]:hover {
    background: var(--color-mention-user-bg-hover);
}

/* @here / @participated group mentions */
.group-mention {
    font-weight: 600;
    background: var(--color-mention-bg);
    color: var(--color-mention-strong);
    padding: 0 4px;
}

/* @here notice modal (chat) */
.yh-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}
.yh-modal-box {
    background: var(--color-page-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 22px 24px;
    max-width: 380px;
    margin: 20px;
    box-shadow: var(--shadow-modal);
    text-align: center;
}
.yh-modal-text {
    margin: 0 0 16px;
    line-height: 1.45;
}
.yh-modal-ok {
    font-weight: 600;
    padding: 7px 22px;
    border: 0;
    background: var(--color-mention);
    color: var(--color-text-white);
    cursor: pointer;
}
.yh-modal-ok:hover { background: var(--color-mention-strong); }

/* transient confirmation toast (chat) */
.yh-chat-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 12px);
    background: var(--color-page-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-mention);
    padding: 10px 16px;
    font-weight: 500;
    box-shadow: var(--shadow-panel);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 100000;
    max-width: 90vw;
}
.yh-chat-toast-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

#threads {
    background-color: var(--color-blue-bg);
}

#threads h3 {
    font-size: 2em;
}

#threads ul {
    padding-bottom: 4px;
    margin-top: 4px;
}

#threads li {
    margin: 1px 0;
}

#threads ul a {
    font-size: 0.625rem;
}

#thread-categories {
    border-bottom: 0.1px dotted var(--color-border-dotted);
    color: var(--color-text-category);
    font-size: 0.5625rem;
}

#thread-categories li a {
    text-transform: uppercase;
    margin-bottom: 4px;
    display: inline-block;
    min-height: 14px;
    line-height: 14px;
}

#special-threads {
    border-bottom: 0.1px dotted var(--color-border-dotted);
}

#special-threads a {
    color: var(--color-text-muted);
}

#special-threads li:first-child {
    display: none;
}

#toggle-html {
    font-size: 0.625rem;
}

hr {
    margin: 8px 0;
    border-top: 0.1px dotted var(--color-border-dotted);
    border-width: 0.1px 0 0 0;
}

#buddy-list {
    background-color: var(--color-green-bg);
}

#buddy-list h3 {
    font-size: 1rem;
}

#buddy-list p {
    font-size: 0.625rem;
    margin: 8px 0 4px 0;
}

#mod-menu {
    background-color: var(--color-mod-bg);
    color: var(--color-mod-text);
}

#mod-menu h3 {
    font-size: 1rem;
    color: var(--color-mod-text);
    margin: 0 0 6px;
}

#mod-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mod-menu li {
    margin: 3px 0;
    line-height: 1.3;
}

#mod-menu a {
    font-size: 0.625rem;
    color: var(--color-mod-link);
}

#mod-menu a:hover {
    color: var(--color-mod-text);
}

.mod-count {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    font-size: 0.5625rem;
    background: var(--color-mod-count-bg);
    color: var(--color-mod-count-text);
    padding: 1px 5px;
}


/*************************************************************
   MAIN THREADS PAGE
*************************************************************/

#main-title {
    border-bottom: 0.1px dotted var(--color-border-dotted);
    display: flex;
    align-items: baseline;
    min-height: 2.5rem;
    line-height: 2.5rem;
    /* 40px */
    margin-bottom: 15px;
    padding-top: 49px;
    cursor: default;
}

#main-title.changeling {
    cursor: pointer;
}

#main-title h3 {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    flex: 1;
}

/* ── Title inline editing ─────────────────────────────────── */
#main-title.editing {
    cursor: default;
    border-bottom-color: transparent;
}

#main-title.editing h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
}

#main-title .title-edit-input {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: inherit;
    color: var(--color-text);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-border-dotted);
    outline: none;
    padding: 0 0 2px 0;
    margin: 0;
    line-height: inherit;
    flex: 1;
    min-width: 0;
}

#main-title .title-edit-input:focus {
    border-bottom-color: var(--color-text);
}

#main-title .title-save,
#main-title .title-cancel {
    font-family: inherit;
    font-size: 0.35em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 8px;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    flex-shrink: 0;
}

#main-title .title-save:hover {
    background: var(--color-text);
    color: var(--color-text-white);
}

#main-title .title-cancel:hover {
    background: var(--color-surface-neutral);
}

#main-title .title-hint {
    font-size: 0.3em;
    font-weight: normal;
    color: var(--color-text-muted);
    flex-shrink: 0;
    letter-spacing: 0;
}

#post-thread {
    background-color: var(--color-blue-bg-light);
    float: right;
    padding: 4px 4px;
    text-transform: uppercase;
    font-size: 0.5625rem;
    /* 9px */
}

a:hover#post-thread {
    background-color: var(--color-dark-hover);
    color: var(--color-text-white);
    padding: 2px;
    margin: 2px;
}

.pagination {
    min-height: 29px;
    overflow: auto;
    border-bottom: 1px dotted var(--color-border-dotted);
}

.pagination.bottom {
    padding-top: 15px;
}

#thread-headers {
    padding: 0;
    overflow: auto;
    background: transparent;
    border-bottom: 1px solid var(--color-border-medium);
    margin: 0;
}

#thread-headers div {
    padding: 0px;
    color: var(--color-text-light);
    font-size: 0.5625rem;
    /* 9px */
    line-height: 1.6875rem;
    /* 27px */
}

.subject,
.username {
    line-height: 1rem;
    /* 16px */
    font-size: 0.75rem;
    /* 12px */
    font-weight: bold;
}

.thread .one .subject {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.thread .one .subject-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    padding-bottom: 2px;
}

.subject-text img[src*="/pinkies/"],
#main-title h3 img[src*="/pinkies/"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

/* All pinkies render crisp/pixelated to keep the retro look — covers
   in-post, the editor preview, the picker menu, and any other surface.
   The 4x animated rasters were getting browser-smoothed when downscaled
   to 27px, washing out the pixel art. Harmless on the SVG variants. */
img[src*="/img/pinkies/"],
/* User-uploaded animated GIFs are typically used as reaction-pinkies
   (small inline pixel-art). Pixelate just the .gif uploads — leaves
   .jpg/.png photo uploads alone since pixelated downscaling looks
   harsh on real photos. */
img[src*="/img/userimages/"][src$=".gif"],
img[src*="/userimages/"][src$=".gif"] {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.thread .one .naughty-tag,
.thread .one .legacy-tag,
.thread .one .end-link {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 4px;
}

.thread .one .category {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#thread .username {
    font-weight: normal;
}

.time,
.category {
    font-size: 0.5625rem;
    /* 9px */
    color: var(--color-text-muted);
}

.category a {
    text-decoration: none;
    font-size: 0.5rem;
    /* 8px */
}

.blueline {
    background-color: var(--color-blue-line);
    height: 1px;
    overflow: hidden;
    clear: both;
}

.favourite {
    display: block;
    float: left;
    width: 12px;
    height: 16px;
    background: url(../img/b-add.svg);
    margin-right: 5px;
}

.hide-thread {
    display: block;
    float: left;
    width: 12px;
    height: 16px;
    background: url(../img/hide-thread.svg);
}

.favourite.added {
    background: url(../img/b-remove.svg) center no-repeat;
}

#main-title .favourite,
#main-title .favourite.added,
#main-title .hide-thread,
#main-title .hide-thread.added {
    margin: 0 0 0 12px;
    flex-shrink: 0;
}

a.favourite:hover,
a.favourite.added:hover {
    background-color: inherit;
}


/*************************************************************
   New Thread
*************************************************************/

.inp label,
.biglabel {
    display: block;
    font-size: 1rem;
    /* 16px */
    margin-top: 12px;
    font-weight: bold;
    margin-bottom: 6px;
}

.inp {
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 0.1px dotted var(--color-border-dotted);
}

#subject {
    width: 350px;
    padding: 4px;
    font-size: 1rem;
    /* 16px */
}

.inp .cbx {
    height: 1.5rem;
    /* 24px */
    line-height: 1.5rem;
    /* 24px */
    margin-bottom: 2px;
}

.inp .cbx label {
    float: left;
    height: 20px;
    margin-top: 0;
}

.inp .cbx input {
    position: relative;
    top: 2px;
    left: 4px;
}

#category-selector {
    height: 20px;
}

#category-selector input {
    float: left;
    margin: 1px 6px 0 0;
    font-weight: 500;
    font-size: 0.75rem;
    /* 12px */
}

#category-selector label {
    float: left;
    margin: 0 20px 0 0px;
    font-weight: 500;
    font-size: 0.75rem;
    /* 12px */
}


/*************************************************************
   THREAD LISTING
*************************************************************/

.main-pagination {
    float: left;
    padding: 4px 0 0 4px;
}

.main-pagination div,
.main-pagination a {
    font-size: 0.625rem;
    /* 10px */
    color: var(--color-text);
    border: 1px solid var(--color-border);
    display: block;
    float: left;
    line-height: 1;
    margin-right: 5px;
    padding: 3px 6px;
    text-align: center;
    text-decoration: none;
}

.paging-text {
    font-size: 0.625rem;
    /* 10px */
    color: var(--color-text-light);
    padding: 4px 0;
    margin-left: -2px;
}

.paging-text a {
    color: var(--color-text-light);
}

.paging-text a:hover {
    color: var(--color-text-white);
    background-color: var(--color-text-light);
}

.main-pagination div {
    background-color: var(--color-link-hover-bg);
    color: var(--color-link-hover-text);
    border-color: var(--color-link-hover-bg);
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}

#top {
    padding: 20px 0 2px 0;
    margin: 0 0 10px 0;
}

#buddy-list div span {
    font-size: 0.6875rem;
}

#buddy-listings {
    display: inline-block;
    margin-top: 8px;
}

#right-column {
    margin-top: 25px;
    padding-bottom: 50px;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

#thread .pagination.bottom {
    border: 0;
}

.pagination.top {
    margin-bottom: 2px;
    border-top: 0;
}

.pagination ul li {
    display: inline;
    background: var(--color-surface-neutral);
    padding: 2px 3px;
}

.pagination span {
    display: block;
    float: left;
    margin-right: 5px;
}

.thread {
    background-color: var(--color-blue-thread);
    margin: 1px 0;
    padding: 3px 0;
    overflow: hidden;
}

.thread.alt {
    background-color: var(--color-blue-thread-alt);
}

.thread.buddy,
.thread.mythread {
    background-color: var(--color-green-bg);
}

.thread.enemy {
    background-color: var(--color-red-bg);
    display: none;
}

.thread.nsfw {
    background-image: url(../img/naughty.svg);
    background-position: 6px 8px;
    background-repeat: no-repeat;
}

.thread.closed * {
    color: var(--color-text-soft);
}

.thread.closed .subject-text {
    text-decoration: line-through;
    color: var(--color-text-soft);
}

.thread.nsfw .subject-text a,
.thread.nsfw .naughty-tag {
    color: var(--color-red-nsfw);
}

.thread.nsfw .naughty-tag {
    font-size: 0.6875rem;
    /* 11px */
}

.thread.nsfw .subject-text:hover {
    color: var(--color-red-nsfw);
}

.thread.nsfw .one div {
    padding-left: 35px;
}

/* Legacy concealed — thread listing row (icon + coloring like nsfw) */
.thread.legacy {
    background-image: url(../img/legacy.svg);
    background-position: 6px 8px;
    background-repeat: no-repeat;
}

.thread.legacy .subject-text a,
.thread.legacy .legacy-tag {
    color: var(--color-status-hold);
}

.thread.legacy .legacy-tag {
    font-size: 0.6875rem;
}

.thread.legacy .one div {
    padding-left: 35px;
}

/* Legacy tag (thread detail title) */
.legacy-tag {
    font-size: 0.6875rem;
    color: var(--color-status-hold);
    margin-left: 4px;
}

/* Legacy concealed comments */
.legacy-content {
    background: var(--color-surface-neutral);
    border: 1px solid var(--color-border);
    padding: 12px 12px 12px 42px;
    background-image: url(../img/pinkies/ai/ghost.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 22px 22px;
}

.legacy-content em {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* FAQ page */
.faq-toc ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.faq-toc li {
    margin: 4px 0;
}

.faq-toc a {
    font-size: 0.875rem;
}

.faq-section {
    margin: 16px 0;
    scroll-margin-top: 20px;
}

.faq-section h4 {
    margin: 0 0 8px 0;
}

.faq-section p {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 6px 0;
}

.user-information {
    image-rendering: pixelated;
}

/* Moderation Log */
.modlog-content {
    padding: 10px 0;
}

.modlog-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.modlog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.modlog-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid var(--color-border);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.modlog-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border-separator);
    vertical-align: top;
}

.modlog-time {
    white-space: nowrap;
    color: var(--color-text-muted);
    width: 100px;
}

.modlog-mod {
    font-weight: bold;
}

/* Pinkie face on the sanction / governance rows — see renderGenerator
   pinkieByAction. Pixel art, so keep it crisp. */
.modlog-pinkie {
    vertical-align: -5px;
    margin-right: 4px;
    image-rendering: pixelated;
}

.modlog-reason {
    color: var(--color-text-muted);
    font-style: italic;
}

.modlog-censor .modlog-action,
.modlog-delete_thread .modlog-action,
.modlog-suspend .modlog-action,
.modlog-timeout .modlog-action {
    color: var(--color-danger);
}

.modlog-uncensor .modlog-action,
.modlog-restore_thread .modlog-action,
.modlog-unsuspend .modlog-action,
.modlog-remove_timeout .modlog-action {
    color: var(--color-status-go);
}

/* TOS page */
.tos-content {
    padding: 10px 0;
}

.tos-content h4 {
    margin: 16px 0 6px 0;
}

.tos-content p {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 6px 0;
}

.tos-content ul {
    font-size: 0.8125rem;
    line-height: 1.6;
    padding-left: 20px;
    margin: 6px 0;
}

.ignore-container {
    background: url(../img/ignorebg.svg);
    height: 4px;
    margin: 2px 0;
    cursor: pointer;
}

.thread .one,
.thread .two,
.thread .three,
.thread .four,
.thread .five {
    float: left;
    line-height: 1rem;
    /* 16px */
}

.thread .one {
    width: 52%;
}

.thread .two,
.thread .three {
    width: 19%;
}

.thread .four {
    width: 6%;
}

.thread .five {
    width: 4%;
}

.thread .end-link {
    font-size: 0.625rem;
    /* 10px */
    color: var(--color-text-muted);
    font-weight: normal;
}

.thread .end-link:hover {
    background-color: var(--color-text-muted);
    color: var(--color-text-white);
}

.thread .subject,
.thread .category {
    margin-left: 6px;
}

/* ── Footer ──────────────────────────────────────────────── */

#bottom {
    clear: both;
    color: var(--color-text-faint);
    padding: 20px 0;
    margin: 0;
}

.footer-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-base {
    text-align: center;
    color: var(--color-text-faint);
    font-size: 0.6875rem;
    font-family: var(--font-sans);
}

.footer-sep {
    margin: 0 6px;
}

.footer-contact {
    color: var(--color-text-faint);
    text-decoration: none;
}

.footer-contact:hover {
    color: var(--color-text-muted);
}

#show_desktop,
#reload_desktop {
    display: none;
}

#show_mobile {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    text-decoration: underline;
}

#reload_mobile {
    background-color: var(--color-dark-deepest);
    color: var(--color-text-loading);
}


/*************************************************************
   THREAD VIEW — COMMENTS
*************************************************************/

.comment,
.test-comment {
    margin-bottom: 2px;
    border-bottom: solid 1px var(--color-border);
    position: relative;
}

.test-comment {
    border-top: solid 1px var(--color-border);
    border-bottom: 0px;
    margin-top: 30px;
}

.comment.later-comment {
    margin-top: -2px;
}

.comment.later-comment .comment-container {
    text-align: center;
    font-size: 0.5625rem;
    /* 9px */
    padding: 2px;
    color: var(--color-text-black);
    background: var(--color-surface-neutral);
}

.comment.enemy .comment-container {
    display: none;
}

/* Thread-muted comments — diminished but visible */
.comment.thread-muted .comment-container {
    opacity: 0.4;
}

.comment.thread-muted:hover .comment-container {
    opacity: 0.7;
}

.comment.thread-muted .username a {
    text-decoration: line-through;
}

/* Mute-trigger post — spoilered with click-to-reveal */
.comment.mute-trigger .content-block .content {
    display: none;
}

.comment.mute-trigger.mute-revealed .content-block .content {
    display: block;
}

.mute-trigger-banner {
    padding: 8px 12px;
    background: var(--color-spoiler-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.6875rem;
    font-style: italic;
    border-left: 3px solid var(--color-pink);
}

.mute-trigger-banner:hover {
    opacity: 0.8;
}

.comment.mute-trigger.mute-revealed .mute-trigger-banner {
    border-left-color: var(--color-text-muted);
}

.thread-mute-btn,
.thread-unmute-btn {
    color: var(--color-pink) !important;
    cursor: pointer;
}

.thread-unmute-btn {
    font-weight: 700;
}

/* Muted user notice & appeal */
.muted-notice {
    padding: 16px 0;
    text-align: center;
}

.muted-notice h3 {
    margin-bottom: 4px;
}

.muted-notice p {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.appeal-mute-btn {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-pink);
    font-size: 0.75rem;
    text-decoration: none;
}

.appeal-mute-btn:hover {
    background: var(--color-pink);
    color: var(--color-text-white);
}

/* Rate limit notice */
.rate-limit-notice {
    padding: 10px 14px;
    margin: 8px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-timeout);
    font-size: 0.75rem;
}

.rate-limit-notice p {
    margin: 0 0 4px 0;
}

.rate-limit-countdown {
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-timeout);
}

.rate-limit-notice.rate-limit-expired {
    border-left-color: var(--color-status-go);
}

.rate-limit-notice.rate-limit-expired .rate-limit-countdown {
    color: var(--color-status-go);
}

.rate-limit-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--color-timeout);
    color: var(--color-text-white);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.thread-ratelimit-btn,
.thread-removeratelimit-btn {
    color: var(--color-timeout) !important;
}

.comment-container {
    padding: 0 8px 20px 2px;
}

.comment .cmd-bar {
    position: relative;
    text-align: right;
    font-size: 0.5625rem;
    padding-bottom: 2px;
}

.cmd-bar-toggle {
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
    text-decoration: none;
    user-select: none;
}

.cmd-bar-toggle:hover {
    color: var(--color-pink);
}

.cmd-bar-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
    z-index: 100;
    min-width: 130px;
    text-align: left;
}

.cmd-bar-menu a {
    display: block;
    padding: 5px 10px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.6875rem;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-separator);
}

.cmd-bar-menu a:last-child {
    border-bottom: none;
}

.cmd-bar-menu a:hover {
    background: var(--color-surface);
    color: var(--color-pink);
}

.comment.deleted {
    min-height: 0;
    text-align: center;
    font-size: 0.625rem;
    /* 10px */
    padding: 2px 0 4px 0;
}

.test-comment {
    margin-bottom: 10px;
}

.comment .user-block,
.test-comment .user-block {
    float: left;
    width: 105px;
    margin-top: 5px;
}

.comment .username.buddy,
.mycomment .username {
    font-weight: 700 !important;
    background-color: var(--color-green-bg);
}

.comment .username.enemy {
    background-color: var(--color-red-bg);
}

.comment .user-block .time,
.test-comment .user-block .time {
    font-size: 0.625rem;
    /* 10px */
    color: var(--color-text-medium);
}

.comment .user-information,
.test-comment .user-information,
.comment-points {
    margin: 6px 0 0 0;
    font-size: 0.5rem;
    /* 8px */
    padding-left: 20px;
    background-repeat: no-repeat !important;
    background-position: 0 1px !important;
    background-size: 16px;
}

.comment .user-information a,
.test-comment .user-information a,
.comment-points,
.comment-points a {
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.comment-points {
    position: relative;
    font-size: 0.5625rem;
    /* 9px */
    padding-left: 0;
    padding-top: 3px;
}

.give-point,
.take-point {
    display: block;
    float: left;
    padding: 3px 7px;
    background: var(--color-surface-neutral);
    text-decoration: none;
    margin: -3px 4px 0 0;
    font-weight: bold;
}

/* Distinct colors + a clear gap so +1 and -1 aren't mis-tapped */
.give-point { color: var(--color-vote-up); }
.take-point { color: var(--color-danger); margin-left: 6px; }
.give-point:hover { background: rgba(74, 138, 74, 0.18); }
.take-point:hover { background: rgba(192, 57, 43, 0.18); }

.current-points {
    float: left;
    margin-right: 4px;
    cursor: help;
}

/* Hover tooltip: who +1'd / -1'd a post (any member can see) */
.vote-tip {
    position: absolute;
    z-index: 10000;
    max-width: 280px;
    padding: 6px 9px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
    font-size: 0.72rem;
    text-transform: none;
    pointer-events: none;
}
.vote-tip-row { line-height: 1.4; white-space: normal; color: var(--color-text); }
.vote-tip-row.vote-up b { color: var(--color-vote-up); }
.vote-tip-row.vote-down b { color: var(--color-danger); }
.vote-tip-loading { color: var(--color-text-muted); }

#thread .comment-worths {
    background: var(--color-surface-worth);
}

/* === AI Slop Detection === */
#thread .comment.slop-high .comment-container {
    background: var(--color-slop-high);
    border-left: 3px solid var(--color-slop-border);
}

#thread .comment.slop-mild .comment-container {
    border-left: 3px solid var(--color-slop-border);
}

.slop-disclaimer {
    font-size: 0.5625rem;
    color: var(--color-slop-text);
    font-style: italic;
    padding: 4px 0 2px 0;
    border-top: 1px dotted var(--color-slop-border);
    margin-top: 6px;
}

.slop-indicator {
    text-align: center;
    margin-top: 8px;
    animation: slop-bob 2s ease-in-out infinite;
}

.slop-indicator img {
    display: inline-block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.slop-indicator .slop-label {
    display: block;
    font-size: 0.5rem;
    font-weight: 900;
    color: var(--color-slop-text);
    line-height: 1;
    margin-top: 1px;
}

.slop-indicator-mild {
    opacity: 0.7;
}

.slop-indicator-mild .slop-label {
    font-size: 0.4375rem;
}

.slop-mild-disclaimer {
    font-size: 0.5rem;
    color: var(--color-slop-text);
    font-style: italic;
    padding: 3px 0 1px 0;
    opacity: 0.7;
}

@keyframes slop-bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

#thread .comment-nopoints .current-points {
    display: none;
}

#thread-control {
    background: var(--color-surface);
    border: dotted 0.1px var(--color-border-control);
    margin: 10px 0 0 0;
    font-size: 0.625rem;
    /* 10px */
    padding: 8px;
}

#thread-control li {
    margin-top: 1px;
}

#thread-control span {
    color: var(--color-pink);
    text-decoration: underline;
    cursor: pointer;
}

#thread-control span:hover {
    color: var(--color-text-white);
    background: var(--color-pink);
}

#mod-tab {
    position: fixed;
    top: 0;
    right: 40px;
    z-index: 9999;
    /* Containing block for the panel below, and the handle sets the width
       so the menu can't move it. */
    width: max-content;
}

#mod-tab-handle {
    background: var(--color-text-subtle);
    color: var(--color-text-white);
    font-size: 0.5625rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 12px 3px;
    border: none;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

#mod-tab-handle:hover {
    background: var(--color-text-soft);
}

.mod-tab-preview #mod-tab-handle {
    background: var(--color-timeout);
    color: var(--color-text-dark);
}

/* Queue has items waiting — make the handle pop so mods notice. */
#mod-tab-handle.mod-tab-lit {
    background: var(--color-danger);
    color: var(--color-text-white);
    animation: modTabPulse 1.6s ease-in-out infinite;
}
@keyframes modTabPulse {
    0%, 100% { background: var(--color-danger); }
    50%      { background: var(--color-danger-bright); }
}

/* Absolutely positioned, so the panel's width can't affect the handle.
   In normal flow it set the width of #mod-tab — which is anchored on its
   RIGHT edge — so every extra item made the panel wider and shoved the
   handle further left. Taking it out of flow pins the handle in place
   however long the menu gets. */
#mod-tab-panel {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-separator);
    border-top: none;
    box-shadow: var(--shadow-panel);
    padding: 4px 0;
    min-width: 180px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Vertical list. It was a flex ROW, so the menu grew sideways across the
   page as items were added instead of downward. */
.mod-tab-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.mod-tab-section:last-child {
    border-bottom: none;
}

.mod-tab-label {
    font-size: 0.5625rem;
    color: var(--color-text-soft);
    text-transform: uppercase;
    padding: 2px 12px 4px;
}

.mod-tab-btn {
    display: block;
    white-space: nowrap;
    font-size: 0.6875rem;
    color: var(--color-dark);
    text-decoration: none;
    padding: 4px 12px;
    cursor: pointer;
}

.mod-tab-btn:hover {
    background: var(--color-mod-count-bg);
    color: var(--color-text-dark);
}

/* The Motions button carries .alert when any are pending. The class was in
   the markup with no rule behind it, so a waiting motion looked identical
   to none. */
.mod-tab-btn.alert {
    color: var(--color-danger);
    font-weight: bold;
}

.mod-tab-danger {
    color: var(--color-danger);
}

.mod-tab-danger:hover {
    background: var(--color-red-bg);
    color: var(--color-danger-deep);
}

.mod-tab-restore {
    color: var(--color-status-go);
}

.mod-tab-restore:hover {
    background: var(--color-status-go-bg);
    color: var(--color-status-go);
}

.mod-tab-alert {
    color: var(--color-danger);
    font-size: 0.625rem;
    font-weight: bold;
}

.deleted-tag {
    color: var(--color-danger);
    font-size: 0.75rem;
}

.mod-only-tag {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Mod-only threads — same visual pattern as .thread.nsfw / .thread.legacy.
   ninja-admin.svg is hand-pixeled at 26x26 with explicit width/height
   so it renders without needing background-size. */
.thread.mod-only {
    background-image: url(../img/ninja-admin.svg);
    background-position: 6px 8px;
    background-repeat: no-repeat;
}

.thread.mod-only .subject-text a,
.thread.mod-only .mod-only-tag {
    color: var(--color-mod-only);
}

.thread.mod-only .subject-text:hover {
    color: var(--color-mod-only);
}

.thread.mod-only .mod-only-tag {
    font-size: 0.6875rem;
}

.thread.mod-only .one div {
    padding-left: 35px;
}

/* Board / motion state rows — nsfw's recipe on the Meta category: a
   pixel icon at the left of the row and the title in the state color.
   The box (tint + 1px border in the status hue) wraps the ICON, not the
   row — per Zack. Pinkies stay native 14px; margin centering instead of
   a transform so the pixel art never lands on a half-pixel. */
.thread.board-will_do,
.thread.board-questions,
.thread.board-wont_do,
.thread.board-shipped,
.thread.motion-open,
.thread.motion-passed,
.thread.motion-passed_pending_mod,
.thread.motion-enacted,
.thread.motion-defeated,
.thread.motion-expired,
.thread.motion-vetoed,
.thread.motion-rejected_by_mods {
    position: relative;
}

.thread-state-icon {
    position: absolute;
    left: 6px;
    top: 50%;
    margin-top: -11px;
    /* 14px art + 3px padding + 1px border = a 22px box */
    width: 14px;
    height: 14px;
    padding: 3px;
    border: 1px solid var(--color-status-off);
    background-color: var(--color-status-off-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.si-will_do   { background-image: url(../img/pinkies/ai/thumbs-up.svg); background-color: var(--color-status-go-bg); border-color: var(--color-status-go); }
.si-questions { background-image: url(../img/pinkies/svg/huh.svg); background-color: var(--color-status-hold-bg); border-color: var(--color-status-hold); }
.si-wont_do   { background-image: url(../img/pinkies/svg/pft.svg); }
.si-shipped   { background-image: url(../img/pinkies/ai/party.svg); background-color: var(--color-status-live-bg); border-color: var(--color-status-live); }

.si-motion-open { background-image: url(../img/pinkies/ai/yelling.svg); background-color: var(--color-status-live-bg); border-color: var(--color-status-live); }
.si-motion-passed,
.si-motion-passed_pending_mod { background-image: url(../img/pinkies/ai/hundred.svg); background-color: var(--color-status-hold-bg); border-color: var(--color-status-hold); }
.si-motion-enacted { background-image: url(../img/pinkies/ai/robot.svg); background-color: var(--color-status-go-bg); border-color: var(--color-status-go); }
.si-motion-defeated,
.si-motion-rejected_by_mods { background-image: url(../img/pinkies/svg/frown.svg); }
.si-motion-expired { background-image: url(../img/pinkies/ai/sleepy.svg); }
.si-motion-vetoed  { background-image: url(../img/pinkies/ai/ninja.svg); }

/* Title takes the state color, exactly how .thread.nsfw does it. */
.thread.board-will_do .subject-text a,
.thread.board-will_do .subject-text:hover,
.thread.motion-enacted .subject-text a,
.thread.motion-enacted .subject-text:hover { color: var(--color-status-go); }

.thread.board-questions .subject-text a,
.thread.board-questions .subject-text:hover,
.thread.motion-passed .subject-text a,
.thread.motion-passed .subject-text:hover,
.thread.motion-passed_pending_mod .subject-text a,
.thread.motion-passed_pending_mod .subject-text:hover { color: var(--color-status-hold); }

.thread.board-shipped .subject-text a,
.thread.board-shipped .subject-text:hover,
.thread.motion-open .subject-text a,
.thread.motion-open .subject-text:hover { color: var(--color-status-live); }

.thread.board-wont_do .subject-text a,
.thread.board-wont_do .subject-text:hover,
.thread.motion-defeated .subject-text a,
.thread.motion-defeated .subject-text:hover,
.thread.motion-expired .subject-text a,
.thread.motion-expired .subject-text:hover,
.thread.motion-vetoed .subject-text a,
.thread.motion-vetoed .subject-text:hover,
.thread.motion-rejected_by_mods .subject-text a,
.thread.motion-rejected_by_mods .subject-text:hover { color: var(--color-status-off); }

.thread.board-will_do .one div,
.thread.board-questions .one div,
.thread.board-wont_do .one div,
.thread.board-shipped .one div,
.thread.motion-open .one div,
.thread.motion-passed .one div,
.thread.motion-passed_pending_mod .one div,
.thread.motion-enacted .one div,
.thread.motion-defeated .one div,
.thread.motion-expired .one div,
.thread.motion-vetoed .one div,
.thread.motion-rejected_by_mods .one div {
    padding-left: 35px;
}

.comment .censor {
    color: var(--color-dark-deep);
    font-size: 0.625rem;
    /* 10px */
    background: var(--color-surface);
    text-align: center;
    padding: 2px;
}

.comment .censor .content {
    padding: 2px;
    text-align: left;
    display: none;
    background: var(--color-text-white);
}

.comment .censor.suspended-banner {
    padding: 10px 14px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface-off);
    cursor: pointer;
}

.comment .content-block,
.test-comment .content-block {
    margin: 5px 0 0 125px;
    font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
    line-height: 1.6;
}

/* ── Content typography — headings, paragraphs, lists, hr ── */

.content-block h1 {
    font-size: 1.4em;
    font-weight: 700;
    margin: 0.8em 0 0.15em;
    line-height: 1.3;
    color: var(--color-text-dark);
}

.content-block h1:first-child {
    margin-top: 0.25em;
}

.content-block h2 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0.8em 0 0.1em;
    line-height: 1.35;
    color: var(--color-text-dark);
}

.content-block h3 {
    font-size: 1em;
    font-weight: 700;
    margin: 0.6em 0 0.1em;
    line-height: 1.4;
    color: var(--color-text-dark);
}

.content-block p {
    margin: 0 0 0.75em;
}

.content-block p:last-child {
    margin-bottom: 0;
}

.content-block hr {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 1.25em 0;
}

.content-block strong {
    font-weight: 700;
    color: var(--color-text-dark);
}

.content-block blockquote {
    border-left: 3px solid var(--color-border);
    padding: 0.25em 0 0.25em 0.75em;
    margin: 0.75em 0;
    color: var(--color-text-dim);
}

.comment .content-block code {
    display: block;
}

/* Code blocks — inline and fenced */
pre {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    padding: 10px 12px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

pre code {
    background: transparent;
    padding: 0;
    border: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

code {
    background: var(--color-surface);
    padding: 1px 4px;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

pre code.hljs {
    background: transparent;
    padding: 0;
}

.content img,
.content .gifv,
.recent-post-content img,
#information-desc img {
    max-width: 100%;
    height: auto;
}

.content ul,
.content ol {
    margin: 0.5em 0 0.75em 1.75em;
}

.content ul {
    list-style: disc outside none;
}

.content ol {
    list-style: decimal outside none;
}

.content ul li,
.content ol li {
    margin: 0.3em 0;
    line-height: 1.55;
}

/* Markdown converter emits <br> as direct children of <ul>/<ol> between
   <li> siblings, which inflates spacing way past the li margin. Hide
   those — keeps real <br>s inside individual <li>s untouched. */
.content ul > br,
.content ol > br {
    display: none;
}

/* If the converter wraps each <li>'s text in <p>, kill the default p
   margins so list items don't grow vertical air. */
.content ul li > p,
.content ol li > p {
    margin: 0;
}

.comment .content-block code br {
    display: none;
}

#thread .comment textarea {
    display: block;
    height: 140px;
    width: 100%;
    border: solid 1px var(--color-border-light);
    position: relative;
    top: -2px;
    left: -2px;
}

#thread .comment button {
    margin-right: 2px;
}

/* Optimistic comment — shown instantly before server confirms */
.comment.comment-optimistic {
    opacity: 0.7;
    animation: comment-fade-in 0.3s ease-out;
}

.comment.comment-optimistic .comment-container {
    border-left: 3px solid var(--color-blue);
}

/* Smooth entrance for dynamically appended comments (SSE) */
@keyframes comment-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*************************************************************
   NOTIFICATIONS
*************************************************************/

#notifications {
    display: none;
    position: fixed;
    bottom: 10px;
    left: 20px;
    width: 220px;
    border: solid 2px var(--color-border);
    padding: 10px 12px;
    font-size: 0.6875rem;
    background: var(--color-surface-warm);
    box-shadow: var(--shadow-panel);
    z-index: 1000;
}

#notifier {
    display: flex;
    align-items: center;
    gap: 6px;
}

#notify,
#notify-scroll {
    color: var(--color-text-notify);
    font-size: 0.75rem;
    text-decoration: none;
    font-weight: bold;
}

#closenotify {
    background: url(../img/close.svg) no-repeat center center;
    background-size: 8px 8px;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 6px;
    top: 6px;
    cursor: pointer;
    opacity: 0.5;
}

#closenotify:hover {
    opacity: 1;
}


/*************************************************************
   FORMS
*************************************************************/

form {
    text-align: left;
}

form .input {
    margin-bottom: 4px;
    min-height: 24px;
}

form .input label {
    float: left;
    width: 100px;
    line-height: 1.5rem;
    /* 24px */
}

form .input.text input {
    padding: 3px;
}

form .input.textarea textarea {
    padding: 3px;
}

form .input.text input,
form .input.textarea textarea {
    border: solid 1px var(--color-border-form);
}


/*************************************************************
   REPLY SECTION
*************************************************************/

#reply-lc {
    display: none;
}

#reply-lc h4 {
    font-size: 0.875rem;
    /* 14px */
    margin-bottom: 10px;
}

#post-shortcuts {
    background: var(--color-surface);
    border: dotted 0.1px var(--color-border-control);
    padding: 5px;
    width: 85px;
}

#new-thread #thread-content-input {
    float: left;
}

#new-thread #post-shortcuts {
    float: left;
    margin-left: 15px;
}

#post-shortcuts p {
    font-size: 0.5625rem;
    /* 9px */
}

#post-shortcuts li a {
    font-size: 0.5625rem;
    /* 9px */
    color: var(--color-pink);
    text-decoration: underline;
    line-height: 0.5625rem;
    /* 9px */
    height: 0.5625rem;
    /* 9px */
    cursor: pointer;
}

#post-shortcuts li a:hover {
    color: var(--color-text-white);
    background: var(--color-pink);
}

#reply-rc {
    margin-left: 0;
}

img[src*="/img/pinkies/"] {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

#pinkies {
    line-height: 1.375rem;
    /* 22px */
    padding-bottom: 2px;
}

#pinkies img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

#pinkies span {
    padding-top: 6px;
    cursor: pointer;
}

#pinkies span:hover {
    background: var(--color-text);
}

#thread-content-input {
    width: 100%;
    height: 240px;
    box-sizing: border-box;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.6;
    padding: 6px 8px;
    resize: none;
    background: var(--color-page-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

#reply-rc p {
    font-weight: 700;
    margin: 8px 0 9px 0;
}


/*************************************************************
   MARKDOWN EDITOR — toolbar + live preview
*************************************************************/

@font-face {
    font-family: 'Departure Mono';
    src: url('/fonts/DepartureMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '04b03';
    src: url('/fonts/04b03.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Pinkies row */
#pinkies {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom: none;
    padding: 6px;
    max-width: 960px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

#pinkies a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 0;
}

#pinkies img {
    width: 18px;
    height: 18px;
    display: block;
    opacity: 0.75;
    transition: opacity 0.08s;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#pinkies img:hover {
    opacity: 1;
}

#pinkies-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.08s;
}

#pinkies-more-btn:hover {
    opacity: 1;
    color: var(--color-link);
}

/* Pinkie Modal */
#pinkie-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

#pinkie-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-scrim);
}

#pinkie-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    width: 520px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-modal);
}

#pinkie-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}

#pinkie-modal-title {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-text);
}

#pinkie-modal-close {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

#pinkie-modal-close:hover {
    color: var(--color-text);
}

#pinkie-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    padding: 0 14px;
}

.pinkie-tab {
    padding: 8px 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    text-transform: uppercase;
}

.pinkie-tab:hover {
    color: var(--color-text);
}

.pinkie-tab.active {
    color: var(--color-link);
    border-bottom-color: var(--color-link);
}

#pinkie-modal-search {
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-border);
}

#pinkie-search {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    box-sizing: border-box;
}

#pinkie-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 10px 14px;
    min-height: 200px;
}

.pinkie-panel {
    display: none;
}

.pinkie-panel.active {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-content: flex-start;
}

.pinkie-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    padding: 4px 2px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.08s;
}

.pinkie-item:hover {
    background: var(--color-border);
}

.pinkie-item img {
    max-width: 32px;
    max-height: 32px;
    display: block;
    object-fit: contain;
}

.pinkie-item-label {
    display: block;
    font-size: 0.5rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 2px;
    line-height: 1.1;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pinkie-loading {
    width: 100%;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    padding: 20px 0;
}

/* Toolbar */
.editor-toolbar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom: none;
    padding: 3px 4px;
    min-height: 0;
    line-height: 1;
    max-width: 960px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1px;
}

.editor-toolbar button {
    color: var(--color-text-muted);
    border: none;
    height: 24px;
    min-width: 24px;
    width: auto;
    margin: 0;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    transition: background 0.1s, color 0.1s;
}

.editor-toolbar button:hover {
    background: var(--color-pink);
    color: var(--color-text-white);
}

.editor-toolbar button.active {
    background: var(--color-dark);
    color: var(--color-text-white);
}

/* Toolbar text labels */
.editor-toolbar .yh-tb {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
}

.yh-tb-bold::before {
    content: "B";
    font-weight: 700;
}

.yh-tb-italic::before {
    content: "I";
    font-style: italic;
}

.yh-tb-strike::before {
    content: "S";
    text-decoration: line-through;
}

.yh-tb-h1::before {
    content: "H1";
}

.yh-tb-h2::before {
    content: "H2";
}

.yh-tb-quote::before {
    content: "\201C";
}

.yh-tb-ul::before {
    content: "\2022";
}

.yh-tb-ol::before {
    content: "1.";
}

.yh-tb-link::before {
    content: "\26D3";
    font-family: inherit;
}

.yh-tb-img::before {
    content: "IMG";
    font-size: 0.5625rem;
}

.yh-tb-upload::before {
    content: "\1F4F7";
    font-size: 0.6875rem;
}

.yh-tb-code::before {
    content: "{ }";
}

.yh-tb-codeblock::before {
    content: "</>";
    font-size: 0.5625rem;
}

.yh-tb-hr::before {
    content: "\2014";
}

.yh-tb-spoiler::before {
    content: "?";
}

.yh-tb-snigger::before {
    content: "sm";
    font-size: 0.5625rem;
}

.yh-tb-poll::before {
    content: "\1F4CA";
    font-size: 0.6875rem;
}

.yh-tb-stats::before {
    content: "\1F4C8";
    font-size: 0.6875rem;
}
.editor-toolbar .yh-tb-stats.active {
    background: var(--color-link-hover-bg);
    color: var(--color-link-hover-text);
}

/* Live "your writing stats" panel — self-only readout under the toolbar */
.yh-live-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 14px;
    padding: 6px 10px;
    margin: 4px 0 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-neutral);
    font-size: 0.72rem;
}
.yh-live-stats .yh-ls-title {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-size: 0.62rem;
}
.yh-live-stats .yh-ls-item {
    color: var(--color-text);
    white-space: nowrap;
}
.yh-live-stats .yh-ls-hint {
    color: var(--color-text-muted);
    font-style: italic;
    margin-left: auto;
}

/* Code block dropdown */
.yh-tb-dropdown {
    position: relative;
    display: inline-flex;
}

.yh-tb-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
    min-width: 110px;
    padding: 3px 0;
    margin-top: 2px;
}

.yh-tb-dropdown-menu.open {
    display: block;
}

.yh-tb-dropdown-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 10px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    cursor: pointer;
    white-space: nowrap;
}

.yh-tb-dropdown-menu button:hover {
    background: var(--color-surface);
}

.editor-toolbar i.separator {
    border-left: 1px solid var(--color-border-light);
    border-right: none;
    margin: 0 3px;
    height: 14px;
    display: inline-block;
}

/* Editor wrap — textarea + preview side by side */
.editor-wrap {
    display: flex;
    gap: 0;
    max-width: 960px;
    position: relative;
}

.resize-toast {
    position: absolute;
    left: 0;
    bottom: -34px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 4px 8px;
    font-size: 0.75rem;
    display: flex;
    gap: 4px;
    align-items: center;
    z-index: 10;
}
.resize-toast .resize-btn,
.resize-toast .resize-dismiss {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    background: var(--color-page-bg);
    cursor: pointer;
}
.resize-toast .resize-btn:hover {
    background: var(--color-link-hover-bg);
    color: var(--color-link-hover-text);
}
.resize-toast .resize-dismiss {
    margin-left: 6px;
    padding: 2px 6px;
    color: var(--color-text-muted);
}
.resize-toast .resize-sep {
    color: var(--color-text-muted);
    padding: 0 2px;
}
.resize-toast .resize-px {
    width: 70px;
    font-size: 0.75rem;
    padding: 2px 6px;
    border: 1px solid var(--color-border-form);
    background: var(--color-page-bg);
    color: var(--color-text);
}
.resize-toast .resize-px-apply {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    background: var(--color-page-bg);
    cursor: pointer;
}
.resize-toast .resize-px-apply:hover {
    background: var(--color-link-hover-bg);
    color: var(--color-link-hover-text);
}

/* User-embedded videos in post content */
.content-block video,
.content video {
    max-width: 100%;
    height: auto;
    background: var(--color-media-letterbox);
    margin: 0.5em 0;
}

.editor-wrap .input.textarea {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.editor-wrap .input.textarea textarea {
    height: 240px;
}

/* Live preview panel */
#editor-preview {
    flex: 1;
    min-width: 0;
    height: 240px;
    background: var(--color-page-bg);
    color: var(--color-text);
    font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
    line-height: 1.6;
    border: 1px solid var(--color-border);
    border-left: none;
    box-sizing: border-box;
    overflow-y: auto;
}

#editor-preview .preview-label {
    font-family: var(--font-mono-pixel);
    font-size: 0.625rem;
    color: var(--color-text-muted);
    padding: 4px 8px 2px;
    text-transform: uppercase;
}

#editor-preview .preview-content {
    padding: 4px 10px 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: inherit;
    /* Force default typography so rendered plaintext matches what you see
       in a real comment. Without this, ambient rules from #comment-form
       ancestors were bleeding weight/size into the preview. */
    font-weight: 400;
    font-family: inherit;
    color: var(--color-text);
}

#editor-preview .preview-content p,
#editor-preview .preview-content li,
#editor-preview .preview-content span {
    font-weight: 400;
}

#editor-preview .preview-content strong,
#editor-preview .preview-content b {
    font-weight: 700;
}

#editor-preview .preview-placeholder {
    color: var(--color-text-faint);
    font-style: italic;
}

/* Preview rendered content inherits .content-block typography to match real comments */

#editor-preview a {
    color: var(--color-link);
}

/* Photo styling for user-uploaded images in the editor preview.
   Pinkies are excluded by src path so they keep their attribute-driven
   14x14 size — otherwise height:auto + min-height:40px stretches them
   into squished blobs. */
#editor-preview img:not([src*="/img/pinkies/"]) {
    max-width: 100%;
    height: auto;
    min-height: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
}

/* Mobile */
@media screen and (max-width: 600px) {
    .editor-wrap {
        flex-direction: column;
    }

    #editor-preview {
        border: 1px solid var(--color-border);
        border-top: none;
        max-height: 200px;
        height: auto;
    }

    .editor-wrap .input.textarea textarea {
        height: 150px;
        font-size: 1rem;
        /* cols="90" on <textarea> gives an intrinsic min-content width of
           ~600px, which prevents flex/grid parents from shrinking below
           that on narrow viewports — that's what pushed the toolbar,
           pinkie picker, and form past the right edge on iPhone Mini.
           min-width:0 + width:100% lets the textarea actually fit. */
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .editor-wrap,
    .editor-wrap .input.textarea {
        min-width: 0;
        max-width: 100%;
    }

    .editor-toolbar {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .editor-toolbar button {
        min-width: 36px;
        min-height: 36px;
        font-size: 0.875rem;
    }

    #pinkies {
        max-width: 100%;
    }

    #submit-button {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
        font-weight: bold;
        margin-top: 8px;
        box-sizing: border-box;
    }

    #editor-preview {
        min-height: 60px;
    }
}


/*************************************************************
   PREFERENCES
*************************************************************/

#preferences form {
    margin-top: 10px;
}

#preferences .input label {
    width: 150px;
}

#preferences input[type=submit] {
    margin-bottom: 15px;
}

/* Preferences page: keep every control inside the column width. The
   about_blurb textarea ships with cols="90" (~600px intrinsic) which,
   with no page-scoped CSS, blew past the viewport on phones and made the
   whole settings page read as broken. Normalize widths everywhere. */
#preferences textarea,
#preferences input[type="text"],
#preferences input[type="password"],
#preferences input[type="email"],
#preferences input[type="file"],
#preferences select {
    max-width: 100%;
    box-sizing: border-box;
}
#preferences .input.text textarea {
    width: 100%;
}

@media screen and (max-width: 600px) {
    /* A 150px floated label leaves no room for the field on a phone —
       stack the label above its control. */
    #preferences .input label {
        float: none;
        display: block;
        width: auto;
        margin-bottom: 3px;
    }
    /* Text-ish controls fill the column once labels are stacked. */
    #preferences .input.text input[type="text"],
    #preferences .input.text input[type="password"],
    #preferences .input.text input[type="email"],
    #preferences .input.text input[type="file"],
    #preferences .input.text select {
        width: 100%;
    }
    /* Checkboxes stay their natural size on their own line (the label's
       `for` still makes the whole label a tap target). */
    #preferences .input.text input[type="checkbox"] {
        width: auto;
        margin: 0;
    }
    /* The floating "Save" buttons collide with the section headings on
       narrow screens — let them sit in normal flow instead. */
    #preferences form > div[style*="float:right"] {
        float: none !important;
        margin: 8px 0 !important;
    }
}


/*************************************************************
   QUOTES
*************************************************************/

blockquote.tquote {
    padding: 4px 0 4px 1em;
    margin: 8px 0 0.75em 1em;
    border-left: 0.1px dotted var(--color-border-form);
    font-style: italic;
    font-size: 0.6875rem;
    /* 11px */
    font-weight: normal;
}

blockquote.tquote p {
    padding: 0;
    margin-bottom: 0.5em;
}

/* Last paragraph of a quote shouldn't push the box open at the bottom. */
blockquote.tquote p:last-child {
    margin-bottom: 0;
}

blockquote.tquote div.tqname {
    font-size: 0.6875rem;
    /* 11px */
    display: block;
    font-style: normal;
    font-weight: bold;
    margin-bottom: 4px;
}

/*
 * Dead-space cleanup around quotes and paragraphs.
 *
 * Stored post HTML carries <br>s pinned against block boundaries (the block
 * already breaks the line, so each one renders a second, empty row). The
 * server strips these at render time (src/tidyPostWhitespace.js); these rules
 * are the safety net for content the browser builds itself — the live editor
 * preview and optimistically-rendered new posts — so typing looks like what
 * you get after posting.
 */
.content blockquote.tquote > br:first-child,
.content blockquote.tquote > br:last-child,
.content blockquote.tquote div.tqname + br,
.content blockquote.tquote + br {
    display: none;
}

/*
 * NOTE: there was also a global `.content p + br { display:none }` here. It
 * flattened intentional spacing in hand-authored posts (it collapsed the
 * In Memorium post's spacer rows), so it's gone. Only quote-adjacent
 * whitespace is safe to hide — see src/tidyPostWhitespace.js.
 */

.quote-nested-toggle {
    display: block;
    padding: 4px;
    background: var(--color-surface-neutral);
    text-decoration: none;
    margin-top: 4px;
    width: 113px;
    overflow: hidden;
    text-align: center;
}


/*************************************************************
   PROFILE / USER PAGE
*************************************************************/

#photostream {
    float: left;
    width: 85px;
    border: 1px solid var(--color-border-light);
    background-color: var(--color-surface-faint);
    text-align: center;
    overflow: hidden;
    margin-right: 10px;
}

#flickr_badge_uber_wrapper {
    text-align: center;
    width: 67px;
    margin-left: 4px;
}

.personal_info_box {
    width: 220px;
    float: left;
}

#latest-posts {
    width: 80%;
    margin-left: 235px;
}

#latest-posts-withflickr {
    width: 70%;
    margin-left: 330px;
}

#latest-posts hr,
#latest-posts-withflickr hr {
    border: none;
    border-bottom: solid 1px var(--color-border);
}

#this-is-you {
    background: var(--color-dark);
    width: 200px;
    color: var(--color-text-white);
    font-size: 0.875rem;
    /* 14px */
    margin: 0px;
    padding: 10px;
    margin-bottom: 10px;
}

#this-is-you a {
    color: var(--color-pink-profile);
    margin-bottom: 10px;
}

.post-history-title {
    font-size: 0.875rem;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border-separator);
}

.post-container {
    border-bottom: 1px solid var(--color-border-separator);
    padding: 8px 0;
}

.post-meta {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.post-meta a {
    color: var(--color-pink);
}

.post-time {
    color: var(--color-text-muted);
}

.post-history-pagination {
    padding: 10px 0;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-history-page {
    color: var(--color-text-muted);
}

.post-block a {
    text-decoration: none;
}

.post-block {
    display: none;
    font-size: 0.5625rem;
    /* 9px */
    margin-right: 3px;
    margin-top: 3px;
}

h3.recent-thread-title {
    font-size: 1rem;
    /* 16px */
    text-indent: 5px;
}

.recent-thread-title a {
    text-decoration: none;
}

.recent-post-content {
    padding: 10px;
    font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
    line-height: 1.6;
}

.recent-post-content h1 {
    font-size: 1.4em;
    font-weight: 700;
    margin: 1.2em 0 0.5em;
    line-height: 1.3;
    color: var(--color-text-dark);
}

.recent-post-content h1:first-child {
    margin-top: 0.25em;
}

.recent-post-content h2 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 1.4em 0 0.4em;
    line-height: 1.35;
    color: var(--color-text-dark);
}

.recent-post-content h3 {
    font-size: 1em;
    font-weight: 700;
    margin: 1.2em 0 0.3em;
    line-height: 1.4;
    color: var(--color-text-dark);
}

.recent-post-content p {
    margin: 0 0 0.75em;
}

.recent-post-content p:last-child {
    margin-bottom: 0;
}

.recent-post-content hr {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 1.25em 0;
}

.recent-post-content strong {
    font-weight: 700;
    color: var(--color-text-dark);
}

.recent-post-content ul,
.recent-post-content ol {
    margin: 0.5em 0 0.75em 1.75em;
}

.recent-post-content ul {
    list-style: disc outside none;
}

.recent-post-content ol {
    list-style: decimal outside none;
}

.recent-post-content ul li,
.recent-post-content ol li {
    margin: 0.3em 0;
    line-height: 1.55;
}

.recent-post-content blockquote {
    border-left: 3px solid var(--color-border);
    padding: 0.25em 0 0.25em 0.75em;
    margin: 0.75em 0;
    color: var(--color-text-dim);
}

.small_profile_caps {
    font-size: 0.625rem;
    /* 10px */
    text-transform: uppercase;
}

.small_profile_caps .buddy,
.small_profile_caps .online {
    color: var(--color-blue);
}

.small_profile_caps .ignored {
    color: var(--color-pink);
}

.yh_user .last-seen {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.small_profile_caps .moderator-badge {
    color: var(--color-vote-up);
    font-weight: bold;
}

.small_profile_caps .suspended-badge {
    color: var(--color-red-error-dark);
    font-weight: bold;
}

.small_profile_caps .timeout-badge {
    color: var(--color-timeout);
    font-weight: bold;
}

/* Why someone was suspended, on their profile. Same information the public
   mod log carries, put where people actually look. */
.suspension-notice {
    margin: 10px 0;
    padding: 8px 10px;
    border-left: 3px solid var(--color-red-error-dark);
    background: var(--color-surface-faint);
    font-size: 0.75rem;
}
.suspension-notice strong {
    display: block;
    color: var(--color-red-error-dark);
    text-transform: uppercase;
    font-size: 0.625rem;
}
.suspension-reason { display: block; white-space: pre-wrap; }
.suspension-meta { display: block; color: var(--color-text-soft); font-size: 0.625rem; }

.timeout-info {
    display: inline-block;
    padding: 2px 6px;
    background: var(--color-timeout);
    color: var(--color-text-white);
    font-size: 0.625rem;
    margin-bottom: 4px;
}

.mod-timeout-btn {
    border-color: var(--color-timeout);
    color: var(--color-timeout);
}

.mod-removetimeout-btn {
    border-color: var(--color-text-muted);
    color: var(--color-text-muted);
}

.censored-notice {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-style: italic;
    padding: 8px;
    text-align: center;
}

/* Hidden posts: only ever rendered to moderators (members never receive them).
   Dim the whole comment and show a small marker so mods can spot + unhide. */
.comment.mod-hidden {
    opacity: 0.55;
}
.hidden-notice {
    color: var(--color-pink);
    font-size: 0.6875rem;
    font-style: italic;
    padding: 4px 8px;
}

.deleted-notice {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-style: italic;
    padding: 6px 8px;
    opacity: 0.7;
}


.notice-pinkie {
    vertical-align: middle;
    margin-right: 4px;
}

.notice-pinkie-inline {
    vertical-align: text-bottom;
    margin-right: 2px;
}

.comment.censored .cmd-bar-menu .view-source,
.comment.censored .cmd-bar-menu .quote {
    display: none;
}

.censor-btn,
.uncensor-btn {
    cursor: pointer;
    color: var(--color-pink);
}

.censor-btn:hover,
.uncensor-btn:hover {
    text-decoration: underline;
}

.standard_profile_info_box h3 {
    border-bottom: dotted 0.1px var(--color-border-dark);
    margin-bottom: 3px;
}

.standard_profile_info_box {
    background: var(--color-surface-off);
    border: solid 1px var(--color-border);
    margin-bottom: 10px;
    font-size: 0.75rem;
    /* 12px */
    line-height: 1.5;
    padding: 8px;
    width: 200px;
}

.standard_profile_info_box #social_icons a:link .standard_profile_info_box #social_icons a:visited,
.standard_profile_info_box #social_icons a:hover {
    text-decoration: none;
    background: var(--color-surface-off);
}

.lastfm_listing {
    border-bottom: solid 1px var(--color-border-separator);
    padding: 4px 0;
    line-height: normal;
}

.lastfm_artist {
    font-size: 0.6875rem;
    /* 11px */
}

.lastfm_title {
    font-size: 0.6875rem;
    /* 11px */
}

.lastfm_date {
    font-size: 0.5625rem;
    /* 9px */
    color: var(--color-text-faint);
}


/*************************************************************
   PRIVATE MESSAGES
*************************************************************/

#pm-box-controls {
    background: var(--color-red-bg);
    padding: 6px;
    border-bottom: solid 1px var(--color-border-medium);
    height: 16px;
}

#pm-box-controls .left {
    float: left;
    width: 60%;
}

#pm-box-controls a {
    font-size: 0.6875rem;
    /* 11px */
}

#pm-inbox .message.header {
    background: transparent;
    border-bottom: solid 1px var(--color-border-medium);
}

#pm-inbox .message.header div {
    font-size: 0.625rem !important;
    /* 10px */
}

#pm-inbox .message {
    margin: 2px 0;
    line-height: 1.5rem;
    /* 24px */
    height: 1.5rem;
    /* 24px */
    padding-left: 4px;
    background: var(--color-blue-thread);
    overflow: hidden;
}

#pm-inbox .message.buddy {
    background-color: var(--color-green-bg);
}

#pm-inbox .message.odd {
    background-color: var(--color-blue-thread-alt);
}

#pm-inbox .message.unread .subject {
    font-weight: 700;
}

#pm-inbox .message div {
    float: left;
    line-height: 1.5rem !important;
    /* 24px */
    color: var(--color-text-dim);
    font-size: 0.75rem;
    /* 12px */
    font-weight: 500;
    padding: 0 !important;
    margin: 0 !important;
}

#pm-inbox .message .marker input {
    margin: 5px 5px 0 2px;
    display: block;
}

#pm-inbox .message .subject {
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pm-inbox .message .sender {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pm-inbox .blue-bar {
    height: 1px;
    background: var(--color-blue-line);
    width: 100%;
}

#pm-inbox .ctrl-bar,
#pm-message .ctrl-bar {
    line-height: 1.875rem;
    /* 30px */
    height: 1.875rem;
    /* 30px */
    border-bottom: 0.1px dotted var(--color-border-dotted);
}

#pm-inbox .pagination,
#pm-message .pagination {
    overflow: hidden;
    border: 0;
    float: left;
    font-size: 0.6875rem;
    /* 11px */
}

#pm-inbox .new-message,
#pm-message .new-message {
    float: right;
    display: block;
    background: var(--color-blue-bg-light);
    padding: 3px 7px;
    height: 1.125rem;
    /* 18px */
    line-height: 1.125rem;
    /* 18px */
    margin-top: 3px;
    font-size: 0.625rem;
    /* 10px */
}

/* Notifications page */
.yh_notifications #pm-inbox .message .notif-type {
    float: left;
    width: 5%;
    font-weight: bold;
    color: var(--color-text-muted);
    text-align: center;
}

.yh_notifications #pm-inbox .message .subject {
    width: 55%;
}

.yh_notifications .notif-thread {
    font-size: 0.625rem;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.mark-all-read-btn {
    background: none;
    border: none;
    color: var(--color-link);
    cursor: pointer;
    font-size: 0.625rem;
    text-decoration: underline;
    text-transform: uppercase;
}

.mark-all-read-btn:hover {
    color: var(--color-link-hover-text);
    background: var(--color-link-hover-bg);
}

#pm-message-meta {
    line-height: 1.25rem;
    /* 20px */
    height: 1.25rem;
    /* 20px */
    font-size: 0.625rem;
    /* 10px */
    border-bottom: solid 1px var(--color-border-medium);
}

#pm-message-meta span {
    padding: 0 4px;
}

#pm-message-meta span span {
    padding: 0;
    color: var(--color-text-light);
}

#pm-message .content {
    padding: 20px 0;
    border-bottom: 1px dotted var(--color-border-dotted);
}


/*************************************************************
   ERRORS
*************************************************************/

#errors {
    background: var(--color-error-bg);
    border: solid 1px var(--color-pink);
    padding: 12px;
    margin-top: 10px;
    width: 400px;
}

#errors h4 {
    font-size: 0.875rem;
    /* 14px */
    margin-bottom: 4px;
}

#errors ul {
    margin-left: 20px;
}

#errors li {
    list-style: disc;
    font-size: 0.6875rem;
    /* 11px */
}

.error_alert {
    color: var(--color-red-error-dark);
    padding: 10px 0;
    font-weight: bold;
}


/*************************************************************
   BUDDIES / ENEMIES
*************************************************************/

#buddy-input {
    margin-bottom: 4px;
}

#buddy-input,
#buddy-radios {
    height: 1.375rem;
    /* 22px */
    line-height: 1.125rem;
    /* 18px */
}

#buddy-input label {
    float: left;
}

#buddy-input label,
#buddy-radios label {
    font-size: 0.75rem;
    /* 12px */
    font-weight: 500;
    margin: 0;
    width: 100px;
    float: left;
}

.remove-acq,
.toggle-acq {
    font-size: 0.5625rem;
    /* 9px */
}

.toggle-acq {
    padding-left: 5px;
}

#command-pick-one {
    background: var(--color-timeout);
    height: 10px;
    width: 10px;
}

#buddy-radios label,
#buddy-radios input {
    float: left;
}

#buddy-radio-inputs label {
    width: auto;
    margin-right: 20px;
}

#buddy-radios {
    margin-bottom: 8px;
}

.user-listing,
.buddy-listing,
.enemy-listing {
    width: 130px;
    margin: 0 10px 10px 0;
    padding: 10px;
    float: left;
    height: 62px;
    overflow: hidden;
}

.user-listing {
    background: var(--color-surface);
}

.buddy-listing {
    background: var(--color-green-listing);
}

.enemy-listing {
    background: var(--color-red-bg);
}

.user-listing .online,
.buddy-listing .online,
.enemy-listing .online,
.user-listing .offline,
.buddy-listing .offline,
.enemy-listing .offline {
    font-size: 0.625rem;
    /* 10px */
    text-transform: uppercase;
}

.user-listing .offline,
.buddy-listing .offline,
.enemy-listing .offline {
    color: var(--color-text-medium);
}

.user-listing .online,
.buddy-listing .online,
.enemy-listing .online {
    color: var(--color-blue);
}


/*************************************************************
   LOGIN SIDEBAR
*************************************************************/

.lc-node.login,
.lc-node.login label {
    color: var(--color-text-white);
}

.lc-node.login {
    background: var(--color-dark-alt);
}

.lc-node.login h5 {
    font-size: 0.875rem;
    /* 14px */
}

.lc-node.login p {
    font-size: 0.5625rem;
    /* 9px */
    margin: 0 0 8px 0;
}

.lc-node.login a {
    color: var(--color-text-subtle);
    font-size: 0.625rem;
    /* 10px */
}

.lc-node.login div {
    margin-bottom: 5px;
}

.lc-node.login label {
    font-size: 0.5625rem;
    /* 9px */
    margin-right: 3px;
}

.lc-node.login input {
    width: 90px;
    margin-right: 8px;
}

.lc-node.login button {
    font-size: 0.5625rem;
    /* 9px */
}

#logout_btn {
    color: var(--color-pink);
    padding: 0px;
    margin: 0px;
    text-decoration: underline;
    background: none;
    border: 0px;
    font-size: 0.5rem !important;
    /* 8px */
    text-transform: uppercase;
    cursor: pointer;
}

#logout_btn::-moz-focus-inner {
    padding: 0 !important;
    border: 0 !important;
}


/*************************************************************
   USER PREFERENCES
*************************************************************/

hr.divider {
    border: none;
    border-bottom: dotted 1px var(--color-text-black);
}

#threadnav {
    margin-top: 15px;
}

.users-link {
    font-size: 0.875rem;
    /* 14px */
    font-weight: normal;
}

.user_startdate,
.user_logdate {
    font-size: 0.625rem;
    /* 10px */
}

#users {
    margin-top: 15px;
}

#register-notice {
    margin: 15px;
    font-size: 1rem;
    /* 16px */
    border: 1px dashed var(--color-error);
    padding: 10px;
    background: var(--color-surface-neutral);
    font-weight: bold;
    display: none;
}

spoiler {
    display: block;
    background: var(--color-spoiler-bg);
    padding: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-size: 0;
    color: transparent;
    user-select: none;
}

/* font-size:0 + color:transparent only hides text — non-text children
   (<img>, <video>, <iframe>) render normally and leak through. Hide the
   whole subtree with visibility:hidden; the ::before warning is a pseudo
   on spoiler itself, not a descendant, so it stays visible. */
spoiler > *,
spoiler *:not(.spoiler-disclaimer) {
    visibility: hidden;
}

spoiler::before {
    content: "Warning! May contain spoilers. Click to reveal.";
    display: block;
    color: var(--color-spoiler-label-text);
    background: var(--color-spoiler-label-bg);
    padding: 4px 8px;
    font-size: 0.75rem;
    user-select: none;
}

spoiler.revealed {
    font-size: inherit;
    color: inherit;
    user-select: auto;
}

spoiler.revealed > *,
spoiler.revealed * {
    visibility: visible;
}

spoiler.revealed::before {
    display: none;
}

.spoiler {
    position: relative;
    background: var(--color-spoiler-bg);
}

.spoiler-disclaimer {
    position: absolute;
    background: var(--color-spoiler-label-bg);
    color: var(--color-spoiler-label-text);
}

.spoiler-content {
    visibility: hidden;
}

.spoiled {
    visibility: visible;
}

#preferences .error {
    float: none;
    margin: 15px;
}

div.error {
    margin: 0px;
    font-size: 1rem;
    /* 16px */
    border: 1px dashed var(--color-error);
    padding: 10px;
    background: var(--color-surface-neutral);
    font-weight: bold;
    float: right;
}

.uierror label {
    color: var(--color-red-error-label);
}

.uierror input,
.uierror textarea {
    background: var(--color-red-input-bg);
}

.prefpink {
    color: var(--color-pink);
}

.bottomdashed {
    border-bottom: 1px dotted var(--color-border-dotted);
    height: 50px;
    margin-bottom: 15px;
}

#search-box-user {
    margin-bottom: 5px;
}

.toggle-enemy {
    background: var(--color-red-toggle);
    font-size: 0.625rem;
    /* 10px */
    float: right;
    padding: 4px 5px;
    color: var(--color-text-white);
    cursor: pointer;
    text-decoration: underline;
}

.toggle-enemy:hover {
    background: var(--color-text-white);
    color: var(--color-text);
}





/*************************************************************
   YOUTUBE PLACEHOLDER
*************************************************************/

.youtube_wrapper {
    position: relative;
    cursor: pointer;
    max-width: 640px;
}

.youtube_placeholder {
    width: 100%;
    height: 100%;
}

.youtube_playbutton {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2) url(../img/darkvideo-pinkie-button.svg) center center no-repeat;
    top: 0px;
}

/* Title strip across the bottom of the YouTube thumbnail. Fetched async
   from YouTube's oembed endpoint — falls back to "YouTube video" while
   the request is in flight or if it fails. */
.youtube_wrapper .youtube_title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.55) 60%, rgba(0,0,0,0));
    color: var(--color-text-white);
    font-size: 0.8125rem;
    line-height: 1.3;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

.youtube_wrapper h2 {
    position: absolute;
    top: 0px;
    background: var(--color-scrim);
    color: var(--color-spoiler-label-text);
    font-weight: normal;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    z-index: 999;
}

#ajax_errs .error {
    float: none;
    margin: 10px 0;
    color: var(--color-error);
    border: 0px;
}

#ajax_errs {
    border-bottom: 1px dotted var(--color-border-dotted);
}


/*************************************************************
   PENDING REGISTRATIONS
*************************************************************/

.pendinguser {
    width: 250px;
    margin: 10px 10px 0 0;
    display: inline-block;
    vertical-align: top;
    position: relative;
    border: 1px solid var(--color-border-pending);
}

.pendinguser p {
    padding: 10px;
}

.pendinguser-username {
    font-weight: bold;
    font-size: 0.875rem;
    /* 14px */
}

.pendinguser .pendinguser-question {
    font-weight: bold;
    border-top: 1px dotted var(--color-border-form);
}

.pendinguser .pendinguser-question,
.pendinguser .pendinguser-username {
    padding-bottom: 0;
}

.pendinguser .pendinguser-answer,
.pendinguser .pendinguser-points {
    padding-top: 0;
}

.pendinguser .pendinguser-points {
    margin: 0;
}

.pendinguser-otheraccounts {
    background: var(--color-surface-neutral);
    border-top: 1px dotted var(--color-border-form);
    margin: 0;
}

.pendinguser-otheraccounts,
.pendinguser-otheraccounts a {
    color: var(--color-text-soft);
}

.pendinguser-header {
    background: var(--color-green-bg);
}

.pendinguser .give-point {
    position: absolute;
    top: 10px;
    right: 5px;
}

/* Downvote sits just left of the +1 and reads in the deny red. */
.pendinguser .give-point-minus {
    right: 34px;
    color: var(--color-danger-deep);
}

/* Vote-direction tint in the mod-only "Voted by" list. */
.pendinguser-voters a.vote-up { color: var(--color-vote-up); }
.pendinguser-voters a.vote-down { color: var(--color-danger-deep); }

.pendinguser .current-points {
    float: none;
}

.pendinguser .accepted-badge {
    color: var(--color-vote-up);
    font-weight: bold;
}

.pendinguser .mod-approve-btn,
.pendinguser .mod-deny-btn {
    display: inline-block;
    font-size: 0.625rem;
    padding: 2px 8px;
    border: 1px solid var(--color-mod-bg);
    background: var(--color-mod-bg);
    color: var(--color-mod-text);
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 4px;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.pendinguser .mod-deny-btn {
    background: var(--color-danger-deep);
    border-color: var(--color-danger-deep);
    color: var(--color-text-white);
}

.pendinguser .denied-badge {
    color: var(--color-danger);
    font-weight: bold;
}


/*************************************************************
   REGISTRATION PAGE
*************************************************************/

.question-detail {
    font-weight: bold;
}

.question-answer-wrapper {
    margin: 10px 0;
}

#register-form .input input {
    width: 215px;
    border: 1px solid var(--color-border-form);
}

#register-form .question-answer-wrapper textarea {
    width: 316px;
    height: 74px;
    border: 1px solid var(--color-border-form);
}

#register-form h4 {
    margin-top: 0;
}

.account-stuff-wrapper,
.submit-wrapper,
.questions-wrapper {
    padding: 10px 0;
}

.questions-wrapper {
    padding-bottom: 0;
}


/*************************************************************
   MOBILE — max-width: 600px
*************************************************************/

@media screen and (max-width: 600px) {
    .yh_register #right-column {
        padding-top: 10px;
    }

    .yh_register #right-column>p {
        margin: 10px;
    }

    .yh_register #right-column>.dotted-bar {
        display: none;
    }

    .yh_register #wrapper {
        padding-bottom: 0;
    }

    .yh_register #bottom {
        display: none;
    }

    /* register page */
    #register-form .input input {
        width: 260px;
    }

    #register-form .question-answer-wrapper textarea {
        width: 366px;
        height: 104px;
    }

    .account-stuff-wrapper,
    .submit-wrapper {
        background: var(--color-blue-bg);
    }

    #register-form .submit-wrapper input[type=submit] {
        margin: 0;
    }

    #ad-space {
        display: none;
    }

    #middle {
        grid-template-columns: 1fr;
        padding: 0;
    }

    #left-column {
        width: 100%;
        position: relative;
    }

    #right-column {
        margin: 0;
        padding: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }

    #header {
        width: auto;
        margin: 0;
        background: var(--color-green-bg) url(/img/yay-logo.svg) no-repeat 12px center;
        background-size: 80px auto;
        text-indent: -9999px;
        display: block;
        padding: 18px 50px 18px 100px;
        height: auto;
        font-size: 1.5rem;
        border-bottom: 1px solid var(--color-border-mobile-header);
    }

    #mobile-menu-btn {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--color-text-dim);
        cursor: pointer;
        padding: 15px 14px;
        z-index: 12;
        line-height: 1;
    }

    #mobile-menu-btn.active {
        background: none;
    }

    #logout_btn {
        background: none;
        border: none;
        color: var(--color-pink);
        font-size: 0.625rem;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
        padding: 4px 8px;
    }

    #mod-tab {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    #mod-tab-panel {
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 20px);
    }

    .comment {
        clear: both;
    }

    #main-title {
        overflow: auto;
        height: auto;
        margin-bottom: 0px;
    }

    #main-title h3 {
        line-height: 1.25em;
        font-size: 1em;
        text-align: left;
    }

    #main-title .favourite,
    #main-title .favourite.added,
    #main-title .hide-thread,
    #main-title .hide-thread.added {
        margin: 0 5px;
    }

    .two {
        float: none;
    }

    .three .username,
    .three .time,
    .two .username,
    .two .time {
        float: none;
        display: inline;
        line-height: 1rem;
        /* 16px */
    }

    .comment-container .time {
        display: inline;
    }

    .thread .one {
        width: 90%;
        float: none;
    }

    .thread .subject {
        margin: 0px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .thread .four {
        width: auto;
        overflow: hidden;
    }

    .welcome {
        padding: 12px 14px;
        border: 0;
        border-bottom: 1px solid var(--color-border-separator);
    }

    .pagination .paging-text {
        display: none;
    }

    #post-thread,
    a#post-thread:hover {
        margin: 7px 2px 2px 2px;
        padding: 2px;
    }

    .thread.nsfw .one div {
        padding-left: 30px;
    }

    .thread.nsfw .three {
        padding-left: 0;
    }

    .thread.nsfw {
        background-image: url(../img/naughty.svg);
        background-position: 28px 0;
        background-repeat: no-repeat;
    }

    .thread.legacy .one div {
        padding-left: 30px;
    }

    .thread.legacy .three {
        padding-left: 0;
    }

    .thread.legacy {
        background-image: url(../img/legacy.svg);
        background-position: 28px 0;
        background-repeat: no-repeat;
    }

    .thread.mod-only .one div {
        padding-left: 30px;
    }

    .thread.mod-only .three {
        padding-left: 0;
    }

    .thread.mod-only {
        background-image: url(../img/mods-only.svg);
        background-position: 28px 0;
        background-repeat: no-repeat;
    }

    /* Board/motion state rows follow the same narrow-screen shuffle. */
    .thread.board-will_do .one div,
    .thread.board-questions .one div,
    .thread.board-wont_do .one div,
    .thread.board-shipped .one div,
    .thread.motion-open .one div,
    .thread.motion-passed .one div,
    .thread.motion-passed_pending_mod .one div,
    .thread.motion-enacted .one div,
    .thread.motion-defeated .one div,
    .thread.motion-expired .one div,
    .thread.motion-vetoed .one div,
    .thread.motion-rejected_by_mods .one div {
        padding-left: 30px;
    }

    .thread.board-will_do .three,
    .thread.board-questions .three,
    .thread.board-wont_do .three,
    .thread.board-shipped .three,
    .thread.motion-open .three,
    .thread.motion-passed .three,
    .thread.motion-passed_pending_mod .three,
    .thread.motion-enacted .three,
    .thread.motion-defeated .three,
    .thread.motion-expired .three,
    .thread.motion-vetoed .three,
    .thread.motion-rejected_by_mods .three {
        padding-left: 0;
    }

    /* Same narrow-screen shuffle nsfw's icon does (28px in from the left,
       top-anchored). */
    .thread-state-icon {
        left: 28px;
        top: 2px;
        margin-top: 0;
    }

    .comment-points {
        padding-bottom: 2px;
    }

    .give-point,
    .take-point {
        position: relative;
        right: auto;
        padding: 7px 12px;
        background: var(--color-surface-neutral);
        margin-right: 8px;
        font-size: 0.75rem;
        /* 12px, bigger tap target */
        margin-top: -5px;
    }

    .take-point { margin-left: 8px; }

    .lc-node {
        padding: 12px 14px;
        margin: 0;
        border-bottom: 1px solid var(--color-border-separator);
    }

    #special-threads {
        border-bottom: 0;
    }

    #search-title {
        clear: both;
        padding: 12px 14px;
        border-bottom: 1px solid var(--color-border-separator);
    }

    #search-box {
        margin: 0;
        width: 100%;
        display: flex;
        gap: 6px;
        box-sizing: border-box;
    }

    #search-phrase {
        float: none;
        flex: 1;
        width: auto !important;
        margin-right: 0;
    }

    #search-box input[type="submit"] {
        float: none !important;
        width: auto;
    }

    #search-title strong {
        display: none;
    }

    hr {
        display: none;
    }

    #threads {
        border-bottom: 1px solid var(--color-border-separator);
        padding: 12px 14px;
    }

    #thread-control,
    .comment .user-information,
    #information-widget,
    #photostream,
    #comment-form>p,
    #toggle-html,
    #thread-categories,
    .welcome>a,
    .welcome h4,
    div.five,
    div.category,
    #thread-headers,
    #buddy-list,
    #mod-menu,
    #threads h3,
    #pobf,
    #left-column .everythingpic {
        display: none;
    }

    /* Collapsible mobile nav - hidden by default */
    #left-column .lc-node,
    #left-column #threads,
    #left-column #mod-menu,
    #left-column #buddy-list,
    #messaging,
    #search-title,
    #theme-toggle {
        display: none;
    }

    #left-column.nav-open .lc-node,
    #left-column.nav-open #threads,
    #left-column.nav-open #mod-menu,
    #left-column.nav-open #buddy-list,
    #left-column.nav-open #messaging,
    #left-column.nav-open #search-title {
        display: block;
    }

    #left-column.nav-open #theme-toggle {
        display: inline-block;
        margin: 12px 14px;
    }

    #pinkies a {
        margin: 0 2px 2px;
    }

    #pinkies img {
        width: 20px;
        height: 20px;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
    }

    #messaging {
        padding: 12px 14px;
    }

    #messaging li {
        margin: 6px 0;
    }

    .lc-node#messaging .messages,
    .lc-node#messaging .notifications,
    .applicants {
        line-height: 1.25rem;
        padding-left: 24px;
        background-position: 0 2px;
    }

    .pendinguser .give-point {
        right: 10px;
    }

    .pendinguser .give-point-minus {
        right: 40px;
    }

    form .input label {
        font-size: 0.75rem;
        /* 12px */
    }

    .lc-node.login {
        padding: 12px 14px;
    }

    #new-thread {
        padding: 10px;
    }

    #pm-inbox .message div {
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #pm-box-controls {
        line-height: 1.0625rem;
        /* 17px */
    }

    #pm-box-controls .left {
        width: auto;
    }

    #pm-box-controls .right {
        float: right;
        font-size: 0.6875rem;
        /* 11px */
        font-weight: bold;
    }

    #pm-box-controls .right a {
        font-weight: normal;
    }

    #pm-inbox .message .marker {
        width: 6%;
    }

    #pm-inbox .message .subject {
        width: 56%;
    }

    #pm-inbox .message .time {
        width: 18%;
    }

    #pm-message .content {
        margin-top: 18px;
        padding-left: 4px;
    }

    #pm-message .pagination {
        padding: 0 10px;
        height: auto;
        line-height: 1.9375rem;
        /* 31px */
    }

    #pm-message .pagination:before {
        content: "\2039 "
    }

    #pm-send p {
        font-size: 0.6875rem;
        /* 11px */
        margin: 10px 0 0 10px;
    }

    #pm-send textarea {
        width: 100%;
    }

    #pm-send input[type="submit"] {
        margin-left: 10px;
    }

    #thread-content-input {
        width: 98%;
        margin: 5px auto;
    }

    .login {
        margin-bottom: 0px;
    }

    * {
        margin: 0px;
        padding: 0px;
    }

    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    body,
    div,
    td,
    input,
    select,
    textarea {
        font-family: var(--font-sans);
        color: var(--color-text);
        font-size: 1rem;
        /* 16px */
    }

    h1 {
        margin-bottom: 20px;
    }

    input {
        font-size: 1rem;
        /* 16px */
    }

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

    #wrapper {
        overflow-x: hidden;
        padding-bottom: 20px;
    }

    #secluded-login {
        padding: 20px;
    }

    #secluded-login label {
        display: block;
        margin-bottom: 10px;
    }

    .welcome {
        position: absolute;
        top: 6px;
        right: 40px;
        z-index: 11;
        padding: 0;
        border: 0;
    }

    #jumpdown {
        position: absolute;
        top: 5px;
        right: 86px;
        background: var(--color-dark-deep);
        color: var(--color-surface-neutral);
        font-size: 0.75rem;
        /* 12px */
        display: block;
        padding: 4px 6px;
        margin: 8px;
    }

    .thread,
    .comment {
        display: flow-root;
        position: relative;
        padding: 5px 10px;
    }

    .comment {
        border-bottom: 1px solid var(--color-blue-line);
    }

    .comment.later-comment {
        margin-top: -2px;
    }

    .comment.later-comment .comment-container {
        text-align: center;
        font-size: 0.5625rem;
        /* 9px */
        padding: 2px;
        color: var(--color-text-black);
        background: var(--color-surface-neutral);
    }

    .blueline {
        background-color: var(--color-blue-line);
        height: 1px;
        overflow: hidden;
        clear: both;
        margin-left: -14px;
        margin-right: -14px;
    }

    .thread-controls {
        display: flex;
        gap: 0.25em;
        align-items: right;
        justify-content: end;

    }

    .thread-controls a {}

    .subject-text {
        font-size: 1.125rem;
        /* 18px */
        font-weight: 600;
        margin-left: 20px;
    }

    .thread .end-link {
        position: absolute;
        left: 11px;
        font-size: 1.125rem;
        /* 18px */
    }

    .subject {
        margin: 0 25px 3px 0;
    }

    .username {
        float: left;
    }

    .thread .two,
    .thread .three {
        float: left;
        clear: none;
        width: 45%;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }

    .thread .three {
        text-align: right;
    }

    .three .username:after,
    .two .username:after {
        content: ", ";
    }

    .two div,
    .three div {
        font-size: 0.6875rem;
        /* 11px */
    }

    .two div,
    .three div,
    .two a,
    .three a {
        color: var(--color-text-soft);
    }

    .four {
        position: absolute;
        top: 15px;
        right: 10px;
    }

    .user-block .username a {
        font-weight: bold;
    }

    .user-block {
        display: flow-root;
    }

    .user-block .time {
        margin-top: 4px;
        font-size: 0.75rem;
        /* 12px */
        color: var(--color-text-soft);
    }

    .username {
        margin-right: 2px;
    }

    .comment .content {
        padding: 5px 0 0 0;
    }

    .comment-container {
        padding: 0 4px 8px 2px;
    }

    .secluded-input {
        margin-bottom: 20px;
    }

    #thread form {
        margin: 10px 0;
    }

    #thread form textarea {
        margin-bottom: 10px;
    }

    #thread img {
        max-width: 100%;
        height: auto;
    }

    .content-block a {
        text-decoration: underline;
    }

    .pagination {
        padding: 10px 10px 10px 10px;
    }

    /* header styles consolidated above */

    #threads,
    .welcome {
        display: flow-root;
    }

    #threads ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding-bottom: 0;
        margin-top: 0;
    }

    #threads li,
    .welcome li {
        float: none;
        list-style: none;
    }

    #threads li a,
    .welcome li a {
        background: var(--color-mobile-pill-bg);
        color: var(--color-mobile-pill-text);
        display: block;
        padding: 6px 10px;
        margin: 0;
        font-size: 0.6875rem;
        /* 11px */
    }

    .main-pagination {
        display: flow-root;
    }

    .main-pagination a,
    .main-pagination div {
        background: none repeat scroll 0 0 var(--color-page-bg);
        border: 1px solid var(--color-border-form);
        display: block;
        padding: 5px 8px;
        float: left;
        margin-right: 10px;
    }

    .main-pagination div {
        background: var(--color-link-hover-bg);
        color: var(--color-link-hover-text);
        border-color: var(--color-link-hover-bg);
    }

    #post-thread {
        display: block;
        font-weight: bold;
        text-decoration: underline;
    }

    #new-thread form input[type="submit"] {
        margin-left: 10px;
    }

    .inp {
        padding: 10px;
    }

    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    #category-selector {
        display: flow-root;
    }

    #category-selector input {
        display: block;
        float: left;
        width: 15px;
        padding-top: 5px;
        margin-right: 10px;
        height: 20px;
    }

    #category-selector label {
        display: block;
        float: left;
        width: 60px;
        padding-bottom: 15px;
        margin-right: 50px;
        font-weight: normal;
    }

    #reply-lc h4 {
        display: none;
    }

    #reply-lc p {
        display: none;
    }

    #reply-lc {
        padding-left: 0;
        float: none;
        margin-bottom: 15px;
    }

    #post-shortcuts {
        width: auto;
    }

    #post-shortcuts li {
        display: inline;
    }

    #post-shortcuts li a {
        font-size: 0.875rem;
        /* 14px */
    }

    #main-title {
        display: none;
    }

    #thread #main-title {
        display: grid;
        grid-template-columns: 80% 20%;
        padding: 10px 10px;
        text-align: center;
        background: var(--color-surface-neutral);
        border-bottom: 1px solid var(--color-blue-line);
    }

    #stats {
        padding: 10px;
    }

    /* Profile page mobile layout */
    .yh_user #main-title {
        display: block;
        padding: 12px 14px;
        background: var(--color-surface-neutral);
        border-bottom: 1px solid var(--color-blue-line);
    }

    .yh_user .personal_info_box {
        float: none;
        width: 100%;
    }

    .yh_user .standard_profile_info_box {
        width: auto;
        border: none;
        border-bottom: 1px solid var(--color-border-separator);
        background: none;
        margin: 0;
        padding: 12px 14px;
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    .yh_user .standard_profile_info_box h3 {
        border-bottom: none;
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .yh_user .mod-panel {
        background: var(--color-surface-off);
        padding: 12px 14px;
    }

    .yh_user #information h3 {
        font-size: 1.125rem;
    }

    .yh_user .small_profile_caps {
        display: block;
        margin-bottom: 2px;
    }

    .yh_user #latest-posts,
    .yh_user #latest-posts-withflickr {
        width: 100%;
        margin-left: 0;
    }

    .yh_user .post-history-title {
        padding: 12px 14px 8px;
        font-size: 1rem;
    }

    .yh_user #information-bio,
    .yh_user #information-desc {
        display: block;
    }

    .yh_user .post-container {
        padding: 10px 14px;
    }

    .yh_user .post-history-pagination {
        padding: 10px 14px;
    }

    .yh_user .recent-post-content {
        padding: 8px 0;
    }

    .yh_user .recent-post-content img {
        max-width: 100%;
        height: auto;
    }

    form .input.textarea textarea {
        padding: 6px 8px;
    }

    #thread-content-input {
        height: 120px;
    }

    .cmd-bar {
        float: right;
    }

    .cmd-bar-menu a {
        padding: 7px 12px;
    }

    .content textarea {
        height: 200px;
        width: 300px;
        display: block;
    }

    #reply-rc {
        margin-left: 0px;
        background: none;
        width: auto;
        padding: 0 10px;
    }

    .comment .user-block,
    .test-comment .user-block {
        float: none;
        width: auto;
        margin-top: 0px;
    }

    .comment .content-block,
    .test-comment .content-block {
        margin: 0px;
    }

    .pendinguser {
        width: 100%;
        padding: 0;
        margin: 15px 0 30px 0;
        border-left: none;
        border-right: none;
    }

    .pendinguser p {
        padding: 5px 10px;
    }

    .pendinguser .mod-approve-btn,
    .pendinguser .mod-deny-btn {
        font-size: 0.75rem;
        padding: 6px 14px;
        margin-left: 6px;
    }
}


/*************************************************************
   ADS / DECK
*************************************************************/

#the-deck {
    border: solid 3px var(--color-border-deck);
    margin-bottom: 15px;
    text-align: center;
    font-size: 0.625rem;
    /* 10px */
    padding: 10px 10px 5px 10px;
}

#deck-title,
#deck-title a {
    font-size: 0.625rem;
    /* 10px */
}

#hidden-ads {
    background: var(--color-surface-faint);
    text-align: center;
    padding: 10px;
    margin-bottom: 15px;
}

#hidden-ads img {
    margin-right: 5px;
}

#tinychat {
    text-align: center;
    line-height: 1.25rem;
    /* 20px */
}

#the-deck iframe {
    width: 100%;
    height: 140px;
}


/*************************************************************
   SEARCH
*************************************************************/

#search-box {
    overflow: auto;
}

#search-box input[type=submit] {
    float: right;
}

#search-phrase {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.advanced-search-link {
    display: block;
    font-size: 0.6875rem;
    margin-top: 4px;
    color: var(--color-text-dim);
}

/*************************************************************
   ADVANCED SEARCH PAGE
*************************************************************/

#search-page {
    padding: 0 10px;
}

#advanced-search-form {
    background: var(--color-surface-off);
    border: 1px solid var(--color-border-light);
    padding: 15px;
    margin-bottom: 20px;
}

.search-form-row {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-form-row label {
    width: 80px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-dim);
    flex-shrink: 0;
}

.search-form-row input[type="text"],
.search-form-row input[type="date"],
.search-form-row select {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--color-border-light);
    font-size: 0.75rem;
    background: var(--color-page-bg);
    color: var(--color-text);
}

.search-form-dates span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.search-form-dates input[type="date"] {
    flex: 0 1 180px;
}

.search-form-row button {
    padding: 6px 20px;
    font-size: 0.75rem;
    cursor: pointer;
}

.search-results-summary {
    margin-bottom: 15px;
    font-size: 0.75rem;
    color: var(--color-text-dim);
}

.search-results-section {
    margin-bottom: 20px;
}

.search-results-section h4 {
    font-size: 0.8125rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.search-result {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.search-result:last-child {
    border-bottom: none;
}

.search-result-title {
    font-size: 0.8125rem;
    margin-bottom: 3px;
}

.search-result-title a {
    font-weight: 600;
}

.search-result-snippet {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-bottom: 3px;
    line-height: 1.4;
}

/* The snippet is a link to the matched post — keep it looking like body text,
   underline only on hover so it reads as clickable. */
a.search-post-jump {
    display: block;
    color: var(--color-text-light);
    text-decoration: none;
}

a.search-post-jump:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* Friend-of / enemy-of listing (who has buddied / enemied a user). Reuses the
   .buddy-listing / .enemy-listing colours but overrides the fixed 130x62 size
   — these are compact, content-sized chips. Scoped so /users and /buddies are
   untouched. Username and member# always stack (never side by side). */
.relationship-listings {
    margin-top: 8px;
    line-height: 0; /* remove inline-block whitespace between chips */
}

.relationship-listings .buddy-listing,
.relationship-listings .enemy-listing {
    float: none;
    display: inline-block;
    vertical-align: top;
    width: auto;
    max-width: 160px;
    height: auto;
    min-height: 0;
    padding: 4px 9px;
    margin: 0 6px 6px 0;
    overflow: visible;
    line-height: 1.3;
}

.relationship-listings .username,
.relationship-listings .offline {
    display: block;
    float: none;
    width: auto;
}

.relationship-listings .username {
    font-size: 0.75rem;
    margin: 0;
    word-break: break-word;
}

.relationship-listings .offline {
    font-size: 0.5625rem;
    margin-top: 1px;
}

.search-result-meta {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.search-result-meta a {
    color: var(--color-text-dim);
}

.search-no-results {
    padding: 20px 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
}


/*************************************************************
   QUOTE IMAGES / EMBEDS
*************************************************************/

.tquote img {
    max-width: 250px !important;
}

.tquote .youtube_wrapper {
    width: 250px !important;
    height: 205px !important;
    overflow: hidden;
}

#post-shortcuts p {
    margin-bottom: 0px;
}


/*************************************************************
   AWARDS
*************************************************************/

#awards {
    width: 100%;
}

.award_content {
    margin: 20px;
}

.award_content ul li {
    margin-bottom: 10px;
}


/*************************************************************
   MISC
*************************************************************/

.edited-percent {
    font-size: 0.5625rem;
    /* 9px */
    color: var(--color-text-subtle);
    padding-top: 14px;
    display: none;
}

/* Responsive Embed: http://embedresponsively.com/ */
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* amazing-game */
.amazing-game {
    background: var(--color-game-bg);
    color: var(--color-game-text);
    padding: 14px 18px;
    font-size: 1.25rem;
    /* 20px */
}

.amazing-game button {
    opacity: 0.8;
    margin-top: 32px;
}

.error {
    color: var(--color-error);
    margin-top: 14px;
}

.loading {
    color: var(--color-text-loading);
}

.error-page-text {
    margin: 24px 0;
}

.error-page-message {
    font-weight: bold;
}

.embed-wrapper {
    position: relative;
}

.embed-wrapper iframe {
    width: 100%;
}

/* Social embed preview cards (click-to-load) */
.social-preview {
    display: inline-block;
    margin: 6px 0;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    max-width: 400px;
}

.social-preview:hover {
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow-card);
}

.social-preview-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
}

.social-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-text-white);
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
}

.social-preview-label {
    font-size: 0.8125rem;
    color: var(--color-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.social-preview-load {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-blue);
    white-space: nowrap;
}

.social-preview:hover .social-preview-load {
    text-decoration: underline;
}

.social-embed-active {
    margin: 6px 0;
    max-width: 550px;
}

.social-embed-loading {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding: 12px;
}


/*************************************************************
   NATIVE TWEET CARD  (.yht-tweet)
   Rendered server-side from Twitter's syndication JSON — no
   third-party JS. Themed entirely off CSS vars so it tracks
   light / dark / contrast / black automatically.
*************************************************************/

.yht-tweet {
    max-width: 460px;
    margin: 8px 0;
    padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-off);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text);
    overflow: hidden;
}

.yht-head {
    display: flex;
    align-items: center;
    gap: 7px;
}

.yht-author {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.yht-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
    background: var(--color-surface-neutral);
}

.yht-avatar-blank {
    display: inline-block;
}

.yht-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.yht-name {
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yht-verified {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    margin-left: 3px;
}

.yht-handle {
    color: var(--color-text-muted);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yht-logo {
    flex: 0 0 auto;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 2px 4px;
}
.yht-logo:hover { color: var(--color-text); }

.yht-body {
    margin: 6px 0 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.yht-body a {
    color: var(--color-link);
    text-decoration: 0.1px underline var(--color-link-underline);
    text-underline-offset: 2.5px;
}
.yht-body a:hover { color: var(--color-link); }

.yht-photos {
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
}
.yht-photos-multi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}
.yht-photo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
}
.yht-photos-multi .yht-photo {
    height: 100%;
    max-height: 190px;
}

.yht-video {
    display: block;
    width: 100%;
    max-height: 380px;
    margin-top: 8px;
    border-radius: 8px;
    background: #000;
}

.yht-quoted {
    display: block;
    margin-top: 8px;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: var(--color-surface-faint);
}
.yht-quoted:hover { background: var(--color-surface-neutral); }
.yht-quoted-head {
    display: block;
    font-size: 0.6875rem;
    margin-bottom: 3px;
}
.yht-quoted-head .yht-handle { display: inline; }
.yht-quoted-text {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.yht-quoted-photo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 7px;
}

.yht-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border-light);
    font-size: 0.625rem;
    color: var(--color-text-muted);
}
.yht-stats { display: inline-flex; gap: 12px; }
.yht-stat { white-space: nowrap; }
.yht-viewlink {
    margin-left: auto;
    color: var(--color-link);
    text-decoration: 0.1px underline var(--color-link-underline);
    text-underline-offset: 2.5px;
    white-space: nowrap;
}
.yht-viewlink:hover { color: var(--color-link); }

/*
 * Hover inside a card.
 *
 * The site-wide a:hover inverts to white-on-dark, which is right for a post
 * body but wrong here: it paints solid blocks over the avatar, the photos and
 * the quoted tweet. Neutralise the invert for every anchor in the card, then
 * give the text links a subtle underline instead.
 */
.yht-tweet a:hover,
.yht-tweet a:focus,
.yht-tweet-failed a:hover {
    background: transparent;
    color: inherit;
}

.yht-tweet .yht-body a:hover,
.yht-tweet .yht-viewlink:hover,
.yht-tweet-failed .yht-viewlink:hover {
    color: var(--color-link);
    text-decoration: 0.1px underline var(--color-link-underline);
    text-underline-offset: 2.5px;
}

/* Name underlines on hover — the affordance without the colour flip. */
.yht-tweet .yht-author:hover .yht-name {
    text-decoration: 0.1px underline var(--color-link-underline);
    text-underline-offset: 2.5px;
}

.yht-tweet .yht-logo:hover { color: var(--color-text); }

/* The quoted tweet keeps its own subtle lift — the reset above would have
   flattened it along with the invert. */
.yht-tweet .yht-quoted:hover { background: var(--color-surface-neutral); }
.yht-tweet .yht-photos a:hover img,
.yht-tweet .yht-quoted:hover .yht-quoted-photo { opacity: 0.93; }

.yht-tweet-failed {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.yht-failed-msg { margin-right: 6px; }

/* Neutral loading skeleton — shown briefly while a tweet resolves. No hover,
   no button, no cursor: tweets load themselves, the reader never clicks. */
.yht-loading {
    max-width: 460px;
    margin: 8px 0;
    padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-off);
    position: relative;
    overflow: hidden;
}
.yht-loading::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(127, 127, 127, 0.09), transparent);
    transform: translateX(-100%);
    animation: yhtShimmer 1.25s ease-in-out infinite;
}
.yht-skel-head { display: flex; align-items: center; gap: 9px; }
.yht-skel-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--color-surface-neutral);
    flex: 0 0 auto;
}
.yht-skel-lines { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.yht-skel-line {
    height: 9px;
    width: 70%;
    border-radius: 5px;
    background: var(--color-surface-neutral);
}
.yht-skel-short { width: 40%; }
@keyframes yhtShimmer { 100% { transform: translateX(100%); } }

@media screen and (max-width: 600px) {
    .yht-tweet, .yht-loading { max-width: 100%; }
}


/*************************************************************
   EMBED CARDS  (.yhec-card)
   One shape for Instagram, Threads, Bluesky and plain links —
   see src/embeds/card.js, which emits exactly this markup, and
   buildEmbedCard() in public/js/embeds.js, which mirrors it.
   Sized to sit alongside .yht-tweet and .yhtt-card as one system.
*************************************************************/

.yhec-card {
    /* Vertical, with the image full-bleed against the card edge — the shape
       sock mocked up. The horizontal thumbnail-beside-text version read as a
       row of metadata; this reads as the thing being linked to. */
    display: block;
    max-width: 420px;
    margin: 8px 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;              /* clips the image to the card's corners */
    background: var(--color-surface-off);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text);
}

.yhec-media {
    display: block;
    width: 100%;
    /* No padding, no inset: the picture runs edge to edge and the card's own
       overflow does the rounding. */
    background: var(--color-surface-neutral);
    line-height: 0;
}

.yhec-img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
    display: block;
}

.yhec-body {
    padding: 9px 12px 11px;
    min-width: 0;
}

.yhec-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 3px;
}

.yhec-badge {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

.yhec-source {
    font-size: 0.5625rem;
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yhec-title {
    display: block;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 3px;
    overflow-wrap: break-word;
}

.yhec-desc {
    color: var(--color-text-muted);
    overflow-wrap: break-word;
    /* Three lines is a preview; more is the post itself. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yhec-foot {
    margin-top: 5px;
    font-size: 0.6875rem;
}

.yhec-author {
    color: var(--color-text-soft);
}

/* The badge is the only thing that differs per provider. */
.yhec-instagram .yhec-badge { color: var(--color-pink); }
.yhec-threads .yhec-badge { color: var(--color-text-dark); }
.yhec-bluesky .yhec-badge { color: var(--color-blue); }

@media (max-width: 600px) {
    .yhec-card { max-width: 100%; }
    .yhec-img { max-height: 240px; }
}

/*************************************************************
   NATIVE TIKTOK CARD  (.yhtt-card)
   Preview rendered from TikTok's oEmbed data — no third-party JS.
   Their iframe player is only injected if the reader presses play.
   Sized to sit alongside .yht-tweet as one system.
*************************************************************/

.yhtt-card {
    display: flex;
    gap: 11px;
    max-width: 460px;
    margin: 8px 0;
    padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-off);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text);
}

.yhtt-media {
    position: relative;
    flex: 0 0 104px;
    width: 104px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface-neutral);
    align-self: flex-start;
}
.yhtt-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
}
.yhtt-thumb-blank { display: block; width: 100%; aspect-ratio: 9 / 16; }

.yhtt-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: background 0.15s;
}
.yhtt-play:hover { background: rgba(0, 0, 0, 0.45); }
.yhtt-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    font-size: 0.8125rem;
    padding-left: 3px;
}

.yhtt-badge {
    position: absolute;
    left: 5px;
    bottom: 5px;
    font-size: 0.5rem;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 1px 5px;
}

/* Once playing, the preview is replaced by TikTok's iframe, and their player
   dictates the geometry: their own wrapper is min-width:325px with
   overflow:hidden, and the video box is a strict 9:16 (padding-top:177.777%).
   Narrower than 325 and they slice the frame; wider and they centre it against
   a white backdrop. So the frame is pinned to 325x575 and the card stacks to
   make room — max-width sizes the content box here (no border-box on this
   card), so 325 lands the frame exactly, with nothing left to scale.
   Their caption/music strip sits below the video and is deliberately cropped
   off — the card already carries the author, caption and link. */
.yhtt-card.yhtt-live { display: block; max-width: 325px; }
.yhtt-card.yhtt-live .yhtt-body { margin-top: 9px; }
.yhtt-media.yhtt-playing {
    flex: none;
    width: 100%;
    max-width: 325px;
    height: 575px;
    aspect-ratio: auto;
    max-height: none;
    background: #000;
}
.yhtt-player {
    width: 325px;
    height: 575px;
    min-height: 0;
    border: 0;
    display: block;
    transform-origin: top left;
}

.yhtt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.yhtt-author { text-decoration: none; color: inherit; display: block; }
.yhtt-name { font-weight: 700; display: block; }
.yhtt-handle { color: var(--color-text-muted); font-size: 0.6875rem; }
.yhtt-caption {
    margin: 5px 0 7px;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yhtt-viewlink {
    margin-top: auto;
    font-size: 0.625rem;
    color: var(--color-link);
    text-decoration: 0.1px underline var(--color-link-underline);
    text-underline-offset: 2.5px;
    white-space: nowrap;
}

/* Same hover reasoning as the tweet card: the site-wide invert paints blocks
   over the thumbnail. Neutralise it inside the card. */
.yhtt-card a:hover,
.yhtt-card a:focus { background: transparent; color: inherit; }
.yhtt-card .yhtt-viewlink:hover,
.yhtt-card .yhtt-author:hover .yhtt-name { color: var(--color-link); text-decoration: underline; }

.yhtt-failed { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.yhtt-failed-msg { margin-right: 6px; }

@media screen and (max-width: 600px) {
    .yhtt-card { max-width: 100%; }
    .yhtt-media { flex-basis: 84px; width: 84px; }
}


/*************************************************************
   THEME SWITCHER
*************************************************************/

#theme-toggle {
    display: block;
    margin: 12px 0;
    padding: 8px;
    font-size: 0.5625rem;
    text-transform: uppercase;
    cursor: pointer;
    border: 0.1px dotted var(--color-border-dotted);
    background: transparent;
    color: var(--color-text-muted);
    text-align: center;
    width: 100%;
    transition: background 0.15s, color 0.15s;
}

#theme-toggle:hover {
    background: var(--color-text);
    color: var(--color-text-white);
}

@media screen and (max-width: 600px) {
    #theme-toggle {
        display: none;
    }

    .social-preview {
        max-width: 280px;
    }

    #left-column.nav-open #theme-toggle {
        display: inline-block;
        margin: 12px 14px;
    }
}


/* Form inputs in dark themes — prevent white-on-white */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="contrast"] input,
[data-theme="contrast"] textarea,
[data-theme="contrast"] select,
[data-theme="black"] input,
[data-theme="black"] textarea,
[data-theme="black"] select {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="contrast"] input::placeholder,
[data-theme="contrast"] textarea::placeholder,
[data-theme="black"] input::placeholder,
[data-theme="black"] textarea::placeholder {
    color: var(--color-text-muted);
}


/*************************************************************
   THEME: DARK
   Smokey grays + hot pink accents.
*************************************************************/

[data-theme="dark"] {
    /* Board + motion status pairs — see :root for what they drive. */
    --color-status-go-bg: #14301f;
    --color-status-go: #5fd898;
    --color-status-hold-bg: #332809;
    --color-status-hold: #e0b558;
    --color-status-live-bg: #3a0f22;
    --color-status-live: #ff5c8d;
    --color-status-against-bg: #2e1418;
    --color-status-against: #ff7b7b;

    /* Pure black/dark-grey with #ed135a pink as the only accent.
       All color tints (the old lavender links, blue/green thread row
       hues) removed — only text greys, dark greys, and hot pink. */
    --color-text: #e4e4e8;
    --color-text-white: #ffffff;
    --color-text-black: #f0f0f2;
    --color-text-muted: #86868e;
    --color-text-light: #929298;
    --color-text-medium: #9e9ea4;
    --color-text-dim: #b0b0b6;
    --color-text-soft: #86868e;
    --color-text-faint: #6a6a72;
    --color-text-subtle: #58585e;
    --color-text-dark: #d4d4d8;
    --color-text-notify: #bdbdc4;
    --color-text-loading: #3a3a3e;
    --color-text-category: #929298;

    /* Accent — the site's brand pink, used everywhere a link or
       call-out sits on top of the dark chrome */
    --color-link: #ed135a;
    --color-link-hover-text: #ffffff;
    --color-link-hover-bg: #ed135a;
    --color-link-underline: rgba(237, 19, 90, 0.35);

    /* Neutral greyscale page + surfaces */
    --color-page-bg: #0f0f11;
    --color-surface: #1a1a1c;
    --color-surface-light: #1c1c1e;
    --color-surface-off: #161618;
    --color-surface-faint: #141416;
    --color-surface-warm: #1f1f21;
    --color-surface-worth: #212123;
    --color-surface-neutral: #1c1c1e;

    /* Slop / red / error states kept distinguishable with deep reds
       so a mod-flagged post doesn't read as an accent. */
    --color-slop-high: rgba(255, 80, 80, 0.25);
    --color-slop-border: #cc4040;
    --color-slop-text: #ff8888;

    /* Dark chrome: deepest blacks for header/nav */
    --color-dark: #050506;
    --color-dark-alt: #09090a;
    --color-dark-hover: #26262a;
    --color-dark-deep: #030304;
    --color-dark-deepest: #000000;
    --color-dark-pagination: #5a5a62;

    /* Thread-listing highlights were previously blue-tinted; now neutral
       grey with pink reserved for active/accent states. */
    --color-blue: #ed135a;
    --color-blue-line: #3a3a3e;
    --color-blue-bg: #1e1e20;
    --color-blue-bg-light: #202022;
    --color-blue-thread: #1c1c1e;
    --color-blue-thread-alt: #1e1e20;

    --color-green-bg: #1d1d1f;
    --color-green-listing: #1b1b1d;

    /* Mod panel — neutral grey with pink links */
    --color-mod-bg: #141416;
    --color-mod-text: #e4e4e8;
    --color-mod-link: #ed135a;
    --color-mod-border: #333338;
    --color-mod-count-bg: #e4e4e8;
    --color-mod-count-text: #141416;

    --color-pink: #ed135a;
    --color-pink-profile: #ed135a;

    /* Errors / NSFW kept in red family — visually distinct from pink */
    --color-red-bg: #2a1a1e;
    --color-red-nsfw: #ff5c5c;
    --color-red-toggle: #bb4040;
    --color-red-error-dark: #ff5050;
    --color-red-error-label: #ff6666;
    --color-red-input-bg: #2e1a1e;
    --color-error: #ff5050;
    --color-error-bg: #2a1c1c;

    /* Neutral grey borders across the board */
    --color-border: #2e2e32;
    --color-border-light: #252528;
    --color-border-medium: #3a3a3e;
    --color-border-dotted: #3e3e42;
    --color-border-dark: #56565c;
    --color-border-form: #3a3a3e;
    --color-border-deck: #1e1e20;
    --color-border-separator: #2e2e32;
    --color-border-control: #3e3e42;
    --color-border-pending: #56565c;
    --color-border-mobile-header: #2e2e32;

    --color-spoiler-bg: #242428;
    --color-game-bg: #09090a;
    --color-game-text: #ed135a;
    --color-mobile-pill-bg: #2e2e32;
    --color-mobile-pill-text: #e4e4e8;
    --color-mobile-reload-bg: #252528;
    --color-mobile-reload-text: #d0d0d0;
}


/*************************************************************
   THEME: HIGH CONTRAST
   Pure black bg, bright white text, bold saturated colors.
*************************************************************/

[data-theme="contrast"] {
    /* Board + motion status pairs — see :root for what they drive. */
    --color-status-go-bg: #003322;
    --color-status-go: #00ff99;
    --color-status-hold-bg: #332800;
    --color-status-hold: #ffcc00;
    --color-status-live-bg: #330014;
    --color-status-live: #ff3388;
    --color-status-against-bg: #330000;
    --color-status-against: #ff5555;

    --color-text: #ffffff;
    --color-text-white: #ffffff;
    --color-text-black: #ffffff;
    --color-text-muted: #b0b0b0;
    --color-text-light: #c0c0c0;
    --color-text-medium: #cccccc;
    --color-text-dim: #dddddd;
    --color-text-soft: #b0b0b0;
    --color-text-faint: #909090;
    --color-text-subtle: #808080;
    --color-text-dark: #f0f0f0;
    --color-text-notify: #e0e0e0;
    --color-text-loading: #555555;
    --color-text-category: #cccccc;
    --color-link: #00ccff;
    --color-link-hover-text: #000000;
    --color-link-hover-bg: #00ccff;
    --color-link-underline: rgba(0, 204, 255, 0.4);
    --color-page-bg: #000000;
    --color-surface: #141414;
    --color-surface-light: #111111;
    --color-surface-off: #0c0c0c;
    --color-surface-faint: #080808;
    --color-surface-warm: #1a1400;
    --color-surface-worth: #1c1600;
    --color-surface-neutral: #161616;
    --color-slop-high: rgba(255, 50, 50, 0.35);
    --color-slop-border: #ff3333;
    --color-slop-text: #ff6666;
    --color-dark: #000000;
    --color-dark-alt: #000000;
    --color-dark-hover: #2a2a2a;
    --color-dark-deep: #000000;
    --color-dark-deepest: #000000;
    --color-dark-pagination: #999999;
    --color-blue: #00ccff;
    --color-blue-line: #004488;
    --color-blue-bg: #001a40;
    --color-blue-bg-light: #001e48;
    --color-blue-thread: #001430;
    --color-blue-thread-alt: #001636;
    --color-green-bg: #003a00;
    --color-green-listing: #0a3a0a;
    --color-mod-bg: #000000;
    --color-mod-text: #ffffff;
    --color-mod-link: #00ccff;
    --color-mod-border: #555555;
    --color-mod-count-bg: #ffffff;
    --color-mod-count-text: #000000;
    --color-pink: #ff3388;
    --color-pink-profile: #ff44cc;
    --color-red-bg: #330000;
    --color-red-nsfw: #ff4444;
    --color-red-toggle: #dd3333;
    --color-red-error-dark: #ff3333;
    --color-red-error-label: #ff5555;
    --color-red-input-bg: #3a0000;
    --color-error: #ff3333;
    --color-error-bg: #2a2a00;
    --color-border: #555555;
    --color-border-light: #333333;
    --color-border-medium: #666666;
    --color-border-dotted: #777777;
    --color-border-dark: #999999;
    --color-border-form: #666666;
    --color-border-deck: #1a1a1a;
    --color-border-separator: #555555;
    --color-border-control: #777777;
    --color-border-pending: #999999;
    --color-border-mobile-header: #555555;
    --color-spoiler-bg: #2a2a2a;
    --color-game-bg: #000000;
    --color-game-text: #00ff00;
    --color-mobile-pill-bg: #333333;
    --color-mobile-pill-text: #ffffff;
    --color-mobile-reload-bg: #222222;
    --color-mobile-reload-text: #eeeeee;
}


/*************************************************************
   THEME: BLACK
   Pure white on pure black. Nothing else.
*************************************************************/

[data-theme="black"] {
    /* Board + motion status pairs — see :root for what they drive. */
    --color-status-go-bg: #002d1c;
    --color-status-go: #00ff88;
    --color-status-hold-bg: #2b2200;
    --color-status-hold: #ffcc33;
    --color-status-live-bg: #2a2a2a;
    --color-status-live: #ffffff;
    --color-status-against-bg: #330000;
    --color-status-against: #ff4444;

    --color-text: #ffffff;
    /* Flipped to black so text paired with the accent surface
       (--color-pink, which becomes #ffffff in this theme) stays
       readable — otherwise white-on-white. Elements that genuinely
       want "always white text on dark surface" should hardcode #fff
       rather than rely on this var. */
    --color-text-white: #000000;
    --color-text-black: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-text-light: #bbbbbb;
    --color-text-medium: #bbbbbb;
    --color-text-dim: #cccccc;
    --color-text-soft: #aaaaaa;
    --color-text-faint: #888888;
    --color-text-subtle: #777777;
    --color-text-dark: #eeeeee;
    --color-text-notify: #dddddd;
    --color-text-loading: #444444;
    --color-text-category: #bbbbbb;
    --color-link: #ffffff;
    --color-link-hover-text: #000000;
    --color-link-hover-bg: #ffffff;
    --color-link-underline: rgba(255, 255, 255, 0.3);
    --color-page-bg: #000000;
    --color-surface: #0a0a0a;
    --color-surface-light: #080808;
    --color-surface-off: #050505;
    --color-surface-faint: #030303;
    --color-surface-warm: #0a0800;
    --color-surface-worth: #0c0a00;
    --color-surface-neutral: #0c0c0c;
    --color-slop-high: rgba(255, 255, 255, 0.1);
    --color-slop-border: #666666;
    --color-slop-text: #cccccc;
    --color-dark: #000000;
    --color-dark-alt: #000000;
    --color-dark-hover: #1a1a1a;
    --color-dark-deep: #000000;
    --color-dark-deepest: #000000;
    --color-dark-pagination: #888888;
    --color-blue: #ffffff;
    --color-blue-line: #333333;
    --color-blue-bg: #0a0a14;
    --color-blue-bg-light: #0c0c18;
    --color-blue-thread: #080810;
    --color-blue-thread-alt: #0a0a12;
    --color-green-bg: #0a100a;
    --color-green-listing: #080e08;
    --color-mod-bg: #000000;
    --color-mod-text: #ffffff;
    --color-mod-link: #ffffff;
    --color-mod-border: #444444;
    --color-mod-count-bg: #ffffff;
    --color-mod-count-text: #000000;
    --color-pink: #ffffff;
    --color-pink-profile: #cccccc;
    --color-red-bg: #140000;
    --color-red-nsfw: #ff4444;
    --color-red-toggle: #999999;
    --color-red-error-dark: #ff3333;
    --color-red-error-label: #ff5555;
    --color-red-input-bg: #1a0000;
    --color-error: #ff3333;
    --color-error-bg: #141400;
    --color-border: #333333;
    --color-border-light: #1a1a1a;
    --color-border-medium: #444444;
    --color-border-dotted: #555555;
    --color-border-dark: #777777;
    --color-border-form: #444444;
    --color-border-deck: #0a0a0a;
    --color-border-separator: #333333;
    --color-border-control: #555555;
    --color-border-pending: #777777;
    --color-border-mobile-header: #333333;
    --color-spoiler-bg: #1a1a1a;
    --color-game-bg: #000000;
    --color-game-text: #ffffff;
    --color-mobile-pill-bg: #222222;
    --color-mobile-pill-text: #ffffff;
    --color-mobile-reload-bg: #111111;
    --color-mobile-reload-text: #eeeeee;
}


/*************************************************************
   THEME: SOLARIZED
*************************************************************/

[data-theme="solarized"] {
    /* Board + motion status pairs — see :root for what they drive. */
    --color-status-go-bg: #e8ecd5;
    --color-status-go: #5f7300;
    --color-status-hold-bg: #f3ead0;
    --color-status-hold: #b58900;
    --color-status-live-bg: #f4e2ea;
    --color-status-live: #d33682;
    --color-status-against-bg: #f6e0da;
    --color-status-against: #dc322f;

    --color-text: #586e75;
    --color-text-white: #fdf6e3;
    --color-text-black: #002b36;
    --color-text-muted: #93a1a1;
    --color-text-light: #839496;
    --color-text-medium: #657b83;
    --color-text-dim: #586e75;
    --color-text-soft: #93a1a1;
    --color-text-faint: #93a1a1;
    --color-text-subtle: #839496;
    --color-text-dark: #073642;
    --color-text-notify: #073642;
    --color-text-loading: #eee8d5;
    --color-text-category: #839496;
    --color-link: #268bd2;
    --color-link-hover-text: #fdf6e3;
    --color-link-hover-bg: #268bd2;
    --color-link-underline: rgba(38, 139, 210, 0.25);
    --color-page-bg: #fdf6e3;
    --color-surface: #eee8d5;
    --color-surface-light: #f0ead6;
    --color-surface-off: #f5efdc;
    --color-surface-faint: #f8f2e0;
    --color-surface-warm: #f5e6c8;
    --color-surface-worth: #f5eaba;
    --color-surface-neutral: #eee8d5;
    --color-slop-high: rgba(220, 130, 130, 0.35);
    --color-slop-border: #dc8282;
    --color-slop-text: #b04040;
    --color-dark: #073642;
    --color-dark-alt: #002b36;
    --color-dark-hover: #073642;
    --color-dark-deep: #002b36;
    --color-dark-deepest: #002028;
    --color-dark-pagination: #586e75;
    --color-blue: #268bd2;
    --color-blue-line: #b5d7ef;
    --color-blue-bg: #e8f4fc;
    --color-blue-bg-light: #dff0fa;
    --color-blue-thread: #f3f9fd;
    --color-blue-thread-alt: #f7fbfe;
    --color-green-bg: #e6f0d8;
    --color-green-listing: #ddebc8;
    --color-mod-bg: #073642;
    --color-mod-text: #93a1a1;
    --color-mod-link: #268bd2;
    --color-mod-border: #586e75;
    --color-mod-count-bg: #93a1a1;
    --color-mod-count-text: #073642;
    --color-pink: #d33682;
    --color-pink-profile: #d33682;
    --color-red-bg: #fce8e8;
    --color-red-nsfw: #dc322f;
    --color-red-toggle: #dc322f;
    --color-red-error-dark: #cb4b16;
    --color-red-error-label: #dc322f;
    --color-red-input-bg: #fdd;
    --color-error: #dc322f;
    --color-error-bg: #fdf6e3;
    --color-border: #d3cbb7;
    --color-border-light: #eee8d5;
    --color-border-medium: #c9c1ab;
    --color-border-dotted: #93a1a1;
    --color-border-dark: #586e75;
    --color-border-form: #93a1a1;
    --color-border-deck: #eee8d5;
    --color-border-separator: #d3cbb7;
    --color-border-control: #93a1a1;
    --color-border-pending: #93a1a1;
    --color-spoiler-bg: #eee8d5;
    --color-game-bg: #002b36;
    --color-game-text: #859900;
    --color-mobile-pill-bg: #073642;
    --color-mobile-pill-text: #eee8d5;
}


/*************************************************************
   THEME: VAPORWAVE
*************************************************************/

[data-theme="vaporwave"] {
    /* Board + motion status pairs — see :root for what they drive. */
    --color-status-go-bg: #16323a;
    --color-status-go: #5bffd0;
    --color-status-hold-bg: #3a2a10;
    --color-status-hold: #ffd782;
    --color-status-live-bg: #3a1740;
    --color-status-live: #ff71ce;
    --color-status-against-bg: #3a1030;
    --color-status-against: #ff6b9d;

    --color-text: #e0d0ff;
    --color-text-white: #ffffff;
    --color-text-black: #f0e0ff;
    --color-text-muted: #9080b0;
    --color-text-light: #a090c0;
    --color-text-medium: #b0a0d0;
    --color-text-dim: #c0b0e0;
    --color-text-soft: #8878a8;
    --color-text-faint: #7868a0;
    --color-text-subtle: #685890;
    --color-text-dark: #f0e0ff;
    --color-text-notify: #d0c0f0;
    --color-text-loading: #4a3a6a;
    --color-text-category: #a090c0;
    --color-link: #ff71ce;
    --color-link-hover-text: #1a0a2e;
    --color-link-hover-bg: #ff71ce;
    --color-link-underline: rgba(255, 113, 206, 0.3);
    --color-page-bg: #1a0a2e;
    --color-surface: #2a1a3e;
    --color-surface-light: #251538;
    --color-surface-off: #221235;
    --color-surface-faint: #1e0e30;
    --color-surface-warm: #2e1540;
    --color-surface-worth: #2a1840;
    --color-surface-neutral: #302050;
    --color-slop-high: rgba(140, 40, 80, 0.35);
    --color-slop-border: #8c2850;
    --color-slop-text: #e870a0;
    --color-dark: #0e0520;
    --color-dark-alt: #120828;
    --color-dark-hover: #3a2a5a;
    --color-dark-deep: #0a0318;
    --color-dark-deepest: #050210;
    --color-dark-pagination: #5a4a7a;
    --color-blue: #01cdfe;
    --color-blue-line: #1a3a5a;
    --color-blue-bg: #1a1a40;
    --color-blue-bg-light: #1e1e48;
    --color-blue-thread: #1e1535;
    --color-blue-thread-alt: #201838;
    --color-green-bg: #1a2a28;
    --color-green-listing: #182826;
    --color-mod-bg: #1a0a28;
    --color-mod-text: #d4a0e8;
    --color-mod-link: #ff71ce;
    --color-mod-border: #5a2d6a;
    --color-mod-count-bg: #d4a0e8;
    --color-mod-count-text: #1a0a28;
    --color-pink: #ff71ce;
    --color-pink-profile: #b967ff;
    --color-red-bg: #3a1a2a;
    --color-red-nsfw: #ff6b9d;
    --color-red-toggle: #cc3366;
    --color-red-error-dark: #ff4488;
    --color-red-error-label: #ff6699;
    --color-red-input-bg: #3a1a28;
    --color-error: #ff4488;
    --color-error-bg: #2a1a30;
    --color-border: #3a2a5a;
    --color-border-light: #2a1a4a;
    --color-border-medium: #4a3a6a;
    --color-border-dotted: #5a4a7a;
    --color-border-dark: #6a5a8a;
    --color-border-form: #5a4a7a;
    --color-border-deck: #2a1a3e;
    --color-border-separator: #3a2a5a;
    --color-border-control: #5a4a7a;
    --color-border-pending: #6a5a8a;
    --color-spoiler-bg: #2a1a3e;
    --color-game-bg: #0a0318;
    --color-game-text: #05ffa1;
    --color-mobile-pill-bg: #3a2a5a;
    --color-mobile-pill-text: #e0d0ff;
}


/*************************************************************
   THEME: NEWSPAPER
*************************************************************/

[data-theme="newspaper"] {
    /* Board + motion status pairs — see :root for what they drive. */
    --color-status-go-bg: #e3e0d5;
    --color-status-go: #2e2e2e;
    --color-status-hold-bg: #ece5d0;
    --color-status-hold: #5a5344;
    --color-status-live-bg: #dedad0;
    --color-status-live: #1a1a1a;
    --color-status-against-bg: #efe2de;
    --color-status-against: #9a2b20;

    --color-text: #1a1a1a;
    --color-text-white: #ffffff;
    --color-text-black: #000000;
    --color-text-muted: #666666;
    --color-text-light: #555555;
    --color-text-medium: #444444;
    --color-text-dim: #333333;
    --color-text-soft: #777777;
    --color-text-faint: #888888;
    --color-text-subtle: #999999;
    --color-text-dark: #111111;
    --color-text-notify: #222222;
    --color-text-loading: #cccccc;
    --color-text-category: #666666;
    --color-link: #1a1a1a;
    --color-link-hover-text: #ffffff;
    --color-link-hover-bg: #1a1a1a;
    --color-link-underline: rgba(0, 0, 0, 0.3);
    --color-page-bg: #f5f0e8;
    --color-surface: #ece7df;
    --color-surface-light: #eee9e1;
    --color-surface-off: #f0ebe3;
    --color-surface-faint: #f2ede5;
    --color-surface-warm: #ece5d8;
    --color-surface-worth: #e8e1d0;
    --color-surface-neutral: #e5e0d8;
    --color-slop-high: rgba(200, 140, 140, 0.35);
    --color-slop-border: #c88c8c;
    --color-slop-text: #a05050;
    --color-dark: #1a1a1a;
    --color-dark-alt: #222222;
    --color-dark-hover: #333333;
    --color-dark-deep: #111111;
    --color-dark-deepest: #0a0a0a;
    --color-dark-pagination: #444444;
    --color-blue: #333333;
    --color-blue-line: #c8c3bb;
    --color-blue-bg: #eae5dd;
    --color-blue-bg-light: #e8e3db;
    --color-blue-thread: #f0ebe3;
    --color-blue-thread-alt: #f2ede5;
    --color-green-bg: #e8e3db;
    --color-green-listing: #e5e0d8;
    --color-mod-bg: #333333;
    --color-mod-text: #d4d0c8;
    --color-mod-link: #b8b4aa;
    --color-mod-border: #555555;
    --color-mod-count-bg: #d4d0c8;
    --color-mod-count-text: #333333;
    --color-pink: #1a1a1a;
    --color-pink-profile: #444444;
    --color-red-bg: #ece7df;
    --color-red-nsfw: #666666;
    --color-red-toggle: #888888;
    --color-red-error-dark: #cc0000;
    --color-red-error-label: #cc0000;
    --color-red-input-bg: #f0d0d0;
    --color-error: #cc0000;
    --color-error-bg: #f5f0e8;
    --color-border: #c8c3bb;
    --color-border-light: #d8d3cb;
    --color-border-medium: #b8b3ab;
    --color-border-dotted: #999999;
    --color-border-dark: #666666;
    --color-border-form: #999999;
    --color-border-deck: #ddd8d0;
    --color-border-separator: #c8c3bb;
    --color-border-control: #999999;
    --color-border-pending: #999999;
    --color-spoiler-bg: #e5e0d8;
    --color-game-bg: #1a1a1a;
    --color-game-text: #f5f0e8;
    --color-mobile-pill-bg: #333333;
    --color-mobile-pill-text: #f5f0e8;
}

/*
 * THEME: GRAY (palette by Nobody6254)
 * Ported from https://vaska.com/yh/newyaydark.css — the CSS Nobody
 * was actively using as his custom_css. Pure CSS-variable override
 * so it slots into the theme toggle like every other preset.
 */
[data-theme="gray"] {
    /* Board + motion status pairs — see :root for what they drive. */
    --color-status-go-bg: #3a4a40;
    --color-status-go: #8fd9ac;
    --color-status-hold-bg: #4d4636;
    --color-status-hold: #e8c47a;
    --color-status-live-bg: #533341;
    --color-status-live: #ff6f97;
    --color-status-against-bg: #513a3a;
    --color-status-against: #ff9a9a;

    --color-text: #ffffff;
    --color-text-white: #4b4b4b;
    --color-text-black: #ffffff;
    --color-text-muted: #939393;
    --color-text-light: #979797;
    --color-text-medium: #9f9e9e;
    --color-text-dim: #afafaf;
    --color-text-soft: #808080;
    --color-text-faint: #9c9c9c;
    --color-text-subtle: #626262;
    --color-text-dark: #606060;
    --color-text-notify: #727272;
    --color-text-loading: #505050;
    --color-text-category: #8d8d8d;

    --color-link: #ebebeb;
    --color-link-hover-text: #242424;
    --color-link-hover-bg: #bbbbbb;
    --color-link-underline: rgba(227, 227, 227, 0.15);

    --color-page-bg: #494949;
    --color-surface: #424242;
    --color-surface-light: #4a4a4a;
    --color-surface-off: #464646;
    --color-surface-faint: #505050;
    /* Warm/worth: neutral grays (R=G=B) so they don't read as brown on a
       gray bg. Differentiation via lightness instead of hue. */
    --color-surface-warm: #4a4a4a;
    --color-surface-worth: #484848;
    --color-surface-neutral: #4e4e4e;

    --color-slop-high: rgba(255, 182, 193, 0.25);
    --color-slop-border: #ff9eb5;
    --color-slop-text: #c44569;

    --color-dark: #2e2e2e;
    --color-dark-alt: #3a3a3a;
    --color-dark-hover: #474747;
    --color-dark-deep: #282828;
    --color-dark-deepest: #1f1f1f;
    --color-dark-pagination: #666666;

    /* Thread-row backgrounds unified — no visual stripe at all. Differen-
       tiation between unread / your / participated threads could come back
       via icon or border if needed, but the user explicitly wanted zero
       alternation on the gray theme. */
    --color-blue: #bbbbbb;
    --color-blue-line: #6b6b6b;
    --color-blue-bg: #4a4a4a;
    --color-blue-bg-light: #4a4a4a;
    --color-blue-thread: #4a4a4a;
    --color-blue-thread-alt: #4a4a4a;

    --color-green-bg: #4a4a4a;
    --color-green-listing: #4a4a4a;

    --color-mod-bg: #2c2c2c;
    --color-mod-text: #e0e0e0;
    --color-mod-link: #b0c4de;
    --color-mod-border: #555555;
    --color-mod-count-bg: #e0e0e0;
    --color-mod-count-text: #2c2c2c;

    --color-pink: #ed135a;
    --color-pink-profile: #ff6de2;
    /* Errors tinted red so they stand out — keep minimal saturation */
    --color-red-bg: #4a3e3e;
    --color-red-nsfw: #f06171;
    --color-red-toggle: #8a5050;
    --color-red-error-dark: #cc0000;
    --color-red-error-label: #ff3333;
    --color-red-input-bg: #503838;
    --color-error: #ff5555;
    --color-error-bg: #4a4238;

    --color-border: #656565;
    --color-border-light: #5a5a5a;
    --color-border-medium: #7a7a7a;
    --color-border-dotted: #6f6f6f;
    --color-border-dark: #3f3f3f;
    --color-border-form: #6b6b6b;
    --color-border-deck: #505050;
    --color-border-separator: #5d5d5d;
    --color-border-control: #6a6a6a;
    --color-border-pending: #7a7a7a;
    --color-border-mobile-header: #555555;

    --color-spoiler-bg: #5a5a5a;
    --color-spoiler-label-bg: #c44040;
    --color-spoiler-label-text: #ffffff;

    --color-game-bg: #000000;
    --color-game-text: #00ff00;

    --color-mobile-pill-bg: #444444;
    --color-mobile-pill-text: #eeeeee;
    --color-mobile-reload-bg: #333333;
    --color-mobile-reload-text: #dddddd;
}

/*************************************************************
   CHAT
*************************************************************/

#chatroom {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    min-height: 400px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

#chat-messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    background: var(--color-page-bg);
}

#chat-load-more {
    text-align: center;
    padding: 8px;
    font-size: 0.6875rem;
}

#chat-load-more a {
    color: var(--color-text-muted);
}

.chat-message {
    display: flex;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.chat-message:last-child {
    border-bottom: none;
}

.chat-message.chat-own {
    background-color: var(--color-blue-bg-light);
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
}

.chat-avatar {
    width: 16px;
    height: 16px;
    min-width: 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 3px 8px 0 0;
}

.chat-body {
    flex: 1;
    min-width: 0;
}

.chat-meta {
    font-size: 0.625rem;
    margin-bottom: 2px;
}

.chat-username {
    font-weight: 700;
    margin-right: 6px;
}

.chat-time {
    color: var(--color-text-muted);
    font-size: 0.5625rem;
}

.chat-content {
    font-size: 0.75rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chat-content p {
    margin: 0 0 4px 0;
}

.chat-content p:last-child {
    margin-bottom: 0;
}

.chat-content code {
    background: var(--color-surface);
    padding: 1px 3px;
    font-size: 0.6875rem;
}

.chat-content pre {
    background: var(--color-surface);
    padding: 6px 8px;
    overflow-x: auto;
    font-size: 0.6875rem;
    margin: 4px 0;
}

.chat-content img {
    max-width: 100%;
    max-height: 300px;
}

.chat-content blockquote {
    border-left: 3px solid var(--color-border);
    padding-left: 8px;
    margin: 4px 0;
    color: var(--color-text-muted);
}

#chat-input-area {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
    padding: 8px 10px;
    background: var(--color-surface-faint);
}

#chat-input-row {
    display: flex;
    gap: 8px;
}

#chat-input {
    flex: 1;
    resize: none;
    padding: 6px 8px;
    border: 1px solid var(--color-border-form);
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    min-height: 36px;
    max-height: 120px;
    background: var(--color-page-bg);
    color: var(--color-text);
}

#chat-input:focus {
    outline: none;
    border-color: var(--color-blue);
}

#chat-send {
    padding: 6px 16px;
    background: var(--color-dark);
    color: var(--color-text-white);
    border: none;
    cursor: pointer;
    font-size: 0.6875rem;
    text-transform: uppercase;
    align-self: flex-end;
}

#chat-send:hover {
    background: var(--color-dark-hover);
}

#chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#chat-input-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.5625rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

#chat-char-count.chat-char-warning {
    color: var(--color-red-error-dark);
}

.chat-markdown-hint {
    font-style: italic;
}

@media screen and (max-width: 768px) {
    #chatroom {
        height: calc(100vh - 60px);
    }

    .chat-avatar {
        display: none;
    }
}


/*************************************************************
   MODERATOR SYSTEM
*************************************************************/

.mod-action-btn {
    display: block;
    width: 100%;
    padding: 5px 8px;
    margin-bottom: 4px;
    font-size: 0.6875rem;
    cursor: pointer;
    border: solid 1px var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
}

.mod-action-btn:hover {
    background: var(--color-surface-light);
}

a.mod-action-btn {
    text-decoration: none;
    box-sizing: border-box;
}

.mod-suspend-btn {
    border-color: var(--color-danger);
    color: var(--color-red-error-dark);
}

.mod-suspend-btn:hover {
    background: var(--color-red-bg);
}

.mod-unsuspend-btn {
    border-color: var(--color-vote-up);
    color: var(--color-vote-up);
}

.mod-makemod-btn {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.mod-removemod-btn {
    border-color: var(--color-text-muted);
    color: var(--color-text-muted);
}

.mod-panel #moderation h3 {
    color: var(--color-blue);
}

.suspended-notice {
    padding: 10px;
    margin: 10px 0;
    background: var(--color-red-bg);
    border: 1px solid var(--color-danger);
    font-size: 0.75rem;
}

.suspended-notice h3 {
    color: var(--color-red-error-dark);
    margin-bottom: 4px;
}

.suspended-notice p {
    margin: 0;
}

/* Moderator panel in preferences */
.mod-panel-prefs {
    margin-top: 10px;
}

.mod-panel-item {
    background: var(--color-surface-off);
    border: solid 1px var(--color-border);
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.mod-panel-item strong {
    font-size: 0.8125rem;
}

.mod-panel-icon {
    margin-right: 6px;
    vertical-align: middle;
}


.mod-deleted-list {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
}

.mod-deleted-list li {
    padding: 3px 0;
    font-size: 0.75rem;
}

.mod-deleted-list a {
    font-weight: bold;
    color: var(--color-danger);
}

.mod-deleted-meta {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    margin-left: 4px;
}

.mod-panel-desc {
    margin: 4px 0 0 0;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.ip-report-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ip-report-table thead th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    font-weight: bold;
    color: var(--color-text-muted);
}

.ip-report-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.ip-report-table .ip-report-ip {
    width: 140px;
    white-space: nowrap;
}

.ip-report-table .ip-report-count {
    width: 50px;
    text-align: center;
    font-weight: bold;
}

.ip-report-table .ip-report-users a {
    margin-right: 6px;
}

.ip-report-user-suspended {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.ip-report-user-banned {
    color: var(--color-danger);
    font-weight: bold;
}

.ip-report-flag {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    margin-right: 6px;
}

/* ============================
   VOTE REPORT
   ============================ */

.vote-report-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.vote-report-table thead th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    font-weight: bold;
    color: var(--color-text-muted);
}
.vote-report-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.vote-report-voter { width: 140px; white-space: nowrap; }
.vote-report-count { width: 50px; text-align: center; font-weight: bold; }
.vote-report-ips { width: 70px; text-align: center; }
.vote-report-ips.vote-report-flag { color: var(--color-danger); font-weight: bold; cursor: help; }
.vote-report-target { margin: 2px 0; }
.vote-report-target-suspended a { text-decoration: line-through; color: var(--color-text-muted); }
.vote-report-target-banned a { color: var(--color-danger); font-weight: bold; }
.vote-report-meta { color: var(--color-text-muted); font-size: 0.6875rem; }
.vote-report-warn { color: var(--color-danger); }
.vote-report-flag {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    margin-right: 6px;
}
.vote-report-list { list-style: none; padding-left: 0; margin-top: 6px; }
.vote-report-list > li { padding: 6px 0; border-bottom: 1px dashed var(--color-border); }
.vote-report-sublist { margin: 4px 0 0 18px; padding-left: 0; list-style: disc; }
.vote-report-sublist li { padding: 1px 0; font-size: 0.8125rem; }

/* ============================
   FEED
   ============================ */

.feed-subtitle { font-size: 0.75rem; color: var(--color-text-muted); font-weight: normal; }
.feed-intro { color: var(--color-text-muted); font-size: 0.8125rem; margin: 6px 0 12px; }
.feed-list { list-style: none; padding: 0; margin: 0; }
.feed-thread { padding: 10px 8px; border-bottom: 1px solid var(--color-border); }
.feed-thread-unread { background: var(--color-surface-light); }
.feed-thread-header { font-size: 0.9rem; }
.feed-thread-title { font-weight: bold; }
.feed-thread-meta { color: var(--color-text-muted); font-size: 0.75rem; margin-left: 4px; }
.feed-unread-dot { color: var(--color-danger); font-size: 1.2rem; font-weight: bold; vertical-align: middle; }
.feed-preview { margin: 6px 0 0 18px; border-left: 2px solid var(--color-border); padding-left: 8px; }
.feed-preview-comment { margin: 4px 0; font-size: 0.8125rem; }
.feed-preview-author { font-weight: bold; }
.feed-preview-when { color: var(--color-text-muted); font-size: 0.6875rem; margin-left: 4px; }
.feed-preview-content { color: var(--color-text); margin: 2px 0 4px 0; max-height: 4.5em; overflow: hidden; }
.feed-sentinel, .feed-end { padding: 14px; text-align: center; color: var(--color-text-muted); font-size: 0.8125rem; }

#feed-new-pill-wrap { text-align: center; margin: 8px 0; }
#feed-new-pill {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-danger);
    color: var(--color-text-white);
    font-size: 0.8125rem;
    font-weight: bold;
    text-decoration: none;
}
#feed-new-pill:hover { background: var(--color-danger-deep); }

/* ============================
   POLL STYLES
   ============================ */

.poll-container {
    margin: 12px 0 8px 0;
    padding: 12px;
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    max-width: 420px;
}

.poll-question {
    font-weight: bold;
    font-size: 0.9375rem;
    margin-bottom: 10px;
    color: var(--color-text);
}

.poll-vote-form {
    margin-bottom: 8px;
}

.poll-option-label {
    display: block;
    padding: 6px 8px;
    margin: 4px 0;
    cursor: pointer;
    transition: background 0.15s;
}

.poll-option-label:hover {
    background: var(--color-blue-bg);
}

.poll-vote-radio {
    margin-right: 8px;
    vertical-align: middle;
}

.poll-option-text {
    vertical-align: middle;
    font-size: 0.875rem;
}

.poll-vote-btn {
    margin-top: 8px;
    padding: 4px 16px;
    background: var(--color-pink);
    color: var(--color-text-white);
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
}

.poll-vote-btn:hover {
    opacity: 0.9;
}

.poll-vote-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.poll-results {
    margin-bottom: 8px;
}

.poll-result-row {
    display: flex;
    align-items: center;
    margin: 6px 0;
    gap: 8px;
}

.poll-result-label {
    min-width: 120px;
    font-size: 0.8125rem;
    color: var(--color-text);
}

.poll-result-bar-bg {
    flex: 1;
    height: 18px;
    background: var(--color-surface);
    overflow: hidden;
}

.poll-result-bar {
    height: 100%;
    background: var(--color-pink);
    min-width: 2px;
    transition: width 0.3s;
}

.poll-result-stats {
    min-width: 70px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.poll-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dotted var(--color-border-dotted);
}

.poll-manage a {
    cursor: pointer;
    color: var(--color-blue);
    text-decoration: none;
    font-size: 0.75rem;
}

.poll-manage a:hover {
    text-decoration: underline;
}

/* Poll Creator (reply form) */

#poll-creator {
    margin: 10px 0;
    padding: 8px 0;
}

#poll-toggle-label {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

#poll-toggle-label:hover {
    color: var(--color-text);
}

#poll-toggle {
    margin-right: 4px;
    vertical-align: middle;
}

#poll-form {
    margin-top: 10px;
    padding: 12px;
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
}

#poll-question {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 10px;
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.poll-option-input {
    width: calc(100% - 36px);
    padding: 5px 8px;
    margin: 3px 0;
    font-size: 0.8125rem;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.poll-option-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.poll-option-row .poll-option-input {
    flex: 1;
    width: auto;
}

.poll-remove-option {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 2px 6px;
    line-height: 1;
}

.poll-remove-option:hover {
    color: var(--color-pink);
}

#poll-add-option {
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.75rem;
    background: none;
    border: 1px dashed var(--color-border);
    cursor: pointer;
    color: var(--color-text-muted);
}

#poll-add-option:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

#poll-end-time-row {
    margin-top: 10px;
    font-size: 0.8125rem;
}

#poll-end-time-row label {
    margin-right: 6px;
    color: var(--color-text-muted);
}

#poll-end-time {
    padding: 3px 6px;
    font-size: 0.8125rem;
    border: 1px solid var(--color-border);
}

#poll-clear-end-time {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    background: none;
    border: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text-muted);
}

#poll-clear-end-time:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

/* ============================
   POLL DETAIL PAGE (admin)
   ============================ */

.poll-detail-page {
    padding: 12px 0;
}

.poll-detail-header {
    margin-bottom: 16px;
}

.poll-detail-question {
    font-weight: bold;
    font-size: 1.125rem;
    color: var(--color-text);
    margin-bottom: 6px;
}

.poll-detail-info {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.poll-detail-options {
    margin-bottom: 16px;
}

.poll-detail-option {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
}

.poll-detail-option-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.poll-detail-option-text {
    font-weight: bold;
    font-size: 0.875rem;
    color: var(--color-text);
}

.poll-detail-option-stats {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.poll-detail-voters {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.poll-voter-chip {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-blue-bg);
    border: 1px solid var(--color-blue-line);
    font-size: 0.75rem;
    color: var(--color-text) !important;
    text-decoration: none;
}

.poll-voter-chip:hover {
    background: var(--color-blue);
    color: var(--color-text-white) !important;
}

.poll-detail-no-voters {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.poll-detail-footer {
    padding-top: 12px;
    border-top: 1px dotted var(--color-border-dotted);
    font-size: 0.8125rem;
}

.poll-detail-link {
    cursor: pointer;
    color: var(--color-blue);
    font-size: 0.75rem;
    text-decoration: none;
}

.poll-detail-link:hover {
    text-decoration: underline;
}

/* ============================
   EDIT HISTORY STYLES
   ============================ */

.edit-history-btn {
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.edit-history-btn:hover {
    color: var(--color-text);
}

.edit-history-panel {
    margin: 10px 0 4px 0;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    max-height: 200px;
    overflow-y: auto;
}

.edit-history-header {
    padding: 6px 10px;
    font-weight: bold;
    font-size: 0.625rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-light);
}

.edit-history-entry {
    padding: 6px 10px;
    border-bottom: 1px dotted var(--color-border-dotted);
}

.edit-history-entry:last-child {
    border-bottom: none;
}

.edit-history-time {
    font-size: 0.5625rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.edit-history-content {
    font-size: 0.625rem;
    color: var(--color-text);
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* ── Forensics Panel (mod-only) ─────────────────────────────────── */

.forensics-btn {
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.forensics-btn:hover {
    color: var(--color-text);
}

.forensics-panel {
    margin: 10px 0 4px 0;
    border: 1px solid var(--color-forensics-border);
    background: var(--color-surface);
    max-height: 400px;
    overflow-y: auto;
}

/* Vote log (mod-only): who upvoted / downvoted a post. */
.votelog-panel {
    margin: 10px 0 4px 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border-form);
    background: var(--color-surface-neutral);
    font-size: 0.8rem;
}
.votelog-header { font-weight: bold; margin-bottom: 6px; }
.votelog-header .votelog-up { color: var(--color-vote-up); }
.votelog-header .votelog-down { color: var(--color-danger-deep); }
.votelog-body { display: flex; gap: 20px; flex-wrap: wrap; }
.votelog-col { flex: 1 1 140px; min-width: 120px; }
.votelog-col.votelog-up strong { color: var(--color-vote-up); }
.votelog-col.votelog-down strong { color: var(--color-danger-deep); }
.votelog-panel ul { list-style: none; margin: 4px 0 0; padding: 0; }
.votelog-panel li { padding: 1px 0; }
.votelog-when { color: var(--color-text-soft); font-size: 0.72rem; }
.votelog-none { color: var(--color-text-soft); }

.forensics-header {
    padding: 6px 10px;
    font-weight: bold;
    font-size: 0.625rem;
    border-bottom: 1px solid var(--color-forensics-border);
    background: var(--color-forensics-bg);
    color: var(--color-forensics);
    text-transform: uppercase;
}

.forensics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6875rem;
}

.forensics-table td {
    padding: 3px 10px;
    border-bottom: 1px dotted var(--color-border-dotted);
    vertical-align: top;
}

.forensics-table td:first-child {
    color: var(--color-text-muted);
    white-space: nowrap;
    width: 140px;
}

.forensics-table td:last-child {
    color: var(--color-text);
    font-family: var(--font-mono);
}

.forensics-section td {
    padding: 6px 10px 3px !important;
    font-weight: bold;
    font-size: 0.625rem;
    color: var(--color-forensics) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    text-transform: uppercase;
}

.forensics-signals {
    font-family: var(--font-mono) !important;
    font-size: 0.625rem !important;
    word-break: break-word;
    color: var(--color-danger) !important;
}

.forensics-ua {
    word-break: break-all;
    font-size: 0.5625rem !important;
    max-width: 400px;
}

/* ── Paste Quote Toast ──────────────────────────────────────────── */

.paste-quote-toast {
    position: absolute;
    top: -32px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 4px 10px;
    font-size: 0.6875rem;
    z-index: 100;
    box-shadow: var(--shadow-panel);
    animation: paste-toast-in 0.15s ease-out;
}

@keyframes paste-toast-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.paste-quote-msg {
    color: var(--color-text-dim);
    white-space: nowrap;
}

.paste-quote-btn {
    border: 1px solid var(--color-border);
    background: var(--color-page-bg);
    color: var(--color-text);
    font-size: 0.625rem;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.paste-quote-btn:hover {
    background: var(--color-dark);
    color: var(--color-text-white);
}

.paste-quote-yes {
    font-weight: bold;
}

blockquote.tquote-paste {
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: var(--color-border);
}

/* ── Contact Page ───────────────────────────────────────────────── */

.contact-intro {
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0 0 10px 0;
}

.contact-logged-in {
    font-size: 0.875rem;
    color: var(--color-text-dim);
    margin: 0 0 14px 0;
}

.contact-field {
    margin-bottom: 12px;
}

.contact-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-dim);
    margin-bottom: 4px;
}

.contact-field input[type="text"],
.contact-field input[type="email"] {
    width: 100%;
    max-width: 400px;
    padding: 6px 8px;
    font-size: 0.875rem;
    border: 1px solid var(--color-border-form);
    box-sizing: border-box;
}

.contact-field textarea {
    width: 100%;
    max-width: 600px;
    padding: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--color-border-form);
    box-sizing: border-box;
}

.yh_contact input[type="submit"] {
    margin-top: 8px;
}

.contact-success {
    background: var(--color-green-bg);
    border: 1px solid var(--color-border);
    padding: 14px 18px;
    margin: 10px 0;
}

.contact-success p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text);
}

/* ── Mod Queue (CSS grid layout) ───────────────────────────────── */

/* Override the float-based PM inbox layout with grid */
.yh_modqueue #pm-inbox .message div {
    float: none;
}

.yh_modqueue #pm-inbox .message {
    display: grid;
    grid-template-columns: 80px 1fr 160px 120px;
    align-items: center;
    gap: 0 8px;
    line-height: 1.5rem;
    margin: 0;
    padding: 4px 8px;
}

.yh_modqueue #pm-inbox .message.header {
    border-bottom: solid 1px var(--color-border-medium);
    background: transparent;
}

.yh_modqueue #pm-inbox .message.header div {
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.yh_modqueue #pm-inbox .message .mq-status-col {
    font-size: 0.75rem;
}

.yh_modqueue #pm-inbox .message .subject {
    width: auto;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yh_modqueue #pm-inbox .message .sender {
    width: auto;
    font-size: 0.75rem;
}

.yh_modqueue #pm-inbox .message .time {
    width: auto;
    font-size: 0.625rem;
    text-align: right;
    color: var(--color-text-muted);
}

.yh_modqueue #pm-inbox .message .marker {
    display: none;
}

/* Active filter tab */
.mq-active {
    font-weight: 700;
}

/* Status badges in the list rows */
.mq-badge {
    display: inline-block;
    font-size: 0.5625rem;
    text-transform: uppercase;
    padding: 1px 5px;
}

.mq-badge-pending {
    background: var(--color-surface-warm);
    color: var(--color-text-dim);
}

.mq-badge-reviewed {
    background: var(--color-green-bg);
    color: var(--color-text-dim);
}

.mq-badge-dismissed {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

/* Type badge (m=member, g=guest) inline after sender name */
.mq-type-badge {
    display: inline-block;
    font-size: 0.5625rem;
    text-transform: uppercase;
    padding: 0 3px;
    vertical-align: middle;
    margin-left: 2px;
}

.mq-type-user {
    background: var(--color-blue-bg);
    color: var(--color-blue);
}

.mq-type-guest {
    background: var(--color-surface-warm);
    color: var(--color-text-dim);
}

/* Expand link in subject column */
.mq-expand-btn {
    cursor: pointer;
}

/* Detail panel (expands below a row) */
.mq-detail {
    background: var(--color-surface-faint);
    border-left: 3px solid var(--color-blue-line);
}

.mq-detail-inner {
    padding: 10px 12px;
}

.mq-detail-meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.mq-detail-content {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
    white-space: pre-wrap;
    margin-bottom: 10px;
    padding: 8px;
    background: var(--color-page-bg);
    border: 1px solid var(--color-border-light);
}

.mq-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.mq-detail-actions button {
    font-size: 0.75rem;
    padding: 4px 12px;
    border: 1px solid var(--color-border);
    background: var(--color-page-bg);
    cursor: pointer;
    color: var(--color-text);
}

.mq-detail-actions button:hover {
    background: var(--color-surface);
}

.modqueue-replied-label {
    font-size: 0.75rem;
    color: var(--color-blue);
    font-weight: 600;
}

.modqueue-reviewed-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.mq-delete-btn {
    border-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
    margin-left: 8px;
}

.mq-delete-btn:hover {
    background: var(--color-danger) !important;
    color: var(--color-text-white) !important;
}

.mq-bulk-btn {
    font-size: 0.6875rem;
    padding: 3px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-page-bg);
    cursor: pointer;
    color: var(--color-text-muted);
    margin-left: 6px;
}

.mq-bulk-btn:hover {
    background: var(--color-danger);
    color: var(--color-text-white);
    border-color: var(--color-danger);
}

/* Reply form (inside detail panel) */
.modqueue-reply-form {
    margin-top: 10px;
    padding: 10px;
    background: var(--color-surface-off);
    border: 1px solid var(--color-border-light);
}

.modqueue-reply-content {
    width: 100%;
    font-size: 0.875rem;
    padding: 8px;
    border: 1px solid var(--color-border-form);
    font-family: inherit;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.modqueue-reply-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.modqueue-send-reply-btn,
.modqueue-cancel-reply-btn {
    font-size: 0.75rem;
    padding: 4px 14px;
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.modqueue-send-reply-btn {
    background: var(--color-dark);
    color: var(--color-text-white);
    border-color: var(--color-dark);
}

.modqueue-send-reply-btn:hover {
    background: var(--color-dark-hover);
}

.modqueue-cancel-reply-btn {
    background: var(--color-page-bg);
    color: var(--color-text);
}

.modqueue-reply-method {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}


/*************************************************************
   SUSPENDED USERS PAGE
*************************************************************/

.suspended-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.suspended-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.75rem;
}

.suspended-item:last-child {
    border-bottom: none;
}

.suspended-by {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.suspended-empty {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    padding: 12px 0;
}


/*************************************************************
   POLLS LIST PAGE
*************************************************************/

.polls-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.poll-list-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.poll-list-item:last-child {
    border-bottom: none;
}

.poll-list-question {
    font-size: 0.875rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.poll-list-question a {
    text-decoration: none;
}

.poll-list-meta {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.poll-list-meta span {
    margin-right: 12px;
}

.poll-list-status {
    font-weight: 600;
}

.poll-list-status.active {
    color: var(--color-vote-up);
}

.poll-list-status.ended {
    color: var(--color-text-muted);
}

.polls-empty {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    padding: 12px 0;
}

/* ================================================================
   Yaylitics
   ================================================================ */

.yh_yaylitics .yaylitics-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 8px;
}

.yh_yaylitics .yaylitics-periods {
    display: flex;
    gap: 4px;
}

.yh_yaylitics .yaylitics-period-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
}

.yh_yaylitics .yaylitics-period-btn.active {
    background: var(--color-link-hover-bg);
    color: var(--color-link-hover-text);
    font-weight: bold;
}

.yh_yaylitics .yaylitics-my-stats {
    font-size: 0.75rem;
}

/* ── Cards + behavior table — responsive, theme-colored ───────────── */
.yh_yaylitics .yl-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}
.yh_yaylitics .yl-grid-stats {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.yh_yaylitics .yl-grid-two {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
}
.yh_yaylitics .yl-card {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.yh_yaylitics .yl-grid .yl-card { margin-bottom: 0; }
.yh_yaylitics .yl-card-title {
    margin: 0 0 10px 0;
    font-size: 0.8125rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.yh_yaylitics .yl-card-sub {
    font-size: 0.625rem;
    font-weight: normal;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.yh_yaylitics .yl-stat {
    text-align: center;
    padding: 12px 10px;
}
.yh_yaylitics .yl-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text);
}
.yh_yaylitics .yl-stat-label {
    display: block;
    font-size: 0.625rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.yh_yaylitics .yl-period-caption {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0 0 12px 0;
}
.yh_yaylitics .yl-period-caption strong {
    color: var(--color-text);
}
.yh_yaylitics .yl-daily {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.yh_yaylitics .yl-daily th {
    text-align: right;
    font-size: 0.625rem;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 2px 8px;
    border-bottom: 1px solid var(--color-border);
}
.yh_yaylitics .yl-daily th:first-child { text-align: left; }
.yh_yaylitics .yl-daily td {
    text-align: right;
    padding: 3px 8px;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
}
.yh_yaylitics .yl-daily tr:last-child td { border-bottom: none; }
.yh_yaylitics .yl-daily-day { text-align: left; color: var(--color-text-muted); white-space: nowrap; }
.yh_yaylitics .yl-daily-views {
    position: relative;
    min-width: 90px;
}
.yh_yaylitics .yl-daily-bar {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    height: 60%;
    background: var(--color-dark);
    opacity: 0.18;
    pointer-events: none;
}
.yh_yaylitics .yl-daily-num { position: relative; }
.yh_yaylitics .yl-behavior {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.yh_yaylitics .yl-behavior th {
    text-align: right;
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 2px 6px;
    font-weight: normal;
}
.yh_yaylitics .yl-behavior th:first-child { text-align: left; }
.yh_yaylitics .yl-behavior td {
    padding: 6px;
    border-top: 1px solid var(--color-surface-neutral);
    text-align: right;
    white-space: nowrap;
}
.yh_yaylitics .yl-behavior-label {
    text-align: left !important;
    white-space: normal !important;
}
.yh_yaylitics .yl-behavior-hint {
    display: block;
    font-size: 0.625rem;
    color: var(--color-text-muted);
}
.yh_yaylitics .yl-behavior-mine {
    font-weight: bold;
    color: var(--color-text);
}
.yh_yaylitics .yl-behavior-forum {
    color: var(--color-text-muted);
}

/* Device toggle (Overall / Desktop / Mobile) */
.yh_yaylitics .yl-device-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.yh_yaylitics .yl-device-btn {
    padding: 3px 10px;
    font-size: 0.6875rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}
.yh_yaylitics .yl-device-btn.active {
    background: var(--color-link-hover-bg);
    color: var(--color-link-hover-text);
    font-weight: bold;
}

/* Collapsible per-post list */
.yh_yaylitics .yl-recent {
    margin-top: 10px;
    border-top: 1px solid var(--color-surface-neutral);
    padding-top: 8px;
}
.yh_yaylitics .yl-recent > summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    user-select: none;
}
.yh_yaylitics .yl-recent-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.yh_yaylitics .yl-recent-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--color-surface-neutral);
    font-size: 0.75rem;
}
.yh_yaylitics .yl-recent-device { flex: 0 0 auto; }
.yh_yaylitics .yl-recent-written {
    flex: 0 0 auto;
    font-weight: bold;
    min-width: 78px;
}
.yh_yaylitics .yl-recent-compose {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    min-width: 42px;
}
.yh_yaylitics .yl-recent-thread {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-muted);
}

/* Empty-period placeholder */
.yh_yaylitics .yl-empty {
    margin: 4px 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

@media (max-width: 600px) {
    .yh_yaylitics .yl-stat-number { font-size: 1.25rem; }
    .yh_yaylitics .yaylitics-periods { flex-wrap: wrap; }
}

.yh_yaylitics .yaylitics-stat-boxes {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.yh_yaylitics .yaylitics-stat-box {
    flex: 1;
    min-width: 80px;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--color-border);
}

.yh_yaylitics .yaylitics-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text);
}

.yh_yaylitics .yaylitics-stat-label {
    display: block;
    font-size: 0.625rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.yh_yaylitics .yaylitics-section {
    margin-bottom: 15px;
}

.yh_yaylitics .yaylitics-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.8125rem;
}

.yh_yaylitics .yaylitics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: yaylitics-counter;
}

.yh_yaylitics .yaylitics-list li {
    counter-increment: yaylitics-counter;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-surface-neutral);
    font-size: 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.yh_yaylitics .yaylitics-list li:before {
    content: counter(yaylitics-counter) ".";
    min-width: 20px;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.yh_yaylitics .yaylitics-list li a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yh_yaylitics .yaylitics-count {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.yh_yaylitics .yaylitics-two-col {
    display: flex;
    gap: 20px;
}

.yh_yaylitics .yaylitics-two-col .yaylitics-section {
    flex: 1;
    min-width: 0;
}

.yh_yaylitics .yaylitics-hours-chart {
    display: flex;
    align-items: flex-end;
    height: 80px;
    gap: 1px;
    padding-bottom: 18px;
    position: relative;
}

.yh_yaylitics .yaylitics-hour-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.yh_yaylitics .yaylitics-hour-bar {
    width: 100%;
    background: var(--color-dark);
    min-height: 1px;
    transition: height 0.2s;
}

.yh_yaylitics .yaylitics-hour-label {
    font-size: 0.5rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.yh_yaylitics .yaylitics-notice {
    background: var(--color-surface-neutral);
    padding: 8px 12px;
    font-size: 0.75rem;
    margin-bottom: 15px;
    border-left: 3px solid var(--color-text-muted);
}

.yh_yaylitics .yaylitics-private-msg {
    padding: 30px 0;
    font-size: 0.875rem;
}

.yh_yaylitics .yaylitics-private-msg p {
    margin: 8px 0;
}

.yh_yaylitics .yaylitics-frequency {
    max-height: 300px;
    overflow-y: auto;
}

.yh_yaylitics .yaylitics-freq-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 0.75rem;
}

.yh_yaylitics .yaylitics-freq-date {
    min-width: 75px;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.yh_yaylitics .yaylitics-freq-bar-wrap {
    flex: 1;
}

.yh_yaylitics .yaylitics-freq-bar {
    display: inline-block;
    height: 10px;
    background: var(--color-dark);
    min-width: 2px;
    max-width: 100%;
}

@media (max-width: 600px) {
    .yh_yaylitics .yaylitics-two-col {
        flex-direction: column;
        gap: 0;
    }

    .yh_yaylitics .yaylitics-stat-boxes {
        flex-wrap: wrap;
    }

    .yh_yaylitics .yaylitics-stat-box {
        min-width: 60px;
    }
}

/* @-mention autocomplete popup */
.mention-autocomplete {
    background: var(--color-page-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
    min-width: 200px;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.mention-autocomplete .mention-item {
    padding: 6px 10px;
    cursor: pointer;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
}
.mention-autocomplete .mention-item:last-child { border-bottom: 0; }
.mention-autocomplete .mention-item.active,
.mention-autocomplete .mention-item:hover {
    background: var(--color-link);
    color: var(--color-text-white);
}
.mention-autocomplete .mention-role {
    font-size: 0.625rem;
    text-transform: uppercase;
    margin-left: 6px;
    padding: 1px 5px;
    background: rgba(0,0,0,0.08);
    color: inherit;
    opacity: 0.85;
}
.mention-autocomplete .mention-item.active .mention-role {
    background: rgba(255,255,255,0.18);
}
.mention-autocomplete .mention-role.mod { color: var(--color-status-hold); }
.mention-autocomplete .mention-role.susp { color: var(--color-danger-deep); }
.mention-autocomplete .mention-item.active .mention-role.mod,
.mention-autocomplete .mention-item.active .mention-role.susp { color: var(--color-text-white); }

/* group mentions (@here / @participated) in the autosuggest */
.mention-autocomplete .mention-item.mention-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mention-autocomplete .mention-group-name {
    font-weight: 600;
    color: var(--color-mention-strong);
}
.mention-autocomplete .mention-group-desc {
    font-size: 0.6875rem;
    opacity: 0.7;
}
.mention-autocomplete .mention-item.mention-group.active .mention-group-name,
.mention-autocomplete .mention-item.mention-group:hover .mention-group-name { color: var(--color-text-white); }
.mention-autocomplete .mention-item.mention-group.active .mention-group-desc,
.mention-autocomplete .mention-item.mention-group:hover .mention-group-desc { opacity: 0.9; }


/* ============================================================
   Mobile hamburger drawer polish + editable titlebar (2026-07)
   ============================================================ */

/* Drawer titlebar is mobile-only; desktop uses #main-title in the content area */
#left-column #drawer-title { display: none; }

@media screen and (max-width: 600px) {

  /* Grid items default to min-width:auto — let the column shrink to viewport */
  #middle > #left-column,
  #middle > #right-column { min-width: 0; }

  /* Contain every section so nothing bleeds past the edge */
  #left-column { overflow-x: hidden; }
  #left-column.nav-open .lc-node,
  #left-column.nav-open #threads,
  #left-column.nav-open #messaging,
  #left-column.nav-open #buddy-list,
  #left-column.nav-open #search-title,
  #left-column.nav-open #search-box,
  #left-column.nav-open #threads ul,
  #left-column.nav-open #buddy-list > div {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Pills wrap within the column */
  #left-column.nav-open #threads ul {
    display: flex; flex-wrap: wrap; width: 100%;
    gap: 6px; margin: 0 0 8px; padding: 0;
  }
  #left-column.nav-open #threads ul:last-of-type { margin-bottom: 0; }
  #left-column.nav-open #threads li { float: none; margin: 0; }

  /* Long buddy line wraps instead of stretching the column */
  #left-column.nav-open #buddy-list > div { overflow-wrap: anywhere; }

  /* Consistent rhythm: same padding + one divider per top-level section */
  #left-column.nav-open .welcome,
  #left-column.nav-open #drawer-title,
  #left-column.nav-open #messaging,
  #left-column.nav-open #threads,
  #left-column.nav-open #buddy-list {
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px solid var(--color-border-separator);
  }

  /* Search + toggle live inside #threads — no double divider */
  #left-column.nav-open #threads #search-title {
    padding: 12px 0 0; margin: 0; border-bottom: 0;
  }
  #left-column.nav-open #search-box { display: flex; width: 100%; gap: 6px; margin: 0; }
  #left-column.nav-open #search-phrase { flex: 1 1 auto; min-width: 0; width: auto; }
  #left-column.nav-open #search-box input[type="submit"] { flex: 0 0 auto; }

  /* Theme toggle aligned with the section padding */
  #left-column.nav-open #theme-toggle {
    display: block; width: auto; margin: 0;
    padding: 14px 16px; text-align: left; border-bottom: 0;
  }

  /* Editable titlebar inside the drawer */
  #left-column.nav-open #drawer-title { display: block; }
  #drawer-title .drawer-title-label {
    display: block;
    font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--color-text-dim); margin-bottom: 5px;
  }
  /* Author credit — mobile only (desktop shows it via the #main-title tooltip,
     which a touch screen can't hover). Small caps to sit quietly under the title. */
  #drawer-title .drawer-title-by {
    display: block;
    margin-top: 5px;
    font-variant: small-caps;
    font-size: 0.72rem;
    color: var(--color-text-dim);
  }
  #drawer-title .changeling { cursor: pointer; }
  #drawer-title .changeling h3 {
    margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.2;
    word-break: break-word;
  }
  #drawer-title .changeling.editing h3 {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  }
  #drawer-title .title-edit-input {
    flex: 1 1 100%; box-sizing: border-box; width: 100%;
    font-size: 0.9rem; padding: 6px 8px;
  }
  #drawer-title .title-save,
  #drawer-title .title-cancel { font-size: 0.75rem; padding: 4px 12px; cursor: pointer; }
  #drawer-title .title-hint { font-size: 0.6rem; color: var(--color-text-dim); }
}

/* Native <audio> fallback (shown only if the JS enhancer doesn't run) */
.content audio, .chat-content audio {
    display: block;
    max-width: 100%;
    margin: 8px 0;
}

/* ---- Compact audio player (JS-enhanced) — built from theme vars so it matches
   every theme. Every control is FIXED-SIZE so nothing reflows on interaction;
   SVG icons + Departure Mono keep it crisp; focus outline is themed, not the
   browser's blue ring. ---- */
.yh-audio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0;
    padding: 4px 5px;
    max-width: 100%;
    vertical-align: middle;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}
.yh-audio * { box-sizing: border-box; }
.yh-audio audio { display: none; }
.yh-a-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-mono-pixel);
    font-size: 0.625rem;
    line-height: 1;
}
.yh-a-btn svg { display: block; }
.yh-a-btn:hover { border-color: var(--color-text-muted); }
.yh-a-btn:focus-visible { border-color: var(--color-pink); }
.yh-a-play {
    width: 24px;
    background: var(--color-pink);
    color: var(--color-text-white);
    border-color: var(--color-pink);
}
.yh-a-speed { width: 42px; }   /* fixed + wide enough for 1.25× so it never shifts the row */
.yh-a-bar {
    position: relative;
    /* The bar is the ONLY flexible element: ~100px preferred, but it shrinks so
       the whole player fits its container on mobile (everything else is fixed). */
    flex: 1 1 100px;
    min-width: 36px;
    height: 5px;
    margin: 0 2px;
    background: var(--color-border-light);
    overflow: hidden;
    cursor: pointer;
}
.yh-a-fill {
    height: 100%;
    width: 0;
    background: var(--color-pink);
}
.yh-a-time {
    flex: 0 0 auto;
    min-width: 82px;
    text-align: center;
    font-family: var(--font-mono-pixel);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/*************************************************************
   APPLICATION QUESTIONS CMS  (/modtools/questions)
*************************************************************/

.aq-error,
.aq-saved {
    border-left: 3px solid var(--color-border);
    padding-left: 10px;
}
.aq-error { border-left-color: var(--color-slop-border); }
.aq-saved { border-left-color: var(--color-border-dark); }

.aq-count-form,
.aq-add-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
}
.aq-count-form label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}
.aq-count-form input[type="number"] {
    width: 62px;
}
.aq-add-form .aq-text {
    flex: 1 1 320px;
    min-width: 200px;
}
.aq-inline {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.aq-hint {
    font-size: 0.625rem;
    color: var(--color-text-soft);
    margin-top: 2px;
}

.aq-sortbar {
    font-size: 0.625rem;
    color: var(--color-text-soft);
    margin: 10px 0 0;
}
.aq-sortbar a {
    margin-left: 7px;
    color: var(--color-text-muted);
}
.aq-sortbar a.aq-sort-on {
    font-weight: bold;
    color: var(--color-text);
}

/* Single-line rows — the pool runs to ~30 questions, so every row of
   vertical padding is a screenful of scrolling. */
.aq-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    table-layout: fixed;
}
.aq-table th {
    text-align: left;
    font-size: 0.5625rem;
    text-transform: uppercase;
    color: var(--color-text-soft);
    border-bottom: 1px solid var(--color-border-light);
    padding: 3px 6px;
    font-weight: normal;
}
.aq-table td {
    border-bottom: 1px solid var(--color-border-light);
    padding: 3px 6px;
    vertical-align: middle;
}
.aq-table form {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.aq-col-flag { width: 76px; }
.aq-col-act  { width: 62px; }

.aq-text {
    font-size: 0.75rem;
    padding: 3px 6px;
    width: 100%;
    border: 1px solid var(--color-border);
    background: var(--color-page-bg);
    color: var(--color-text);
}
.aq-table .aq-text {
    flex: 1 1 auto;
    min-width: 0;
}
.aq-text:focus {
    border-color: var(--color-border-dark);
    outline: none;
}

/* Save stays out of the way until the field is actually touched. */
.aq-save {
    font-size: 0.5625rem;
    padding: 2px 7px;
    flex: 0 0 auto;
    opacity: 0.35;
    transition: opacity 0.12s;
}
.aq-edit-form:hover .aq-save,
.aq-edit-form:focus-within .aq-save {
    opacity: 1;
}

/* Always/enabled read as state first, buttons second. */
.aq-toggle {
    font-size: 0.5625rem;
    padding: 2px 6px;
    cursor: pointer;
    border: 1px solid var(--color-border-light);
    background: transparent;
    color: var(--color-text-soft);
    width: 100%;
    text-align: center;
}
.aq-toggle.aq-on {
    border-color: var(--color-border-dark);
    color: var(--color-text);
    font-weight: bold;
}
.aq-toggle:hover {
    background: var(--color-text);
    color: var(--color-text-white);
    border-color: var(--color-text);
}

.aq-delete {
    font-size: 0.5625rem;
    padding: 2px 6px;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-subtle);
    width: 100%;
}
.aq-table tr:hover .aq-delete {
    color: var(--color-text-soft);
    border-color: var(--color-border-light);
}
.aq-delete:hover {
    background: var(--color-slop-text) !important;
    border-color: var(--color-slop-text) !important;
    color: var(--color-text-white) !important;
}

/* A question on every application — spot it at a glance. */
.aq-row-always td { background: var(--color-surface-off); }
.aq-row-off td { opacity: 0.5; }
.aq-row-off .aq-text { font-style: italic; }

.pendinguser-always {
    font-size: 0.5625rem;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

@media screen and (max-width: 600px) {
    .aq-col-flag { width: 58px; }
    .aq-col-act  { width: 48px; }
    .aq-text { font-size: 0.6875rem; }
}


/*************************************************************
   TOUCH + TABLET

   The site had exactly two layouts: desktop, and a phone layout
   at max-width:600px. Every iPad width — 768–1024 portrait,
   1024–1366 landscape — fell in the gap and got the desktop
   layout, in both orientations. Safari's "Request Mobile
   Website" can't help: that changes the user-agent string, and
   nothing here sniffs the UA.

   Two independent axes, deliberately:
     - WIDTH decides layout (how many columns fit).
     - POINTER decides hit targets and text size. A finger is a
       finger at any width, and orientation is the wrong axis —
       an iPad in Split View reports "landscape" at 320pt wide.

   Problem/solution list from Trunks in the bug thread; the input
   zoom was independently diagnosed by scally, who had already
   worked around it in his own custom CSS.
*************************************************************/

/* ── Layout tier: bigger than a phone, smaller than a desktop ──
   Keep the two-column grid — there's room for it — but stop
   spending 200px of an 768px screen on the sidebar. */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    #middle {
        grid-template-columns: 164px 1fr;
        column-gap: 12px;
        padding: 12px 16px 0 16px;
    }

    #left-column { width: 164px; }

    /* The Patrick O'Brien banner is a hardcoded width="200" img that
       exactly filled the old 200px column, so narrowing the column
       pushed it out over the thread list. Nothing in this sidebar
       should be allowed to set its own width. */
    #left-column img { max-width: 100%; height: auto; }

    /* Thread rows carry a lot of horizontal padding meant for a
       1400px window. Claw some back for the subject line. */
    .lc-node { padding: 10px 12px; }
}

/* ── Touch devices, any width ─────────────────────────────────
   any-pointer (not pointer) so an iPad with a Magic Keyboard
   trackpad attached still counts: it has a fine pointer, but the
   screen is still a touchscreen and the targets still need to be
   thumb-sized. */
@media (any-pointer: coarse) {

    /* iOS force-zooms the page when you focus an input whose text
       is under 16px, and never zooms back out. The phone layout
       already fixed this for the post box; every other input, and
       every iPad, missed out. This is the single most-reported
       symptom in the thread. */
    #thread-content-input,
    .editor-wrap .input.textarea textarea,
    #pinkie-search,
    #category-selector input,
    .search-form-row select,
    #main-title .title-edit-input,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 1rem;
    }

    /* Tap targets. The +1/-1 controls were 8px text in 3px of
       padding — about 20px tall against Apple's 44pt floor. The
       phone layout already sized these up; lift it to every
       touch device rather than leaving it behind a width. */
    .give-point,
    .take-point {
        padding: 8px 13px;
        font-size: 0.75rem;
        background: var(--color-surface-neutral);
        position: relative;
    }
    .take-point { margin-left: 8px; }

    /* Even sized up, the visible pill is ~39x31 against Apple's 44pt
       floor, and inflating it further would look absurd in a dense
       comment footer. Extend the HIT area past the paint instead.
       Vertical is free; horizontal is capped at 3px because +1 and
       -1 sit 8px apart and overlapping targets would cause exactly
       the mis-taps the gap exists to prevent. */
    .give-point::after,
    .take-point::after {
        content: '';
        position: absolute;
        inset: -7px -3px;
    }

    .comment-points { font-size: 0.6875rem; }

    /* Kill the ~300ms tap delay and the grey flash, and stop a
       long-press from selecting the label text inside a button. */
    a,
    button,
    label,
    summary,
    input[type="submit"],
    input[type="button"],
    .give-point,
    .take-point {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    button,
    summary,
    input[type="submit"],
    input[type="button"],
    .give-point,
    .take-point {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* NB: the expanded hit area above hangs 7px below the pill, which
   lands outside .user-block. That used to put a scrollbar on every
   post, because the phone layout contained its floats with
   overflow:auto and any overflow past the bottom edge made the box
   scrollable. Those five containers now use display:flow-root
   instead — same containment, not a scroll container — so there's
   nothing to special-case here. */

/* ── Hover belongs to pointers ────────────────────────────────
   On a touchscreen :hover latches on after a tap and stays until
   you tap something else, so every link you touch keeps the
   inverted background. Neutralising the site-wide invert kills
   the visible symptom; the other 90-odd component hover rules
   are mostly colour shifts and want the same treatment in a
   follow-up pass. */
@media (hover: none) {
    a:hover {
        color: var(--color-link);
        background-color: transparent;
    }
    a:active { background-color: var(--color-link-hover-bg); }
}

/* ── Viewport-height units ────────────────────────────────────
   100vh on mobile Safari measures the viewport WITHOUT the
   retracting toolbars, so a 100vh panel is always taller than
   the screen and its bottom is unreachable. dvh tracks the
   toolbars; the vh line stays first as the fallback. */
#chatroom { height: calc(100dvh - 120px); }
@media screen and (max-width: 768px) {
    #chatroom { height: calc(100dvh - 60px); }
}

/* ── Safe-area insets ─────────────────────────────────────────
   The other half of viewport-fit=cover in head.html. "cover"
   lets the page paint under the notch and the home indicator,
   which is an improvement only if the outer container pads
   itself back out. env() resolves to 0 on every device without
   insets, so this is inert everywhere else — but the padding
   still has to come out of the width, hence border-box. */
@supports (padding: env(safe-area-inset-left)) {
    #wrapper {
        box-sizing: border-box;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}


/*************************************************************
   UPLOAD PROGRESS

   Uploads go straight to object storage over XHR, so there are
   real byte counts to show. The old flow appended a static
   "Uploading…" line that stayed identical whether the transfer
   was moving, stalled, or about to be rejected for size.
*************************************************************/

.upload-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-off);
    font-size: 0.75rem;
}

.upload-progress-bar {
    flex: 1 1 auto;
    height: 6px;
    min-width: 60px;
    background: var(--color-surface-neutral);
    overflow: hidden;
}

.upload-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--color-link);
    transition: width 0.18s linear;
}

.upload-progress-text {
    flex: 0 0 auto;
    min-width: 132px;
    text-align: right;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.upload-cancel {
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    padding: 3px 8px;
    cursor: pointer;
}
.upload-cancel:hover { color: var(--color-text); }

@media screen and (max-width: 600px) {
    .upload-progress { flex-wrap: wrap; }
    .upload-progress-bar { flex-basis: 100%; order: 3; }
    .upload-progress-text { min-width: 0; text-align: left; flex: 1 1 auto; }
}

/* ── Message applicant (mod tool on /pendingregistrations) ───────────────
   Builds on the shared .yh-modal-* overlay used by chat. Pinkies do the
   labelling work here because they're the forum's own vocabulary — a mod
   recognises the frowning one faster than they read "denying". */
.applicant-modal.hidden { display: none; }
.applicant-modal-box {
    max-width: 560px;
    width: 100%;
    text-align: left;
}
.applicant-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.applicant-modal-pinkie {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    flex: none;
}
.applicant-modal-title { margin: 0 0 3px 0; font-size: 1.0625rem; }
.applicant-modal-sub { margin: 0; font-size: 0.75rem; color: var(--color-text-category); line-height: 1.45; }

.applicant-modal-label {
    margin: 0 0 6px 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--color-text-soft);
}
.applicant-modal-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.applicant-tpl {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    background: var(--color-surface-neutral);
    border: 1px solid var(--color-border);
    color: inherit;
}
.applicant-tpl:hover { background: var(--color-border); }
/* 28px, not 20: these pinkies differ by one or two pixels around the mouth,
   and at 20 they all read as the same face — which is the whole point of
   using them as labels. */
.applicant-tpl img {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}

#applicant-msg-text {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 9px;
    border: 1px solid var(--color-border);
    resize: vertical;
}
.applicant-modal-foot {
    margin: 9px 0 14px 0;
    font-size: 0.6875rem;
    color: var(--color-text-soft);
    line-height: 1.5;
}
.applicant-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.applicant-modal-actions #applicant-msg-status {
    flex: 1;
    font-size: 0.75rem;
    color: var(--color-text-category);
}
.applicant-modal-actions button {
    font: inherit;
    font-size: 0.8125rem;
    padding: 7px 16px;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-surface-neutral);
    color: inherit;
}
#applicant-msg-send {
    border-color: transparent;
    background: var(--color-pink);
    color: var(--color-text-white);
    font-weight: 600;
}
#applicant-msg-send:hover { background: var(--color-pink-deep); }

/* Log of what's already been sent, shown on the applicant's row. */
.applicant-message-log {
    margin: 6px 0 10px 0;
    font-size: 0.75rem;
    color: var(--color-text-category);
}
.applicant-message-entry {
    margin: 4px 0;
    padding-left: 8px;
    border-left: 2px solid var(--color-border-separator);
}
.applicant-message-meta { display: block; color: var(--color-text-soft); font-size: 0.6875rem; }
.applicant-message-body { display: block; white-space: pre-wrap; }
/* A failed send matters more than a successful one — it means the applicant
   never heard anything and someone has to try again. */
.applicant-message-failed { border-left-color: var(--color-danger-deep); }
.applicant-message-failed .applicant-message-meta { color: var(--color-danger-deep); font-weight: bold; }

/* ── Modqueue: what we sent back ─────────────────────────────────────────
   Same shape as the applicant message log — a mod scanning either one is
   asking the same question: has this person already been answered, and
   what were they told? */
.modqueue-reply-log {
    margin: 6px 0 10px 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.modqueue-reply-entry {
    margin: 4px 0;
    padding-left: 8px;
    border-left: 2px solid var(--color-border);
}
.modqueue-reply-meta { display: block; color: var(--color-text-muted); font-size: 0.6875rem; }
.modqueue-reply-body { display: block; white-space: pre-wrap; }
.modqueue-reply-failed { border-left-color: var(--color-danger-deep); }
.modqueue-reply-failed .modqueue-reply-meta { color: var(--color-danger-deep); font-weight: bold; }

/* ── Applicant chat ──────────────────────────────────────────────────────
   Shown in a modal on /pendingregistrations and full-width on the applicant's
   own token page, so the log styles are shared and only the height differs. */
/* The bubble button: icon, total-count badge, and an unread dot. */
.applicant-chat-btn {
    margin-left: 6px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
}
.applicant-chat-icon { vertical-align: -4px; image-rendering: pixelated; }

/* The per-card chat store is a DATA element, not UI — the JS reads the
   conversation out of it to build the window. It carried a bare `hidden`
   class, but the only .hidden rule on the site is scoped to
   `.applicant-modal`, so nothing hid it: every applicant's whole
   conversation was rendering inline on their card as well as in the popout.
   Hide it outright rather than depending on a class that doesn't style
   anything. Same reason the count badge and unread dot need explicit
   rules — the JS toggles `hidden` on both. */
.applicant-chat-data { display: none; }
.applicant-chat-count.hidden,
.applicant-chat-dot.hidden { display: none; }
/* Which conversations are already docked, so the bubbles read as toggles. */
.applicant-chat-open .applicant-chat-icon { outline: 2px solid var(--color-pink); }
.applicant-chat-count {
    font-size: 0.625rem;
    font-weight: bold;
    vertical-align: -1px;
    margin-left: 1px;
    color: var(--color-text-soft);
}
/* The dot is the "something new" signal; the count is just volume. */
.applicant-chat-dot {
    position: absolute;
    top: -2px; right: -4px;
    width: 7px; height: 7px;
    background: var(--color-pink);
}

/* The dock: windows sit in a row along the bottom-right, newest on the left,
   so several conversations can be open while you work down the applicant
   list. Pointer-events pass through the empty dock so it never blocks the
   page underneath. */
.applicant-chat-dock {
    position: fixed;
    right: 18px; bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 36px);
}
.applicant-chat-window {
    pointer-events: auto;
    width: 300px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    background: var(--color-page-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
}
.acw-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--color-border);
    cursor: default;
}
.acw-head-icon { image-rendering: pixelated; flex: none; }
.acw-title {
    font-size: 0.75rem; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acw-min, .acw-close {
    text-decoration: none; line-height: 1; flex: none;
    color: var(--color-text-soft);
}
.acw-min { font-size: 0.9375rem; }
.acw-close { font-size: 1.0625rem; }

/* Collapsed: just the title bar, so a parked conversation costs one row of
   dock instead of a whole window. */
.acw-collapsed .acw-body-wrap { display: none; }
.acw-collapsed .acw-head { border-bottom: none; cursor: pointer; }

.acw-sub { margin: 0; padding: 5px 9px; font-size: 0.625rem; color: var(--color-text-soft); }
.acw-log {
    height: 230px;
    overflow-y: auto;
    padding: 8px 9px;
    background: var(--color-surface-faint);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.acw-empty { margin: 0; font-size: 0.6875rem; font-style: italic; color: var(--color-text-soft); }

/* Messages follow /chat's flat-line language (.chat-message), not bubbles:
   full-width rows split by hairlines, with a full-bleed row tint marking
   whose line it is — yours blue like .chat-own, the applicant's pink,
   because their answers are what people scan for. */
.acw-bubble {
    padding: 5px 9px;
    margin: 0 -9px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.75rem;
}
.acw-bubble:last-child { border-bottom: none; }
.acw-mine { background: var(--color-blue-bg-light); }
.acw-theirs { background: var(--color-status-live-bg); }
.acw-who { font-weight: 700; font-size: 0.625rem; }
.acw-when { margin-left: 6px; font-size: 0.5625rem; color: var(--color-text-muted); }
.acw-body { display: block; white-space: pre-wrap; word-wrap: break-word; }

.acw-compose { display: flex; gap: 5px; padding: 7px 9px; align-items: flex-end; }
.acw-compose textarea { flex: 1; resize: none; font-size: 0.75rem; box-sizing: border-box; }
/* Same button as #chat-send — one send button on this site, not two. */
.acw-send {
    padding: 6px 12px;
    background: var(--color-dark);
    color: var(--color-text-white);
    border: none;
    cursor: pointer;
    font-size: 0.6875rem;
    text-transform: uppercase;
}
.acw-send:hover { background: var(--color-dark-hover); }
.acw-status { padding: 0 9px 6px; font-size: 0.6875rem; color: var(--color-text-soft); }

/* Narrow screens can't fit a row of windows — show only the newest, full
   width, and let the rest stay reachable from their bubbles. */
@media (max-width: 700px) {
    .applicant-chat-dock { right: 8px; left: 8px; max-width: none; }
    .applicant-chat-window { width: auto; flex: 1; margin-bottom: 8px; }
    .applicant-chat-window:not(:first-child) { display: none; }
    .acw-log { height: 190px; }
}

.applicant-chat-log {
    max-height: 260px;
    overflow-y: auto;
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-faint);
    font-size: 0.75rem;
}
.applicant-chat-log-page { max-height: none; margin: 14px 0; }

/* Same flat-line language as /chat and the popout windows. */
.applicant-chat-line {
    margin: 0 -10px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-border-light);
}
.applicant-chat-line:last-child { border-bottom: none; }
/* The applicant's own replies are the ones people scan for — the pink row
   tint separates them from the questions at a glance. */
.applicant-chat-theirs { background: var(--color-status-live-bg); }

.applicant-chat-who { font-weight: 700; font-size: 0.6875rem; }
.applicant-chat-when { margin-left: 6px; color: var(--color-text-muted); font-size: 0.5625rem; }
.applicant-chat-body { display: block; white-space: pre-wrap; }
.applicant-chat-empty { color: var(--color-text-muted); font-style: italic; margin: 0; }

.applicant-chat-page textarea { width: 100%; box-sizing: border-box; }
.applicant-chat-note { color: var(--color-text-muted); font-size: 0.6875rem; margin: 4px 0; }
.applicant-chat-actions { margin: 8px 0; }
.applicant-chat-actions span,
.applicant-withdraw-box span { margin-right: 8px; font-size: 0.75rem; }

.applicant-chat-withdrawn-note {
    padding: 10px 12px;
    border-left: 3px solid var(--color-pink);
    background: var(--color-surface-faint);
}
.applicant-withdraw-box { margin: 14px 0; font-size: 0.75rem; }

/* ── The Board (Meta category) ───────────────────────────────────────────
   Chips share the visual weight of the existing nsfw/legacy tags; statuses
   get one hue each so a listing scan reads without the words. */
.board-votes-tag {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-left: 6px;
    white-space: nowrap;
}
/* Bracketed text like [NAUGHTY!] and [ARCHIVED] — colored words, not a
   pill. The -bg vars belong to row tints and widget accents, not tags. */
.board-status-tag {
    font-size: 0.6875rem;
    font-weight: 700;
    margin-left: 6px;
    white-space: nowrap;
}
.board-status-will_do   { color: var(--color-status-go); }
.board-status-questions { color: var(--color-status-hold); }
.board-status-wont_do   { color: var(--color-status-off); }
.board-status-shipped   { color: var(--color-status-live); }

#board-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px 0 10px 0;
    padding: 8px 10px;
    background: var(--color-surface-neutral);
    border-left: 3px solid var(--color-pink);
    font-size: 0.75rem;
}
#board-vote-btn {
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    background: var(--color-page-bg);
    color: inherit;
    cursor: pointer;
}
#board-vote-btn.voted {
    background: var(--color-pink);
    border-color: transparent;
    color: var(--color-text-white);
}
#board-vote-btn:disabled { opacity: 0.6; cursor: default; }
/* Pixel-art up arrow via mask, so it takes a paint colour rather than a
   fixed fill and can therefore inherit whatever text colour it sits in
   (currentColor). Same crispEdges pinkie-family shape as /img/arrow-up.svg.
   Base = inherit; the board-vote button overrides to pink / white-on-voted
   where a pink image would vanish on the pink background. */
.bv-arrow {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.1em;
    background-color: currentColor;
    -webkit-mask: url(/img/arrow-up.svg) center / contain no-repeat;
    mask: url(/img/arrow-up.svg) center / contain no-repeat;
}
#board-vote-btn .bv-arrow {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    background-color: var(--color-pink);
}
#board-vote-btn.voted .bv-arrow { background-color: var(--color-text-white); }
.board-widget-label { color: var(--color-text-muted); }
.board-status-set select { font: inherit; font-size: 0.75rem; }
.board-voters { font-size: 0.6875rem; color: var(--color-text-soft); }
.board-voters summary { cursor: pointer; }

/* ── Community-action motions ────────────────────────────────────────────
   The widget states one fact loudly (the status) and keeps everything else
   quiet. Colors track the board-status chips' hues. */
#motion-widget {
    margin: 6px 0 10px 0;
    padding: 10px 12px;
    background: var(--color-surface-neutral);
    border-left: 3px solid var(--color-status-off);
    font-size: 0.75rem;
}
#motion-widget.motion-open     { border-left-color: var(--color-pink); }
#motion-widget.motion-pending  { border-left-color: var(--color-status-hold); }
#motion-widget.motion-enacted  { border-left-color: var(--color-status-go); }
#motion-widget.motion-passed   { border-left-color: var(--color-status-go); }
#motion-widget.motion-defeated,
#motion-widget.motion-expired,
#motion-widget.motion-vetoed,
#motion-widget.motion-rejected { border-left-color: var(--color-status-off); }

.motion-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.motion-status-tag {
    font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
}
.motion-status-open     { color: var(--color-status-live); }
.motion-status-pending  { color: var(--color-status-hold); }
.motion-status-passed,
.motion-status-enacted  { color: var(--color-status-go); }
.motion-status-defeated,
.motion-status-expired,
.motion-status-vetoed,
.motion-status-rejected { color: var(--color-status-off); }
.motion-summary { font-weight: 600; }

.motion-tally { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.motion-yes { color: var(--color-status-go); font-weight: 700; }
.motion-no  { color: var(--color-status-against); font-weight: 700; }
.motion-quorum { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.motion-quorum-bar {
    display: inline-block; width: 110px; height: 7px;
    background: var(--color-border); overflow: hidden;
}
.motion-quorum-fill { display: block; height: 100%; background: var(--color-pink); }

.motion-timing { margin: 4px 0; }
.motion-note { display: block; color: var(--color-text-muted); margin: 2px 0; }
.motion-actions { margin: 8px 0 4px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.motion-actions button {
    font: inherit; font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase;
    padding: 6px 14px; cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-page-bg); color: inherit;
}
.motion-vote-yes { border-color: transparent; background: var(--color-status-go); color: var(--color-text-white); }
.motion-vote-no  { border-color: transparent; background: var(--color-status-against); color: var(--color-text-white); }
.motion-actions button:disabled { opacity: 0.6; cursor: default; }
.motion-foot { margin-top: 6px; color: var(--color-text-muted); font-size: 0.6875rem; }
.motion-voters { display: inline-block; margin-left: 8px; }
.motion-voters summary { cursor: pointer; }

.community-thread-note {
    margin: 6px 0 10px 0; padding: 6px 10px; font-size: 0.75rem;
    background: var(--color-surface-neutral);
    border-left: 3px solid var(--color-status-go); color: var(--color-text-muted);
}

/* Motion listing tag (summaryMapping carries motion_status). Bracketed
   colored text like the other listing tags. */
.motion-tag {
    font-size: 0.6875rem; font-weight: 700; margin-left: 6px;
    color: var(--color-status-live); white-space: nowrap;
}

/* ── newmotion form ── */
/* Fill the right column like the create-thread composer (#new-thread) does,
   so the shared markdown editor has the same room. */
#new-motion { max-width: 900px; }
.motion-intro { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 14px 0; }
.motion-error {
    margin: 0 0 12px 0; padding: 8px 12px; font-size: 0.8125rem;
    background: var(--color-status-against-bg); border-left: 3px solid var(--color-status-against); color: var(--color-status-against);
}
#new-motion .inp { margin-bottom: 12px; }
#new-motion label { display: block; font-weight: 700; font-size: 0.75rem; margin-bottom: 4px; }
/* The body field is the shared markdown editor (#thread-content-input); let
   its own global styling handle it, don't override from here. */
#new-motion input[type=text], #new-motion select, #new-motion textarea:not(#thread-content-input) {
    font: inherit; font-size: 0.8125rem; padding: 7px;
    border: 1px solid var(--color-border);
    width: 100%; box-sizing: border-box;
}
#new-motion select { width: auto; min-width: 260px; }
.motion-stake-line { font-size: 0.75rem; color: var(--color-text-muted); }
#motion-submit {
    font: inherit; font-size: 0.6875rem; font-weight: 700; cursor: pointer;
    text-transform: uppercase;
    padding: 8px 18px; border: 0;
    background: var(--color-pink); color: var(--color-text-white);
}
.motion-cancel { margin-left: 12px; font-size: 0.75rem; }

/* What align="absmiddle" and cellspacing/cellpadding used to do,
   before the attribute sweep retired them from the templates. */
.mod-panel-icon { vertical-align: middle; }
#login-box p img { vertical-align: middle; }
.ip-report-table,
.vote-report-table { border-spacing: 0; }

/* The sidebar announcement box — was a fully inline-styled component in
   leftcolumn.html (the one partial every page loads), hardcoded hexes,
   rounded corners and all. Square now, like everything else. */
.lc-node.announce {
    background: var(--color-announce-bg);
    border: 2px solid var(--color-announce-border);
    padding: 10px 12px;
    margin: 0 0 12px;
    color: var(--color-announce-text);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/*************************************************************
   SHARED UTILITY PATTERNS (batch: inline-style retirement)
*************************************************************/
/* Destructive actions share one look (was three inline copies). */
.btn-destructive {
    background: var(--color-danger);
    color: var(--color-text-white);
    font-weight: 700;
    padding: 8px 16px;
    border: 0;
    cursor: pointer;
}
.btn-plain { padding: 8px 16px; }
.status-inline { margin-left: 12px; }
.status-fail { color: var(--color-danger); }
.status-ok { color: var(--color-status-go); }
.warn-edge { border-left: 3px solid var(--color-timeout); padding-left: 10px; }
.warn-text { color: var(--color-timeout); }
.input-wide { width: 400px; max-width: 100%; }

/* Email-verification flow messages (register + claim, via
   public/js/email-verify.js). */
.vmsg-err { color: var(--color-danger-deep); }
.vmsg-ok { color: var(--color-status-go); }

/* Chat presence bar (was fully inline in chat.html). Square chips. */
.chat-presence {
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--color-green-bg);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.chat-presence-mod { background: var(--color-surface-off); border: 1px solid var(--color-border); }
.chat-presence-label { color: var(--color-status-go); font-weight: 700; }
.chat-presence-mod .chat-presence-label { color: inherit; }
.chat-presence-pill {
    display: inline-block;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 2px 8px;
    margin: 2px 2px;
    font-size: 0.6875rem;
    text-decoration: none;
    border: 1px solid var(--color-border);
}
.chat-presence-empty { color: var(--color-text-muted); }

/* Users page: filter bar state as a class, pixel LEDs as files. */
.users-filter { padding: 6px 0; }
.users-filter a { margin: 0 8px; }
.users-filter a.active { font-weight: 700; text-decoration: underline; }
.online-led, .offline-led { vertical-align: middle; margin-left: 5px; image-rendering: pixelated; }
.offline-led { opacity: .55; }
#users .online { color: var(--color-status-go); font-weight: 600; }

/* Profile page: mod email panels (were fully inline tables). */
.mod-subpanel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-light); font-size: 0.75rem; }
.mod-subpanel-label { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 3px; }
.mod-subpanel-head { display: block; margin-bottom: 4px; color: var(--color-text-muted); font-weight: 700; }
.mod-subpanel-note { font-size: 0.6875rem; color: var(--color-text-muted); margin: 6px 0 0; }
.mod-subpanel-line { display: block; }
.mod-email-input { width: 100%; padding: 5px 8px; font-size: 0.75rem; font-family: var(--font-mono); border: 1px solid var(--color-border); }
.mod-flag-bad { color: var(--color-danger); }
.mod-note-italic { color: var(--color-text-muted); font-style: italic; }
.mod-email-log { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 0.6875rem; }
.mod-email-log th { padding: 2px 6px 2px 0; color: var(--color-text-muted); text-align: left; }
.mod-email-log td { padding: 2px 6px 2px 0; }
.mod-email-log .nowrap { white-space: nowrap; }
.superadmin-box { border-top: 2px solid var(--color-danger); padding-top: 8px; }
.superadmin-box h3 { color: var(--color-danger); }

/* Explanatory copy under a form control. Was inline-styled 14x across
   three views; this is now the one definition. */
.field-note {
    font-size: 0.6875rem;
    color: var(--color-text-soft);
    margin: 2px 0 0 0;
}

/* Site-mode toggles on /modtools — moved out of modes/limmy.css:
   this is permanent mod-panel chrome, not part of any novelty mode. */
/* Mod panel mode toggle styling */
.site-modes-list {
    margin-top: 8px;
}
.site-mode-toggle {
    padding: 6px 0;
}
.site-mode-toggle label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.site-mode-desc {
    font-size: 0.8rem;
    color: var(--color-text-medium);
    font-style: italic;
    margin-left: 24px;
    display: block;
}
.site-mode-toggle.mode-active .site-mode-desc {
    color: var(--color-blue);
}
/* The sitewide-theme dropdown + sub-headings inside the Site Modes panel */
.sm-sub { text-transform: uppercase; font-size: 0.625rem; letter-spacing: 0.04em; }
.sm-overlays-head { margin-top: 12px; }
.site-theme-row { margin: 4px 0 10px; }
#site-theme-select {
    font: inherit; font-size: 0.75rem; padding: 4px;
    border: 1px solid var(--color-border-form); max-width: 260px;
}
#site-theme-status { font-size: 0.6875rem; color: var(--color-text-muted); margin-left: 6px; }

/* Tabbed /modtools. Without JS every page shows (the old single column);
   global.js adds mtabs-on and drives the active pair. */
.mod-tabs { display: flex; gap: 4px; margin: 10px 0 0; flex-wrap: wrap; }
.mtab-btn {
    padding: 6px 14px; font-size: 0.6875rem; text-transform: uppercase;
    font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
    background: var(--color-page-bg); color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.mtab-btn:hover { color: var(--color-text); }
.mtab-btn.active {
    background: var(--color-dark); color: var(--color-text-white);
    border-color: var(--color-dark);
}
.mtabs-on .mtab-page { display: none; }
.mtabs-on .mtab-page.active { display: block; }

/* Collapsed advanced sections on /modtools */
.mod-collapse { margin-top: 6px; }
.mod-collapse > summary {
    cursor: pointer; font-size: 0.6875rem; text-transform: uppercase;
    color: var(--color-text-category); font-weight: 700;
}

/* Motion settings rows on /modtools */
.motion-settings-list { margin-top: 8px; }
.motion-settings-group { margin: 12px 0 0; }
.motion-group-title {
    margin: 0 0 2px; font-size: 0.75rem; text-transform: uppercase;
    color: var(--color-text-category);
}
.motion-setting-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 0.75rem; flex-wrap: wrap; }
.motion-setting-row label { flex: 0 0 240px; font-size: 0.6875rem; font-weight: 700; }
.motion-setting-input { width: 80px; font: inherit; padding: 3px 6px; }
.motion-setting-save { font: inherit; font-size: 0.6875rem; cursor: pointer; padding: 3px 10px; }
.motion-setting-status { color: var(--color-text-muted); font-size: 0.6875rem; min-width: 40px; }
.motion-setting-help { flex: 1 1 200px; color: var(--color-text-soft); font-size: 0.625rem; }

/* /modtools/uploads — the audit log, same table idiom plus thumbnails */
.ul-stats { color: var(--color-text-muted); }
.ul-search { margin: 12px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ul-search input {
    font: inherit; font-size: 0.75rem; padding: 6px 8px; min-width: 320px;
    border: 1px solid var(--color-border-form); background: var(--color-page-bg);
    color: var(--color-text);
}
.ul-search button {
    padding: 6px 12px; background: var(--color-dark); color: var(--color-text-white);
    border: none; cursor: pointer; font-size: 0.6875rem; text-transform: uppercase;
}
.ul-search button:hover { background: var(--color-dark-hover); }
.ul-clear { font-size: 0.6875rem; color: var(--color-text-soft); }
.ul-count { color: var(--color-text-soft); }
.ul-table td { vertical-align: top; }
.ul-thumb { width: 60px; }
.ul-thumb img {
    width: 52px; height: 52px; object-fit: cover; display: block;
    border: 1px solid var(--color-border);
}
.ul-noimg {
    display: inline-block; font-size: 0.5625rem; text-transform: uppercase;
    color: var(--color-text-soft); padding-top: 6px;
}
.ul-who a { font-weight: bold; }
.ul-unknown { color: var(--color-text-soft); font-style: italic; }
.ul-flag {
    display: block; font-family: var(--font-mono); font-size: 0.5625rem;
    font-weight: 700; margin-top: 3px;
}
.ul-flag-abandoned { color: var(--color-danger); }
.ul-flag-backfill { color: var(--color-text-soft); }
.ul-file a { font-family: var(--font-mono); font-size: 0.6875rem; }
.ul-type { display: block; font-size: 0.625rem; color: var(--color-text-soft); }
.ul-size, .ul-ip { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-muted); white-space: nowrap; }
.ul-ago { display: block; color: var(--color-text-soft); font-size: 0.625rem; }
.ul-page { margin: 0 8px; }

/* /modtools/banned + /modtools/digest-log — the modlog-table idiom */
.bs-heading { margin: 16px 0 4px; font-size: 0.8125rem; text-transform: uppercase; }
.bs-table { margin-bottom: 8px; }
.bs-when { color: var(--color-text-soft); }
.dl-email { color: var(--color-text-muted); }
.dl-items { text-align: center; }
.dl-failed { color: var(--color-danger); font-weight: 700; }
.dl-sent { color: var(--color-status-go); }
.dl-page { margin: 0 8px; }
.dl-empty { font-style: italic; }

/* Live quorum preview on the motion form */
.motion-quorum-preview {
    margin: 0 0 14px 0; padding: 8px 12px; font-size: 0.75rem; line-height: 1.6;
    background: var(--color-surface-neutral);
    border-left: 3px solid var(--color-pink); color: var(--color-text-muted);
}
.mqp-tier { display: block; }
.mqp-lead { margin: 0 0 8px 0; }
.mqp-math { border-collapse: collapse; width: 100%; margin: 0 0 6px 0; }
.mqp-math th {
    text-align: left; vertical-align: top; padding: 4px 10px 4px 0; font-weight: 700;
    white-space: nowrap; color: var(--color-text);
}
.mqp-math td { vertical-align: top; padding: 4px 8px 4px 0; }
.mqp-note { display: block; font-weight: 400; font-size: 0.625rem; color: var(--color-text-soft); white-space: normal; }
.mqp-calc { font-family: var(--font-mono); font-size: 0.6875rem; }
.mqp-result b { color: var(--color-pink); }
.mqp-margin { color: var(--color-text-soft); }
.mqp-foot { margin: 4px 0 0 0; font-size: 0.6875rem; color: var(--color-text-soft); }
.ma-opt { display: block; margin: 4px 0; }
.ma-pinkie { vertical-align: -6px; image-rendering: pixelated; }
.ma-sub { color: var(--color-text-soft); font-weight: normal; }
.motion-quorum-live { color: var(--color-status-go) !important; }

/* Motion form: picker hints + the cited-post link on the widget */
.motion-hint { font-size: 0.6875rem; color: var(--color-text-soft); margin: 3px 0 0 0; }
.motion-optional { font-weight: normal; color: var(--color-text-soft); font-size: 0.6875rem; }
.motion-evidence-link { margin-left: 8px; }

/*************************************************************
   PAGE: /meta/processes (pr-) — moved from the view so the token/no-radius
   sweeps can actually reach it. Page-scoped prefixes keep it inert
   elsewhere.
*************************************************************/
#processes { max-width: 800px; font-size: 0.75rem; line-height: 1.6; }
  .pr-intro { color: var(--color-text-muted); margin: 0 0 14px 0; }
  .pr-toc { list-style: none; margin: 0 0 18px 0; padding: 8px 12px; background: var(--color-surface-off); border: 1px solid var(--color-border-light); display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .pr-h { font-size: 1rem; margin: 26px 0 8px 0; padding-top: 10px; border-top: 1px solid var(--color-border-separator); }
  .pr-h5 { font-size: 0.75rem; text-transform: uppercase; color: var(--color-text-soft); margin: 16px 0 4px 0; }
  .pr-list { margin: 0 0 10px 0; padding-left: 18px; }
  .pr-list li { margin: 5px 0; }
  .pr-off { padding: 6px 10px; background: var(--color-surface-neutral); border-left: 3px solid var(--color-text-soft); color: var(--color-text-muted); }
  .pr-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px 0; }
  .pr-step { padding: 5px 10px; background: var(--color-surface-neutral); font-weight: 600; }
  .pr-step-end { background: var(--color-status-go-bg); color: var(--color-status-go); }
  .pr-arrow { width: 18px; height: 18px; flex: 0 0 auto; image-rendering: pixelated; }
  .pr-table { border-collapse: collapse; width: 100%; margin: 6px 0 12px 0; font-size: 0.6875rem; }
  .pr-table th, .pr-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border-light); vertical-align: top; }
  .pr-table th { color: var(--color-text-soft); text-transform: uppercase; font-size: 0.5625rem; }

  /* The quorum working. Members are being held to this number, so the page
     shows how it is reached rather than only what it came to. */
  .pr-formula { margin: 8px 0 14px 0; padding: 12px 14px; background: var(--color-surface-off); border: 1px solid var(--color-border-light); }
  .pr-formula-line { margin: 0 0 8px 0; font-size: 0.8125rem; }
  .pr-formula-pass { margin-top: 14px; }
  .pr-var { font-style: italic; color: var(--color-pink); }
  .pr-formula-note { margin: 8px 0 0 0; color: var(--color-text-muted); font-size: 0.6875rem; }
  .pr-formula-now { margin: 12px 0 4px 0; }
  .pr-math { border-collapse: collapse; width: 100%; font-size: 0.6875rem; }
  .pr-math th { text-align: left; padding: 4px 10px 4px 0; white-space: nowrap; vertical-align: top; font-weight: 700; }
  .pr-math td { padding: 4px 8px 4px 0; vertical-align: top; }
  .pr-calc { font-family: var(--font-mono); }
  .pr-result b { color: var(--color-pink); }
  .pr-note { color: var(--color-text-soft); font-style: italic; }
  @media (max-width: 560px) {
    .pr-math, .pr-math tr, .pr-math th, .pr-math td { display: block; width: auto; }
    .pr-math th { padding-top: 8px; }
    .pr-math tr + tr th { border-top: 1px solid var(--color-border-light); }
  }


/*************************************************************
   PAGE: /modtools/applicant-history (ah-) — moved from the view so the token/no-radius
   sweeps can actually reach it. Page-scoped prefixes keep it inert
   elsewhere.
*************************************************************/
/* Page-local, ah- prefixed — a mod report, not design-system surface. */
  .ah-table td { vertical-align: top; }
  .ah-num { color: var(--color-text-soft); font-size: 0.6875rem; margin-left: 4px; }
  .ah-seen { display: block; color: var(--color-text-soft); font-size: 0.625rem; }
  .ah-ago { display: block; color: var(--color-text-soft); font-size: 0.625rem; }
  .ah-flag { font-size: 0.5625rem; font-weight: bold; padding: 1px 4px; margin-left: 4px; }
  .ah-flag-banned { background: var(--color-danger-deep); color: var(--color-text-white); }
  .ah-flag-suspended { background: var(--color-status-hold); color: var(--color-text-white); }
  .ah-flag-denied { background: var(--color-danger); color: var(--color-text-white); }
  .ah-flag-expired { background: var(--color-text-soft); color: var(--color-text-white); }
  .ah-flag-withdrawn { background: var(--color-text-soft); color: var(--color-text-white); }
  .ah-nonmember { font-weight: bold; }
  .ah-via { display: inline-block; font-size: 0.625rem; text-transform: uppercase; }
  .ah-via-community { color: var(--color-status-go); }
  .ah-via-mod { color: var(--color-text-soft); }
  .ah-via-unknown { color: var(--color-text-soft); font-style: italic; text-transform: none; }
  .ah-via-denied { color: var(--color-danger); }
  .ah-via-expired { color: var(--color-text-soft); }
  .ah-via-withdrawn { color: var(--color-text-soft); }
  .ah-reason { display: block; margin-top: 2px; color: var(--color-text-muted); font-style: italic; font-size: 0.625rem; }
  .ah-by { display: block; }
  .ah-tally { display: block; font-size: 0.6875rem; }
  .ah-voterlist { display: block; font-size: 0.6875rem; line-height: 1.7; }
  .ah-voterlist a { margin-right: 1px; }
  .ah-dir { color: var(--color-text-soft); font-size: 0.5625rem; margin-right: 7px; }
  .ah-novotes { color: var(--color-text-soft); font-style: italic; font-size: 0.6875rem; }
  .ah-caveat { color: var(--color-text-soft); font-size: 0.6875rem; }
  .ah-application { margin-top: 4px; font-size: 0.6875rem; }
  .ah-application summary { cursor: pointer; color: var(--color-text-soft); }
  .ah-app-q { margin: 6px 0 1px 0; font-weight: bold; }
  .ah-app-always { font-weight: normal; color: var(--color-text-soft); font-size: 0.625rem; }
  .ah-app-a { margin: 0 0 4px 0; white-space: pre-wrap; }
  .ah-app-none { display: block; margin-top: 4px; color: var(--color-text-soft); font-style: italic; font-size: 0.625rem; }
  .ah-page { margin: 0 8px; }


/*************************************************************
   PAGE: /ai-pinkies gallery — moved from the view so the token/no-radius
   sweeps can actually reach it. Page-scoped prefixes keep it inert
   elsewhere.
*************************************************************/
.ai-pinkies-intro {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            line-height: 1.4;
            margin-bottom: 16px;
            padding: 10px 12px;
            background: var(--color-surface-off);
            border: 1px solid var(--color-border);
          }
          .ai-pinkies-intro strong {
            color: var(--color-text);
          }
          .ai-pinkies-count {
            font-size: 0.6875rem;
            color: var(--color-text-faint);
            margin-bottom: 12px;
          }
          .ai-pinkies-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
          }
          .ai-pinkie-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 96px;
            padding: 10px 6px 8px;
            background: var(--color-surface-off);
            border: 1px solid var(--color-border);
            transition: background 0.1s;
          }
          .ai-pinkie-card:hover {
            background: var(--color-surface);
          }
          .ai-pinkie-card img {
            width: 56px;
            height: 56px;
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            margin-bottom: 6px;
          }
          .ai-pinkie-card .pinkie-name {
            font-size: 0.625rem;
            color: var(--color-text-light);
            text-align: center;
            line-height: 1.2;
            word-break: break-word;
          }


/*************************************************************
   PAGE: preferences theme editor — moved from the view so the token/no-radius
   sweeps can actually reach it. Page-scoped prefixes keep it inert
   elsewhere.
*************************************************************/
#theme-presets { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
              #theme-presets button { border:2px solid var(--color-border); padding:0; cursor:pointer; width:60px; height:32px; display:flex; overflow:hidden; background:none; transition:border-color .15s; }
              #theme-presets button:hover, #theme-presets button.active { border-color:var(--color-pink); }
              #theme-presets button span { flex:1; }
              #theme-presets button .label { display:block; font-size: 0.5625rem; text-align:center; margin-top:2px; color:var(--color-text-muted); }
              .theme-group { margin:0 0 14px; }
              .theme-group-title { font-size: 0.6875rem; font-weight:600; text-transform:uppercase; color:var(--color-text-muted); margin:0 0 6px; padding:0 0 3px; border-bottom:1px solid var(--color-border-light); }
              .theme-row { display:flex; align-items:center; gap:8px; margin:0 0 5px; }
              .theme-row label { font-size: 0.75rem; color:var(--color-text); width:120px; flex-shrink:0; }
              .theme-row input[type=color] { width:32px; height:24px; border:1px solid var(--color-border); padding:1px; cursor:pointer; background:none; }
              .theme-row .hex { font-size: 0.6875rem; font-family: var(--font-mono); color:var(--color-text-muted); width:62px; }
              #theme-preview { border:1px solid var(--color-border); padding:10px; margin:0 0 12px; }
              #theme-preview .tp-header { padding:6px 10px; margin:0 0 8px; font-size: 0.75rem; font-weight:600; }
              #theme-preview .tp-row { padding:5px 8px; margin:0 0 2px; font-size: 0.6875rem; display:flex; justify-content:space-between; }
              #theme-preview .tp-row .tp-meta { font-size: 0.625rem; }
              #theme-preview .tp-comment { padding:6px 8px; margin:6px 0 0; font-size: 0.6875rem; }
              #theme-preview .tp-comment a { text-decoration:underline; }
              #theme-preview .tp-accent { display:inline-block; padding:1px 6px; font-size: 0.625rem; font-weight:600; }
              #theme-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
              @media (max-width:700px) { #theme-cols { grid-template-columns:1fr; } }

/*************************************************************
   EMAIL BLAST (/mod/emailblast) — was a 709-line inline SPA with
   zero CSS classes; now public/js/emailblast.js + this family.
   Square, tokenized, same layout.
*************************************************************/
.eb-section { margin: 0 0 18px; }
.eb-tight { margin: 0 0 10px; }
.eb-gap6 { margin: 6px 0; }
.eb-gap6b { margin: 0 0 6px; }
.eb-mt6 { margin-top: 6px; }
.eb-mt8 { margin-top: 8px; }
.eb-mt10 { margin-top: 10px; }
.eb-mb4 { margin-bottom: 4px; }
.eb-ml8 { margin-left: 8px; }
.eb-mr10 { margin-right: 10px; }
.eb-right { text-align: right; }
.eb-normal { font-weight: normal; }
.eb-italic { font-style: italic; }
.eb-bold { font-weight: 600; }
.eb-mono { font-family: var(--font-mono); }
.eb-muted { color: var(--color-text-muted); }
.eb-ok { color: var(--color-status-go); }
.eb-fail { color: var(--color-danger); }
.eb-warn { color: var(--color-timeout); }
.eb-queued { color: var(--color-status-hold); }
.eb-note { font-size: 0.6875rem; color: var(--color-text-muted); }
.eb-note-tight { margin: 4px 0 0; }
.eb-micro { color: var(--color-text-muted); font-size: 0.625rem; margin-left: 6px; }
.eb-micro-cell { font-size: 0.625rem; }
.eb-small { font-size: 0.75rem; color: var(--color-text-muted); }
.eb-small-lg { font-size: 0.8125rem; color: var(--color-text-muted); }
.eb-small-plain { font-size: 0.75rem; }
.eb-status { margin-left: 8px; font-size: 0.75rem; }
.eb-status-lg { margin-left: 12px; font-size: 0.8125rem; }
.eb-row-note { margin-top: 10px; font-size: 0.8125rem; }
.eb-row-note-lg { margin-top: 12px; font-size: 0.8125rem; }
.eb-actions { margin-top: 15px; font-size: 0.875rem; }
.eb-label-plain { margin-right: 16px; font-weight: normal; }
.eb-flexrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.eb-split { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.eb-statline { margin: 4px 0 8px; font-size: 0.75rem; }
.eb-toggle { cursor: pointer; font-weight: 600; font-size: 0.875rem; }
.eb-clicky { cursor: pointer; font-size: 0.75rem; }
.eb-details { margin: 0 0 6px; }
.eb-summary { cursor: pointer; font-size: 0.75rem; color: var(--color-text-muted); }

.eb-input { padding: 5px 8px; font-size: 0.75rem; border: 1px solid var(--color-border); }
.eb-input-wide { min-width: 220px; }
.eb-input-mid { margin-left: 6px; padding: 9px 6px; font-size: 0.8125rem; border: 1px solid var(--color-border); }
.eb-input-lg { width: 100%; padding: 8px; font-size: 0.875rem; }
.eb-input-lg.eb-mono { font-size: 0.8125rem; }

.eb-btn-lg {
    padding: 10px 24px; background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); cursor: pointer; font-weight: 600; font-size: 0.875rem;
}
.eb-btn-dark { padding: 10px 24px; background: var(--color-dark-alt); color: var(--color-text-white); border: none; font-size: 0.875rem; cursor: pointer; }
.eb-btn-send { padding: 10px 24px; background: var(--color-danger); color: var(--color-text-white); border: none; font-size: 0.875rem; cursor: pointer; font-weight: 700; }
.eb-btn-danger { margin: 0 0 8px; padding: 5px 12px; font-size: 0.75rem; background: var(--color-danger); color: var(--color-text-white); border: none; cursor: pointer; }
.eb-btn-sm { margin-left: 12px; padding: 4px 10px; font-size: 0.6875rem; background: var(--color-surface); border: 1px solid var(--color-border); cursor: pointer; }
.eb-btn-xs { margin: 0 0 8px; padding: 4px 10px; font-size: 0.6875rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); cursor: pointer; }
.eb-btn-tiny { padding: 3px 10px; font-size: 0.6875rem; cursor: pointer; }

.eb-table { width: 100%; font-size: 0.6875rem; border-collapse: collapse; }
.eb-table-mt { margin-top: 6px; }
.eb-th-sticky { text-align: left; color: var(--color-text-muted); background: var(--color-surface); position: sticky; top: 0; }
.eb-thead-plain { text-align: left; color: var(--color-text-muted); }
.eb-TH-soft { font-weight: normal; color: var(--color-text-muted); font-size: 0.75rem; }
.eb-cell { padding: 3px 6px; }
.eb-cell-line { padding: 4px 6px; border-bottom: 1px solid var(--color-border-light); }
.eb-cell-mid { padding: 5px 6px; border-bottom: 1px solid var(--color-border-light); }
.eb-cell-click { padding: 5px 6px; cursor: pointer; border-bottom: 1px solid var(--color-border-light); }
.eb-cell-soft { padding: 3px 6px; border-bottom: 1px solid var(--color-border-light); }
.eb-row-good { background: var(--color-status-go-bg); }
.eb-row-bad { background: var(--color-red-bg); }
.eb-row-iffy { background: var(--color-surface-warm); }
.eb-badge-stale {
    background: var(--color-status-hold-bg); color: var(--color-status-hold);
    border: 1px solid var(--color-status-hold); padding: 1px 6px; font-size: 0.625rem; margin-left: 6px;
}

.eb-panel { border: 1px solid var(--color-border); padding: 10px; }
.eb-preview-box { background: var(--color-page-bg); padding: 15px; font-size: 0.875rem; line-height: 1.6; border: 1px solid var(--color-border); }
.eb-confirm-box { background: var(--color-surface-warm); border: 2px solid var(--color-dark-alt); padding: 20px; margin-bottom: 20px; }
.eb-scrollbox { max-height: 420px; overflow: auto; border: 1px solid var(--color-border-light); }
.eb-scrollbox-tall { max-height: 520px; }
.eb-bodybox { background: var(--color-surface); border: 1px solid var(--color-border-light); padding: 8px 10px; margin: 6px 0; font-size: 0.75rem; white-space: pre-wrap; }
.eb-rawbox { background: var(--color-surface); border: 1px solid var(--color-border-light); padding: 10px; margin-top: 6px; font-family: var(--font-mono); font-size: 0.6875rem; white-space: pre-wrap; max-height: 300px; overflow: auto; }
.eb-progress { margin: 6px 0; height: 16px; background: var(--color-border-light); overflow: hidden; }
.eb-progress-fill { height: 100%; background: var(--color-status-go); transition: width .3s; }