/* Generated from Import.css by the GenerateCssBundle target. Do not edit. */
/* noto-sans-font/stylesheet.css */
@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-BlackItalic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-Black.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-Italic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-ExtraLightItalic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-BoldItalic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-ExtraBoldItalic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-ExtraBold.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-ExtraLight.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-Bold.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-Light.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-SemiBold.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-SemiBoldItalic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-MediumItalic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-ThinItalic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-LightItalic.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-Medium.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-Thin.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('noto-sans-font/NotoSans-Regular.woff2') format('woff2'),
        url('noto-sans-font/NotoSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* icon-font/stylesheet.css */
/* Generated by Glyphter (http://www.glyphter.com) on  Fri Aug 02 2024*/
@font-face {
    font-family: 'Glyphter';
    src: url('icon-font/Glyphter.eot');
    src: url('icon-font/Glyphter.eot?#iefix') format('embedded-opentype'),
         url('icon-font/Glyphter.woff') format('woff'),
         url('icon-font/Glyphter.ttf') format('truetype'),
         url('icon-font/Glyphter.svg#Glyphter') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* reset.css */
/***
    The new CSS reset - version 1.7.2 (last updated 23.6.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their padding_3x-4x */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
    -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}
/* Layout.css */
.vertical-align_middle { vertical-align: middle }
.vertical-align_top { vertical-align: top }
.container {padding: 12px 12px;}
.zindex_low {z-index: -100;}
.zindex_middle {z-index: 100;}
.zindex_high {z-index: 1000;}
.invisible {visibility: hidden;}
.visible {visibility: visible;}
.width_fit-content { width: fit-content; min-width: fit-content; }
.width_full { width: 100%;}
.max-width_full { max-width: 100%; }
.viewport-height { height: 100vh; max-height: 100vh; }
/*Position*/
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; top: 0px; }
/*Grid*/
.grid {display: grid;}
.grid__first-column { grid-column: 1 / span 1; }
.grid__second-column { grid-column: 2 / span 1; }
.grid__third-column { grid-column: 3 / span 1; }
.grid__fourth-column { grid-column: 4 / span 1; }
.grid__fifth-column { grid-column: 5 / span 1; }
.grid_two-columns { grid-template-columns: auto auto; grid-template-rows: auto; }
.grid__first-to-second-column {grid-column: 1/ span 2;}
.grid__first-to-last-column { grid-column: 1 / -1; width: 100%; }
.display_contents {display: contents;}

/*Flex*/
.row { display: flex; }
.mobile-row { display: flex; }
.row > .stretched { flex-grow: 1;}
.column { display: flex; flex-direction: column; }
.column > .stretched { flex-grow: 1; overflow-y: hidden; }
.flex-spacer {flex: 1 0 auto;}
.mobile-flex-spacer {flex: 1 0 auto;}
.flex_wrap {flex-wrap: wrap;}
.flex_equal-size-item {flex: 1; min-width: 0;}
.flex_one { flex: 1; }

/*Gaps*/
.column-gap_1x {column-gap: var(--unit);}
.column-gap_2x {column-gap: var(--unit-2x);}
.column-gap_3x {column-gap: var(--unit-3x);}
.column-gap_4x {column-gap: var(--unit-4x);}
.column-gap_5x {column-gap: var(--unit-5x);}

.row-gap_half {row-gap: calc(var(--unit) * 0.5);}
.row-gap_1x { row-gap: var(--unit); }
.row-gap_2x {row-gap: var(--unit-2x);}
.row-gap_3x {row-gap: var(--unit-3x);}
.row-gap_4x {row-gap: var(--unit-4x);}
.row-gap_5x {row-gap: var(--unit-5x);}

.gap_3px { gap: 3px; }
.gap_half {gap: calc(var(--unit) * 0.5);}
.gap_6px { gap: 6px; }
.gap_size-of-space { gap: 7px; }
.gap_1x { gap: var(--unit); }
.gap_one-and-half { gap: calc(var(--unit) * 1.5); }
.gap_2x { gap: var(--unit-2x); }
.gap_3x { gap: var(--unit-3x); }
.gap_4x { gap: var(--unit-4x); }
.gap_5x { gap: var(--unit-5x); }
.gap_6x { gap: var(--unit-6x); }

.block { padding: var(--unit) 0px; }

/*Margins*/
.up_1px {margin-top: -1px;}
.up_2px {margin-top: -2px;}
.up_3px {margin-top: -3px;}
.down_2px {margin-bottom: -2px;}
.down_3px {margin-bottom: -3px;}
.down_4px {margin-bottom: -4px;}
.down_1px {margin-bottom: -1px;}
.margin-bottom_1x { margin-bottom: 8px;}
.margin-bottom_2x { margin-bottom: 16px;}
.margin-top_1x { margin-top: 8px;}
.margin-top_2x { margin-top: 16px;}
.margin-top_4x { margin-top: 32px;}
.margin-top_7x { margin-top: 56px;}
.margin-right_4x { margin-right: 32px;}
.margin-left_2x { margin-left: 16px;}

/*Padings*/
.padding_0x-1x { padding: 0px var(--unit); }
.padding_1x-1x { padding: var(--unit) var(--unit); }
.padding_1x-2x { padding: var(--unit) var(--unit-2x); }
.padding_2x-3x { padding: var(--unit-2x) var(--unit-3x); }

/*Alignments*/
.centered-box { display: flex; align-items: center; justify-content: center; }
.justify-content_right { justify-content: right; }
.align-items_start {align-items: flex-start;}
.align-items_end {align-items: flex-end;}
.centered {align-items: center;}
.align-self_end { align-self: end; }
.align-self_center { align-self: center; }
.align-self_start { align-self: start; }
.justify-self_start {justify-self: start;}
.justify-self_end {justify-self: end;}
.self_center { justify-self: center; align-self: center; }
.space-between { justify-content: space-between; }

/*display*/
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.inline {display: inline;}
.display_none {display: none;}

@media (min-width: 1280px) {
    .mobile-row { display: contents; }
    .mobile-flex-spacer { display: none; }
}

/* Skip link: hidden off-screen until keyboard focus, then pinned to the top-left corner */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius-small);
    transform: translateY(-200%);
    transition: transform 0.15s ease-in-out;
}
    .skip-link:focus,
    .skip-link:focus-visible { transform: translateY(0); }


/* Text.css */
html {
    font-family: Noto Sans;
    font-style: normal;
    color: var(--text-color);
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
}

.font_size_16px { font-size: 16px; }
h1 { font-size: 20px; font-weight: 700; }
h2 { font-weight: 700; font-size: 16px; line-height: 22px; }
    h2.widget { font-weight: 500; font-size: 14px; line-height: 22px; }
h3 { font-size: 14px; font-weight: 700; }

.markup-heading_h1 {
    margin-bottom: 32px;
    font-size: 28px;
    line-height: 38px; 
}
.markup-heading_h2 {
    margin-bottom: 24px;
    margin-top: 72px; 
    font-size: 24px;
    line-height: 32px; 
}
.markup-heading_h3 { 
    margin-top: 48px; 
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 24px; 
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: white; transition: var(--transition); }
a:hover h1, a:hover h2, a:hover h3 {
    color: var(--accent-color);
}

p { margin-bottom: 0.8em; margin-top: 0.8em; }
    p:first-child { margin-top: 0px; }
    p:last-child { margin-bottom: 0px; }
    .quote + p { margin-top: 0; }
    .postquote + p { margin-top: 0; }

.nowrap {white-space: nowrap;}
.text_highlighted { color: var(--accent-color); font-weight: 700; }
.text_align_center { text-align: center; }
.text_align_left { text-align: left; }
.text_align_right { text-align: right; }
.caption { font-size: 13px; line-height: 19px; }
.small-caption { font-size: 12px; line-height: 17px; }
.tiny-caption { font-size: 12px; line-height: 17px; }
.text_low-priority { transition: var(--transition); color: var(--text-low-priority-color); }
.text_middle-priority { transition: var(--transition); color: var(--text-middle-priority-color); }
a:hover .text_low-priority, a:hover .text_middle-priority { color: var(--accent-color); } 
.bold { font-weight: 700; }
em { font-style: italic; }
strong { font-weight: 700; }
p + ul { margin-top: -0.8em; }
ul.bullets { padding-left: 2em; list-style-type: disc; }
    ul.bullets ul.bullets { list-style-type: circle; }

.font-icon {
    vertical-align: middle;
    font-size: 16px;
    line-height: normal;
    display: inline-block;
    font-family: 'Glyphter';
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (min-width: 1280px) {
    html { font-size: 16px; line-height: 23px; }
    h1 { font-weight: 500; font-size: 36px; line-height: 48px; }
    h2 { font-size: 22px; line-height: 32px; }
        h2.widget { font-weight: 700; font-size: 20px; line-height: 28px; }
    h3 { font-size: 16px; }
    .caption { font-size: 14px; line-height: 20px; }
    .small-caption { font-size: 13px; line-height: 19px; }
    .text_default-line-height { line-height: unset; }
}

/* Theme.css */
:root, [data-theme="light"] {
    --transition: filter 0.3s ease, border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
    
    --logo-card-background: black;
    --logo-card-color: white;
    --logo-spade-background: black;

    --dark-theme-invert-filter: invert(0);

    --suit-color-clubs: #009966;    
    --suit-color-hearts: #de3636;  
    --suit-color-diamonds: #006dde; 
    --suit-color-spades: #000000;  
    --private-message-color: rgb(220, 229, 230);

    --toast-error-background: rgb(247, 219, 219);
    --toast-error-text-color: #391015;
    --toast-success-background: rgb(214, 248, 221);
    --toast-success-text-color: #10391B;

    --unit: 8px; --unit-2x: 16px; --unit-3x: 24px; --unit-4x: 32px; --unit-5x: 40px; --unit-6x: 48px;

    --outline-on-hover: #006dde;

    --primary-color: #006dde; /*blue*/
    --primary-color-on-hover: #298FF8;
    --accent-color: #fb0a2a; /*Red*/
    --accent-color-rgb: 251, 10, 42; /*Red*/
    --accent-color-secondary: rgb(0, 206, 83); /*Green*/
    --accent-color-secondary-rgb: 0, 206, 83;

    --fire-color: #fe9066; 
    --original-poster-color: #E8D157;

    --border-color-rgb: 0, 0, 0;
    --border: 1px solid rgba(0, 0, 0, 0.2);
    --border-contrast: 1px solid rgba(0, 0, 0, 1);
    --border-radius: 10px;
    --border-radius-small: 4px;
    --border-radius-big: 20px;

    --scrollbar-thumb-color: grey;
    --scrollbar-color: darkgrey lightgrey;
    --scrollbar-hover-color: #d0d0d0 transparent;

    --error-background-color: #ffe7ea;

    /*Background color is found behind scrollable content*/
    --background-color: rgb(244, 244, 244); 
    --background-color-rgb: 244, 244, 244;

    /*Surface colors map to components such as cards, sheets, and menus*/
    --surface-color: white; 
    --surface-color-200: rgb(247, 247, 247); 
    --surface-color-300: rgb(238, 238, 238); 
    --surface-color-400: rgb(231, 231, 231); 
    --surface-color-500: rgb(223, 223, 223); 
    --surface-color-secondary: #dce5e6; /*widget*/
    --surface-color-tertiary: #ffebb7; /*announcement*/

    --opacity-priority-middle: 0.7;
    --opacity-priority-low: 0.4;

    --thread-title-color: #2A2A2A;
    --link-color: #006DDE;
    --link-color-rgb: 0, 109, 222;
    --link-hover-color: #005AB7;
    --link-title-hover-color: #004082;
    --link-visited-color: #0009DE;
    --link-border: rgba(0, 109, 222, 0.1) rgba(0, 109, 222, 0.1) rgba(0, 109, 222, 0.1) #006DDE;
    --link-card-background-color: #e6f0ff;

    --text-color: rgba(0,0,0, 1);
    --text-color-rgb: 0, 0, 0;
    --text-high-priority-color: black;
    --text-middle-priority-color: rgba(0, 0 ,0, 0.7); 
    --text-middle-priority-color-two: rgba(0, 0, 0, 0.5);
    --text-low-priority-color: rgba(0, 0, 0, 0.4); 
    --text-color-on-primary: white;
    --error-color: red;

    --image-background: #ebf0f1;
    --fade-background: linear-gradient(to top, rgba(var(--background-color-rgb), 1), rgba(var(--background-color-rgb), 0));
    --fade-twitter: linear-gradient(to top, var(--surface-color-300), rgba(var(--background-color-rgb), 0));
    --overlay-background-color: rgba(0, 0, 0, 0.4);
    --post-overlay-background-color: rgb(var(--background-color-rgb), 0.7);
    --post-separator-width: 1px;
    --skeleton-gradient: linear-gradient(90deg, rgb(224, 224, 224)  25%, rgb(240, 240, 240) 50%, rgb(224, 224, 224) 75%);
    --scrolled-post-background-color: #fffae6;
    --login-logo-background-color: #2b3940;
    --separator-color: rgba(0, 0, 0, 0.1);
    --separator-color-rgb: 0, 0, 0;
    --separator-contrast-color: rgba(0, 0, 0, 0.2);
    --post-separator-color: rgba(0, 0, 0, 0.2);
    --separator-contrast-color-hex: #c3c3c3;
    --trending-thread-background: #ffefe8;

    --shadow-color: rgba(60, 104, 171, 0.13);
    --sticky-header-shadow: 0px 3px 6px 0px var(--shadow-color);
    --shadow: 0px 10px 15px var(--shadow-color);
    --shadow-small: 0px 2px 4px var(--shadow-color);
    --navigationbar-header-shadow: 0px -1px 0px var(--shadow-color) inset;
}

[data-theme="dark"] {
    --transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;

    --dark-theme-invert-filter: invert(1);

    --logo-card-background: white;
    --logo-card-color: black;
    --logo-spade-background: #898989;

    --suit-color-clubs: #00cc66;     
    --suit-color-hearts: #ff4c4c;   
    --suit-color-diamonds: #339cff;
    --suit-color-spades: #ffffff; 

    --private-message-color: rgb(43, 82, 120);

    --toast-error-background: #541212;       
    --toast-error-text-color: #E9AFB6;      
    --toast-success-background: #0F571D;   
    --toast-success-text-color: #AFE9BF;  

    --unit: 8px; 
    --unit-2x: 16px; 
    --unit-3x: 24px; 
    --unit-4x: 32px; 
    --unit-5x: 40px; 
    --unit-6x: 48px;

    --primary-color: #339cff;        
    --primary-color-on-hover: #62afff;
    --accent-color: #ff5c5c;          

    --outline-on-hover: rgba(255,255,255,0.5);

    --fire-color: #ff7a45;          
    --original-poster-color: #998c47;  

    --border-color-rgb: 255, 255, 255;
    --border: 1px solid rgba(255, 255, 255, 0.2);
    --border-contrast: 1px solid rgba(255, 255, 255, 0.5);
    --border-radius: 10px;
    --border-radius-small: 4px;
    --border-radius-big: 20px;

    --scrollbar-thumb-color: #555555;
    --scrollbar-color: #444444 #222222;
    --scrollbar-hover-color: #666666 transparent;

    --error-background-color: #4f1a1a; 

    /* Background color is found behind scrollable content */
    --background-color: #121212;            
    --background-color-rgb: 18, 18, 18;

    /* Surface colors map to components such as cards, sheets, and menus */
    --surface-color: rgb(42, 42, 42);               
    --surface-color-200: rgb(47, 47, 47); 
    --surface-color-300: #303333; 
    --surface-color-400: #303333; 
    --surface-color-500: rgb(63, 63, 63); 
    --surface-color-secondary: #303333;      
    --surface-color-tertiary: #3a2b10;      

    --opacity-priority-middle: 0.8;
    --opacity-priority-low: 0.6;

    --thread-title-color: rgba(220,220,220,1);
    --link-color: #339cff;                 
    --link-card-background-color: #20212d;

    --link-color-rgb: 51, 156, 255;
    --link-hover-color: #62afff;
    --link-title-hover-color: #a6d9ff;
    --link-visited-color: #cc88ff;        
    --link-border: rgba(51, 156, 255, 0.1) rgba(51, 156, 255, 0.1) rgba(51, 156, 255, 0.1) #339cff;

    --text-color: rgb(210, 201, 184);
    --text-color-rgb: 210, 201, 184;
    --text-high-priority-color: white;
    --text-middle-priority-color: rgba(var(--text-color-rgb), 0.8); 
    --text-middle-priority-color-two: rgba(var(--text-color-rgb), 0.7);
    --text-low-priority-color: rgba(var(--text-color-rgb), 0.6); 
    --text-color-on-primary: white;       
    --error-color: #ff5544;              

    --image-background: #2a2a2a;
    --fade-background: linear-gradient(to top, rgba(var(--background-color-rgb), 1), rgba(var(--background-color-rgb), 0));
    --fade-twitter: linear-gradient(to top, var(--surface-color-300), rgba(var(--background-color-rgb), 0));
    --overlay-background-color: rgba(0,0,0,0.75);
    --post-overlay-background-color: rgba(var(--background-color-rgb), 0.8);
    --post-separator-width: 1px;
    --skeleton-gradient: linear-gradient(90deg, #2e2e2e 25%, #3a3a3a 50%, #2e2e2e 75%);
    --scrolled-post-background-color: #4c2618;

    --surface-inside-scrolled-post: #2D2727;

    --login-logo-background-color: #1a1a1a;
    --separator-color:  rgba(255,255,255,.15);
    --separator-color-rgb: 255, 255, 255;
    --separator-contrast-color: rgba(255,255,255,.25);
    --separator-contrast-color-hex:  #4d4d4d;
    --post-separator-color: rgba(255,255,255,.25);
    --accent-color-secondary: #00ce53;           
    --trending-thread-background: #3f322a;

    --shadow-color: rgba(60, 104, 171, 0.33);
    --sticky-header-shadow: none;
    --shadow: none;
    --shadow-small: none;
    --navigationbar-header-shadow: none;
}

[data-theme="coral"] {
    --transition: filter 0.3s ease, border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;

    --dark-theme-invert-filter: invert(0);

    --suit-color-clubs: #009966;    
    --suit-color-hearts: #de3636;  
    --suit-color-diamonds: #006dde; 
    --suit-color-spades: #000000;  

    --private-message-color: rgb(220, 229, 230);

    --toast-error-background: rgb(247, 219, 219);
    --toast-error-text-color: #391015;
    --toast-success-background: rgb(214, 248, 221);
    --toast-success-text-color: #10391B;

    --unit: 8px; --unit-2x: 16px; --unit-3x: 24px; --unit-4x: 32px; --unit-5x: 40px; --unit-6x: 48px;

    --primary-color: #006dde; /*blue*/
    --primary-color-on-hover: #298FF8;
    --accent-color: #fb0a2a; /*Red*/
    --accent-color-secondary: rgb(0, 206, 83); /*Green*/
    --accent-color-secondary-rgb: 0, 206, 83;

    --outline-on-hover: #006dde;

    --fire-color: #fe9066; 
    --original-poster-color: #E8D157;

    --border-color-rgb: 0, 0, 0;
    --border: 1px solid rgba(0, 0, 0, 0.2);
    --border-contrast: 1px solid rgba(0, 0, 0, 1);
    --border-radius: 10px;
    --border-radius-small: 4px;
    --border-radius-big: 20px;

    --scrollbar-thumb-color: grey;
    --scrollbar-color: darkgrey lightgrey;
    --scrollbar-hover-color: #d0d0d0 transparent;

    --error-background-color: #ffe7ea;

    /*Background color is found behind scrollable content*/
    --background-color: rgb(224, 220, 252); 
    --background-color-rgb: 224, 220, 252;

    /*Surface colors map to components such as cards, sheets, and menus*/
    --surface-color: rgb(211, 213, 239); 
    --surface-color-200: rgb(206, 208, 234); 
    --surface-color-300: rgb(206, 208, 234); 
    --surface-color-400: rgb(206, 208, 234); 
    --surface-color-500: rgb(206, 208, 234); 
    --surface-color-secondary: #dce5e6; /*widget*/
    --surface-color-tertiary: #ffebb7; /*announcement*/

    --opacity-priority-middle: 0.7;
    --opacity-priority-low: 0.4;

    --thread-title-color: #2A2A2A;

    --link-color: #006DDE;
    --link-color-rgb: 0, 109, 222;
    --link-hover-color: #005AB7;
    --link-title-hover-color: #004082;
    --link-visited-color: #0009DE;
    --link-border: rgba(0, 109, 222, 0.1) rgba(0, 109, 222, 0.1) rgba(0, 109, 222, 0.1) #006DDE;
    --link-card-background-color: #e6f0ff;

    --text-color: rgba(0,0,0, 1);
    --text-high-priority-color: black;
    --text-color-rgb: 0, 0, 0;
    --text-middle-priority-color: rgba(0, 0 ,0, 0.7); 
    --text-middle-priority-color-two: rgba(0, 0, 0, 0.5);
    --text-low-priority-color: rgba(0, 0, 0, 0.4); 
    --text-color-on-primary: white;
    --error-color: red;

    --image-background: #ebf0f1;
    --fade-background: linear-gradient(to top, rgba(var(--background-color-rgb), 1), rgba(var(--background-color-rgb), 0));
    --fade-twitter: linear-gradient(to top, var(--surface-color-300), rgba(var(--background-color-rgb), 0));
    --overlay-background-color: rgba(0, 0, 0, 0.4);
    --post-overlay-background-color: rgb(var(--background-color-rgb), 0.7);
    --post-separator-width: 1px;
    --skeleton-gradient: linear-gradient(90deg, rgb(201, 203, 229)  25%, rgb(221, 223, 249) 50%, rgb(201, 203, 229) 75%);
    --scrolled-post-background-color: #fffae6;
    --login-logo-background-color: #2b3940;
    --separator-color: rgba(0, 0, 0, 0.1);
    --separator-color-rgb: 0, 0, 0;
    --separator-contrast-color: rgba(0, 0, 0, 0.2);
    --post-separator-color: rgba(0, 0, 0, 0.2);
    --separator-contrast-color-hex: #c3c3c3;
    --trending-thread-background: #ffefe8;

    --shadow-color: rgba(60, 104, 171, 0.13);
    --sticky-header-shadow: 0px 3px 6px 0px var(--shadow-color);
    --shadow: 0px 10px 15px var(--shadow-color);
    --shadow-small: 0px 2px 4px var(--shadow-color);
    --navigationbar-header-shadow: 0px -1px 0px var(--shadow-color) inset;
}

[data-style="legacy"] {
    --post-separator-width: 4px;
    --post-separator-color: #002B30;
}

/* main.css */
html { background: var(--background-color); scrollbar-color: var(--scrollbar-color); scrollbar-width: thin; }
.nested-block .nested-block { background: var(--surface-color-500); }
a { text-decoration: none; color: inherit; transition: var(--transition); }
    a:hover { color: var(--accent-color); border-color: var(--accent-color); }
    a:disabled, a[disabled]{ opacity: var(--opacity-priority-low); pointer-events: none; cursor: not-allowed; }
sup { vertical-align: super; font-size: small; }
context { display: flex; flex-direction: row; gap: 4px; justify-content: center; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
[data-theme="dark"] .icon { filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(256deg) brightness(104%) contrast(101%); }
.validation-summary { border-radius: var(--border-radius-small); padding: 6px 18px; background: var(--error-background-color); color: var(--text-middle-priority-color); }
.validation-message { color: var(--error-color); }
.unread-post-count-link { }
.numbers { margin-left: 10px; }
.overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--overlay-background-color); z-index: 99; }
.mobile { display: contents; }
.desktop { display: none; }
.grecaptcha-badge { display:none !important; }
.separator_horizontal { border-bottom: 1px solid var(--separator-color); width: 100%; } 
.separator_vertical { border-left: 1px solid var(--separator-color); }
.surface { background: var(--surface-color); }
.background { background: var(--background-color); }
.flip-horizontal { transform: scaleX(-1); }
.flip-vertical { transform: scaleY(-1); }
.inverted-color {filter: invert(100%);}
.shadow { box-shadow: var(--shadow); }
.overflow_hidden { overflow: hidden; }
.overflow-dotted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.multiline-overflow-dotted { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; }
.multiline-overflow-dotted--one-line {-webkit-line-clamp: 1;}
.multiline-overflow-dotted--three-lines {-webkit-line-clamp: 3;}
.multiline-overflow-dotted--four-lines {-webkit-line-clamp: 4;}
.multiline-overflow-dotted--six-lines {-webkit-line-clamp: 6;}
.cursor_pointer { cursor: pointer; }
.forum-icon { width: 48px; min-width: 48px; min-height: 48px; height: 48px; border-radius: 10px; }
.card-suit { font-size: 2em; position: relative; top: 3px; margin-left: 2px; margin-right: 2px; }
.card-suit_clubs { color: var(--suit-color-clubs); }
.card-suit_hearts { color: var(--suit-color-hearts); }
.card-suit_diamonds { color: var(--suit-color-diamonds); }
.card-suit_spades { color: var(--suit-color-spades); }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); background-clip: padding-box; border-radius: 6px; }
*::-webkit-scrollbar-track { background-color: var(--background-color); }
.image-link { line-height: 0; }
.error {color: var(--error-color);}
.gifemoji { height: 28px; }
.card { padding: 16px 16px; background: var(--surface-color); border-radius: var(--border-radius-big); }
.youtube-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ height: 0; margin-bottom: 30px; }
.youtube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; }
.tap-area:after { content: ''; position: absolute; top: -10px; bottom: -10px; left: -10px; right: -10px; }
.flip-vertical { transform: rotateX(180deg); }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; background: var(--surface-color-400); }
html[data-style="legacy"] .avatar  { width: 54px; height: 54px; }
.overflown-text { width: 0; flex: 1 1 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* A single digit renders as a circle (min-width == height); longer captions like "99+"
   stretch the badge into a pill instead of overflowing the circle. */
.badge {
    box-sizing: border-box;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: var(--text-color-on-primary);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Overlays the top-right corner of an icon inside a position:relative anchor.
   Anchored from the anchor's vertical CENTER (not its top) so badges on icons with
   different glyph heights still align, and right-anchored so multi-digit pills grow
   leftward over their own icon instead of into the neighboring control. */
.badge_on-icon {
    position: absolute;
    bottom: calc(50% - 2px);
    right: -10px;
}

.inline-link {
    color: rgba(var(--link-color-rgb), 0.6);
    transition: var(--transition); 
    text-decoration: underline rgba(var(--link-color-rgb), 0.2);
    text-underline-offset: 3px;
    word-break: break-all;
}
    .inline-link:hover { color: rgba(var(--link-color-rgb), 1); }
    .inline-link:visited { color: rgba(var(--link-color-rgb), 1); }
.inline-link_no-wrap { word-break: unset; white-space: nowrap; }

.contrast-block {
    background: var(--surface-color-400);
    padding: calc(var(--unit) * 1) calc(var(--unit) * 2); 
    border-radius: var(--border-radius-small);
    width: 100%;
    margin-bottom: 4px;
}

.layout-grid {
    display: grid;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    grid-template-rows: min-content min-content 1fr;
    height: 100vh;
} 

.layout-grid__main {
    padding: 0px 12px;
    position: relative;
    width: 100%;
    grid-row-start: 3;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 1;
} 

.layout-grid__left-sidebar {
    position: relative;
    width: 100%;
    grid-row-start: 2;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 1;
    display: none;
    visibility: hidden;
    z-index: 100;
}

.layout-grid__left-sidebar_open {
    display: unset;
    visibility: unset;
    background: var(--surface-color);
    position: fixed;
    top: 0;
    width: 80%;
    left: 0;
    height: 100%;
    overflow: auto;
}

html:has(.layout-grid__left-sidebar_open),
html:has(.image-viewer__fullscreen-overlay),
html:has(.login-layout) { overflow-y: hidden; }

.layout-grid__announcement-row { grid-row-start: 1; width: 100%; background: var(--surface-color-tertiary); }

.layout-grid__right-sidebar {
    position: relative;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: auto;
    background: var(--surface-color); 
}
.widget-panel { display: flex; flex-direction: column; gap: 20px; }
.widget-container { padding: 10px 20px; }
.search-container { padding: 0px 20px; display: flex; flex-direction: column; gap: 16px; }

/* The header row contract: on desktop every layout-grid column starts with a .header-container
   row of exactly var(--header-height) — the logo row in the left sidebar (NavigationBarHeader),
   the page header in the main column (PageHeader) and the controls row in the right sidebar
   (HeaderBar in MainLayout). The columns share the same grid row, so the fixed height is what
   keeps the three rows aligned horizontally: header content must fit into a single row, anything
   taller (captions, subtitles) belongs below the header row. */
:root { --header-height: 60px; }

@media (min-width: 1280px) {
    html { scrollbar-gutter: stable; }
    .header-container {
        min-height: var(--header-height);
        height: var(--header-height);
        padding: 12px 0px;
        display: flex;
        align-items: center; 
    }
        .header-container h1 { line-height: normal; }
        /* The 60px header row centers its 36px title, leaving ~12px of empty space under the
           title glyphs; the caption is pulled up into that space (keeping a small gap) so it
           sits directly under the title while the title itself stays centered in the row. */
        .header-container__caption {
            color: var(--text-middle-priority-color-two);
            margin-top: -8px;
            margin-bottom: var(--unit-2x);
        }
    .layout-grid {
        column-gap: 25px;
        /* Both sidebar tracks share the same 450px max so the main column stays centered
           once the 1fr gutters have space (fr tracks only get space after minmax tracks max out).
           The left sidebar itself is capped at 300px and aligned against the main column. */
        grid-template-columns: 1fr minmax(150px, 450px) minmax(50%, 950px) minmax(250px, 450px) 1fr;
        margin-left: auto;
        margin-right: auto; 
        height: unset;
    }
    html[data-style="legacy"] .layout-grid {
        grid-template-columns: 0px auto 1fr minmax(250px, 315px) 0px;
        margin-left: unset;
        margin-right: unset; 
    }
    .layout-grid__announcement-row {
      grid-column-start: 1;
      grid-column-end: 6; 
      background: var(--surface-color-tertiary);
      display: grid;
      grid-template-columns: auto 315px minmax(auto, 820px) 375px auto; 
      column-gap: 25px; 
    }
    .layout-grid__announcement { grid-column-start: 2; grid-column-end: 5; }
    .layout-grid__left-sidebar_open { background: var(--background-color); }
    .mobile { display: none; }
    .desktop { display: contents; }
    .card { padding: calc(var(--unit) * 2) calc(var(--unit) * 3); }
    .layout-grid__left-sidebar { display: block; visibility: visible; grid-row-start: 2; grid-column-start: 2; grid-column-end: 3; max-width: 300px; justify-self: end; }
    html[data-style="legacy"] .layout-grid__left-sidebar { max-width: 315px; }
    .layout-grid__left-sidebar_collapsed { border-right: 1px solid var(--separator-color); }
    .layout-grid__main { margin-bottom: 40px; padding: unset; grid-row-start: 2; grid-column-start: 3; grid-column-end: 4; }
    .layout-grid__right-sidebar { z-index: 100; display: block; visibility: visible; grid-column-start: 4; grid-column-end: 5; background: unset; grid-row-start: 2; }
    .sidebar-container { position: sticky; display: flex; flex-direction: column; height: 99vh; padding: 0px 12px; top: 0px; }
    .scroll-container {
        flex: 1 1 0;
        padding: 0px 12px 0px 12px;
        margin: 0px -12px 40px -12px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }
        .scroll-container:hover { scrollbar-color: var(--scrollbar-hover-color); }
        .scroll-container::-webkit-scrollbar-thumb { background-color: transparent; background-clip: padding-box; border-radius: 6px; }
        .scroll-container:hover::-webkit-scrollbar-thumb { background-color: var(--surface-color); }
        .scroll-container::-webkit-scrollbar { width: 6px; }
}



/* Components/Forms/Form.css */
/*default classes set by Blazor*/
.invalid { outline: 1px solid #FF0000; }
/*Valid state doesn't have css. Uncomment if you want to use it
    .valid.modified:not([type=checkbox]) {}*/

input {
    height: 43px;
    padding: var(--unit);
    border-radius: var(--border-radius-small);
    font-size: 16px;
    background: var(--surface-color);
    color: var(--text-color); 
    width: 100%;
}
    input:focus { outline: 1px solid var(--outline-on-hover); }
    input::placeholder { color: var(--text-low-priority-color); font-size: 14px; }

input[type="checkbox" i] {
    -webkit-appearance: none; 
    -moz-appearance: none;   
    appearance: none;
    cursor: pointer;
    border-radius: 5px;
    background: var(--surface-color);
    min-height: 24px;
    min-width: 24px;
    height: 24px;
    width: 24px;
    position: relative;
    padding: unset;
}
    input[type="checkbox" i]:focus { outline: unset; }
    input[type="checkbox" i]:checked { background: var(--primary-color); }
    input[type="checkbox"]:checked::after {
        content: "";
        left: 9px;
        top: 5px;
        width: 6px;
        height: 11px;
        border: solid var(--text-color-on-primary);
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
    }

select { 
    width: fit-content;
    height: 43px;
    padding: var(--unit);
    padding-right: 2.5em;
    border-radius: var(--border-radius-small);
    line-height: 1.5;
    font-size: 16px;
    background-color: var(--surface-color);
    color: var(--text-color); 
    appearance: none;
    -webkit-appearance: none; 
    -moz-appearance: none;   
    background-image: linear-gradient(45deg, transparent 50%, var(--text-color) 50%), linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
    select:focus {
        background-image: linear-gradient(45deg, var(--text-color) 50%, transparent 50%), linear-gradient(135deg, transparent 50%, var(--text-color) 50%);
        background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        outline: 1px solid var(--outline-on-hover); 
    }

option { font-weight: 500; }
optgroup { font-weight: 700; }

textarea {
    padding: var(--unit);
    border-radius: var(--border-radius-small);
    font-size: 16px;
    background: var(--surface-color);
    resize: vertical;
    touch-action: pan-y;
}
    textarea:disabled { opacity: 0.3; }
    textarea::placeholder { color: var(--text-low-priority-color); }


/* Components/Forms/TagInput.css */
.tag-input { display: flex; flex-direction: column; gap: 10px; }
.tag-input__tag { background: white; padding: 8px 16px; display: flex; align-items: center; gap: 10px; border-radius: 50px; }
.tag-input__tag-container { display: flex; gap: 8px; flex-wrap: wrap; }

/* Components/Forms/Label.css */
.label { display: flex; flex-direction: column; position: relative; gap: 2px; }
.label__title { font-size: 13px; line-height: 19px; color: var(--text-low-priority-color); }
.validation-message { color: var(--accent-color); }

/* Components/Forms/FormCheckboxInput.css */
.formcheckboxinput { gap: 10px; cursor: pointer; display: flex; align-items: center; }

/* Components/Forms/ImageInput.css */
.image-input {
    padding: var(--unit);
    border-radius: var(--border-radius-small);
    font-size: 16px;
    background: var(--surface-color);
    color: var(--text-color); 
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 16px;
    white-space: break-spaces;
}
    .image-input_hovered { background: lightblue; }

.image-input__browse { color: var(--text-low-priority-color); }



/* Components/Forms/NicknameInput.css */
.nickname-input { z-index: 1000; }
.nickname-input__popup {
    position: absolute;
    top: 44px;
    background: var(--surface-color);
    border-radius: var(--border-radius);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: calc(var(--unit) * 1) 0;
}

.nickname-input__popup-item { padding: calc(var(--unit) * 1) calc(var(--unit) * 1); cursor: pointer; width: 100%; text-align: left; }
    .nickname-input__popup-item:hover { background: var(--surface-color-300); }

/* Components/Common/StatusMessage.css */
.status-message {
    margin-top: .5em;
    background: #f0f4ff;
    color: #1a2b53;
    border-left: 3px solid #3570f7;
    padding: .8em 1em;
    border-radius: 4px;
    font-size: 0.96em;
    transition: 0.2s;
}
[data-theme="dark"] .status-message {
    background: #26324a; 
    color: #eaf1fb; 
    border-left: 3px solid #6ea8fe; 
}

/* Components/Common/Slider.css */
.slider__label {
    position: relative;
    display: inline-block;
    width: 40px;
    min-width: 40px;
    height: 22px;
}
    .slider__label input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider__label input:focus-visible + .slider {
        outline: 2px solid var(--outline-on-hover);
        outline-offset: 2px;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--surface-color-500);
    transition: 0.3s;
    border-radius: 30px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        border-radius: 50%;
        left: 3px;
        bottom: 3px;
        background-color: var(--text-color-on-primary);
        transition: 0.3s;
    }

input:checked + .slider {
    background-color: var(--primary-color);
}

    input:checked + .slider:before {
        transform: translateX(18px);
    }



/* Components/Common/TextSelectionPopup.css */
.text-selection-popup {
    border: var(--border);
    box-shadow: var(--shadow);
    background: var(--surface-color);
    padding: 10px 20px;
    position: fixed;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    border-radius: 25px;
}

@media (min-width: 1280px) {
    .text-selection-popup {
        border: unset;
        box-shadow: var(--shadow-small);
        width: unset;
        position: unset;
        bottom: unset;
        left: unset;
        transform: unset;
    }
        .text-selection-popup:after {
            content: "";
            position: absolute;
            bottom: -10px; 
            left: 50%; 
            transform: translateX(-50%); 
            border-width: 10px 7px 0 7px; 
            border-style: solid; 
            border-color: var(--surface-color) transparent transparent transparent; 
        }
}

/* Components/Common/CollapsiblePanel.css */
.collapsible-panel { display: flex; flex-direction: column; gap: 8px; }
.collapsible-panel__button-container { align-self: start; }

/* Components/Common/ImageViewer.css */
.image-viewer {
    max-width: 570px;
    width: 100%; 
    border-radius: 10px;
    border: var(--border);
}

/* Components/Common/Image.css */
.image { border-radius: 10px; }

/* Components/Common/StickyHeader.css */
.sticky-header { position: sticky; top: -1px; z-index: 98; }



/* Components/Common/Button.css */
button:disabled, button[disabled]{ opacity: var(--opacity-priority-low); pointer-events: none; cursor: not-allowed; }
button { cursor: pointer; }

.button {
    all: unset;
    position: relative;
    display: inline-flex;
    border: 1px solid transparent;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    padding: 4px 12px; 
    border-radius: var(--border-radius-small);
    transition: var(--transition);
    font-size: 13px;
    line-height: 19px; 
    white-space: nowrap;
}

.button__icon { opacity: 60%; transition: all; }
    .button:hover .button__icon { opacity: unset; color: var(--text-high-priority-color); }

.button_style_primary { color: var(--text-color-on-primary); background: var(--primary-color); } 
    .button_style_primary:hover { color: var(--text-color-on-primary); background: var(--primary-color-on-hover); }

.button_style_secondary { border: var(--border); color: var(--text-middle-priority-color); }
    .button_style_secondary:hover { border: 1px solid var(--text-high-priority-color); color: var(--text-high-priority-color); }

.button_style_text {  color: var(--text-middle-priority-color);  padding: unset; border-radius: unset; } 
    .button_style_text:hover { color: var(--accent-color); }

.button_style_primary-text { font-weight: 700; color: var(--primary-color);  padding: unset; border-radius: unset; } 
    .button_style_primary-text:hover { filter: brightness(80%); } 

.button_style_low-priority-text {  color: var(--text-low-priority-color);  padding: unset; border-radius: unset; } 
    .button_style_low-priority-text:hover { color: var(--accent-color); }

/* Destructive actions (delete, ban, close). Visually distinct from benign buttons. */
.button_style_danger { border: 1px solid var(--accent-color); color: var(--accent-color); }
    .button_style_danger:hover { color: var(--text-color-on-primary); background: var(--accent-color); border-color: var(--accent-color); }

.button_size_small { padding: 0px 5px; }
.button_size_extra-small { padding: 2px 6px; }
.button_size_big { height: 40px; }

.button.button_isLoading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      -45deg, 
      rgba(255, 255, 255, 0.2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.2) 50%, 
      rgba(255, 255, 255, 0.2) 75%, 
      transparent 75%
    );
    background-size: 40px 40px;
    animation: stripe-slide 1s linear infinite;
}

@keyframes stripe-slide {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}



/* Components/Common/TwitterEmbed.css */
.twitter-embed {
    display: flex;
    flex-direction: column;
    padding: 0px 10px 10px 10px;
    gap: 8px;
    position: relative;
    background: var(--surface-color-300);
    max-width: 550px;
    width: 100%;
    border-radius: 22px;
}

.twitter-embed__placeholder_fade {
    position: relative;
}

    .twitter-embed__placeholder_fade:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4em;
        background: var(--fade-twitter);
        z-index: 2;
        pointer-events: none;
    }

.twitter-embed__button {
    align-self: center;
}

.twitter-embed__button_hidden {
    visibility: hidden;
}

.twitter-embed__placeholder {
    display: flex;
    max-height: 200px;
    height: 200px;
    overflow: hidden;
    max-width: 550px;      
    width: 100%;          
}

.twitter-embed__placeholder_expanded {
    max-height: unset;
    height: unset;
}

.twitter-embed__tweet {
}

.twitter-tweet {
    height: max-content;
    width: 100% !important;
    min-width: 220px;   
    max-width: 550px;
}

/* Components/Common/Tooltip.css */
.tooltip { 
    position: fixed;
    white-space: pre;
    visibility: hidden;
    opacity: 0;
    max-width: 220px;
    background-color: var(--surface-color-secondary);
    text-align: center;
    padding: 10px 10px;
    border-radius: 6px;
    z-index: -1;
    transition: opacity 0.3s linear; 
}

.tooltip_visible { z-index: 1000; visibility: visible; opacity: 1; }




/* Components/Common/Loader.css */
.loader {}
.loader__progress-circle {
    border: 6px solid var(--surface-color-500);
    border-top: 6px solid var(--primary-color);
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Components/Common/ResolvableContent.css */
.resolvable-content {
    position: relative;
}

/* the delay prevents a flash of the loading state when the fetch resolves quickly */
.resolvable-content__content {
    transition: opacity 0.15s ease;
}

.resolvable-content__content_resolving {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    transition-delay: 0.15s;
}

.resolvable-content__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    animation: resolvable-content-appear 0.15s ease 0.15s forwards;
}

/* stays within the viewport even when the underlying content is taller than the screen */
.resolvable-content__loader {
    position: sticky;
    top: 40vh;
    margin-top: 32px;
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 24px;
    background: var(--surface-color);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.resolvable-content__loader-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: resolvable-content-dot-pulse 0.9s ease-in-out infinite;
}

.resolvable-content__loader-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.resolvable-content__loader-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes resolvable-content-dot-pulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes resolvable-content-appear {
    to {
        opacity: 1;
    }
}

/* Components/Common/Menu.css */
.menu {
    display: inline-block;
}

.menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    cursor: pointer;
    padding: 12px 24px;
    margin: 0px -16px;
    padding-right: 50px;
}

.menu-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Gavel icon that triggers the moderator-only menus; sized to match the 16px font icons */
.moderation-menu__icon {
    width: 16px;
    height: 16px;
}

    .menu__item:hover {
        background: var(--background-color);
    }

    /* keyboard navigation highlights items the same way hovering does */
    .menu__item:focus-visible {
        background: var(--background-color);
        outline: none;
    }

.menu__item_highlighted {
    background: var(--surface-color-tertiary);
}


/* Components/Common/DropdownFilter.css */
.dropdown-filter { display: inline-block; } 
.dropdown-filter__trigger { display: flex; gap: 5px; align-items: center; } 
.dropdown-filter__icon { font-size: 9px; margin-bottom: -2px; }

.popup.dropdown-filter__dialogue {
    border-radius: 10px;
    padding: 12px 12px;
}

.dropdown-filter__item {
    white-space: nowrap;
    cursor: pointer;
    padding: 6px 24px;
    margin: 0px -12px;
    padding-right: 50px;
}

    .dropdown-filter__item:hover {
        background: var(--background-color);
    }

.dropdown-filter__item_selected {
    background: var(--surface-color-500);
}

/* Components/Common/Popup.css */
.popup {
    position: absolute;
    z-index: 10000;
    width: max-content;
    border-radius: var(--border-radius-big);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: var(--unit-2x)  var(--unit-2x);
    background: var(--surface-color);
    color: var(--text-middle-priority-color); 
}
.popup__trigger { cursor: pointer; }
.popup__trigger_disabled { pointer-events: none; opacity: 0.7; }
.popup__trigger_on-popup-shown {}
.popup__container_disabled { pointer-events: none; }
.popup__trigger-button { }

.popup input, .popup textarea, .popup .image-input, .popup select  { background-color: var(--background-color); }

.popup__trigger_style_text { color: var(--text-middle-priority-color); transition: var(--transition); }
    .popup__trigger_style_text:hover { color: unset; }

.popup__trigger_style_low-priority-text { color: var(--text-low-priority-color); transition: var(--transition); }
    .popup__trigger_style_low-priority-text:hover { color: unset; }

.popup__trigger_style_button { 
    color: var(--text-color);
    padding: 4px 24px 4px 12px;
    border-radius: 25px;
    background: var(--background-color);
    border: 1px solid transparent; 
    position: relative;
}
    .popup__trigger_style_button:after {
        content: "";
        position: absolute;
        right: 12px; 
        top: 50%; 
        border-left: 4px solid transparent; 
        border-right: 4px solid transparent; 
        border-top: 5px solid var(--text-middle-priority-color); 
        opacity: 0.6;
        transform: translateY(-50%);
    }
    .popup__trigger_style_button:hover { border: var(--border); }

.popup__trigger_on-popup-shown.popup__trigger_style_button { border: var(--border); }
.popup__trigger_on-popup-shown.popup__trigger_style_text { color: unset; }
.popup__trigger_on-popup-shown.popup__trigger_style_low-priority-text { color: unset; }

/* Components/Common/Scrollbox.css */
/*Shows scroll on hover. When scroll appears it doesn't cause a layout shift*/
.scrollbox { overflow: auto; visibility: hidden; }
.scrollbox__content, .scrollbox:hover, .scrollbox:focus { visibility: visible; }


/* Components/Common/Tabs.css */
.tabs { display: flex; flex-direction: column; gap: 10px; }
.tabs__items { display: flex; gap: 20px; width: 0px; flex: 1 1 0px; overflow-x: auto; overflow-y: hidden; }

.tabs__item {
    white-space: nowrap;
    cursor: pointer;
    font-size: 16px; 
    font-weight: 700;
    line-height: 22px; 
    color: rgba(var(--text-color-rgb), var(--opacity-priority-low)); 
} .tabs__item:hover { color: var(--text-color); }

.tabs__items-container { display: flex; flex-direction: column; gap: 6px; }
.tabs__items-inner-container { display: flex; flex: 1; }
.tabs__item_selected { pointer-events: none; color: var(--text-color); }

@media only screen and (min-width: 1280px) {
    .tabs__item { font-size: 18px; }
    .tabs { gap: 20px; }
}

/* Components/Common/Toast.css */
.toast-host {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000000;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.toast {
    width: 100%;
}
.toast__container {
    padding: 14px 24px; 
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.toast__close-button { align-self: start; }

.toast_level_error { 
    background: var(--toast-error-background);
    color: var(--toast-error-text-color); 
}
.toast_level_success {
    background: var(--toast-success-background);
    color: var(--toast-success-text-color); 
}

@media (min-width: 1280px) {
    .toast { 
        min-height: 62px; 
        display: grid;
        grid-template-columns: auto 315px minmax(auto, 940px) 375px auto;
        margin-left: auto;
        margin-right: auto;
        column-gap: 25px;
    }
    .toast__close-button-icon { font-size: 24px; }
    .toast__container { grid-column-start: 2; grid-column-end: 5; }
}

/* Components/Common/Expander.css */
.expander {
    height: 0px;
    overflow: hidden;
    transition: height 222ms ease 0s, opacity 222ms ease 0s;
}

/* Components/Advertisement.css */
.advertisement {
    box-shadow: 0px 2px 8px rgba(70, 109, 149, 0.1);
    border-radius: var(--border-radius);
    padding: 10px;
}
.advertisement__link:hover { color: inherit !important; }
.advertisement__caption { font-size: 14px; line-height: 18px; font-weight: 700; }
.advertisement__caption_highlighted { color: #C0180C; }
.advertisement__caption_secondary { color: var(--text-low-priority-color); }
.advertisement__arrow { 
    flex: 1 0 auto; 
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (min-width: 1280px) {
    .advertisement__arrow { 
        flex: 0 99 36px; 
    }
}



/* Components/ChildPosts.css */
.child-posts {
    display: grid;
    position: relative;
    grid-template-columns: 20px 1fr;
    row-gap: 20px;
    column-gap: 12px;
}

.child-posts__toggle {
    position: relative;
    border: 1px solid var(--separator-contrast-color-hex);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    z-index: 10;
    background: var(--background-color);
}

    .child-posts__toggle::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 2px;
        background: var(--separator-contrast-color-hex);
        transform: translate(-50%, -50%);
        border-radius: 1px;
    }

.child-posts__toggle_state_collapsed::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 10px;
    background: var(--separator-contrast-color-hex);
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

.child-posts__branch-line-container {
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

.child-posts__branch-line-container_post { margin-top: 5px; } 
.child-posts__branch-line-container_last { background: var(--background-color); z-index: 10; }
.child-posts__branch-line-container_last-when-highlighted { background: var(--scrolled-post-background-color); z-index: 10; }

.child-posts__branch-line {
    width: 12.5px;
    height: 1rem;
    border-bottom-left-radius: 7px;
    border-left: 1px solid var(--separator-contrast-color-hex);
    border-bottom: 1px solid var(--separator-contrast-color-hex);
    border-right: none;
    border-top: none;
    background: none;
    margin-right: -2px;
}

.child-posts__line {
    width: 1px;
    height: 100%;
    background: var(--separator-contrast-color-hex);
    z-index: 9;
}

.child-posts__line-container {
    width: 20px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
}

.child-posts__show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-color-400);
    border-radius: 25px;
    height: 30px;
}

/* Components/TopThreads.css */
.top-threads__filter-column {
    grid-column: 1 / -1; 
    display: flex;
    margin-bottom: 20px;
    margin-top: 2px;
}
.top-threads__count-cell {
    justify-self: end;
    font-size: 12px;
}
.top-threads__table {
    display: grid;
    grid-template-columns: 26px 4px 26px 10px 1fr;
    grid-row-gap: 10px;
}
.top-threads__new {
    padding: 2px 5px;
    background: rgba(var(--text-color-rgb), 0.5);
    color: var(--text-color-on-primary);
    border-radius: 4px;
    position: relative;
    top: -1px;
    margin-right: 6px;
}
.top-threads__desktop { display: none; }
.top-threads__block { padding: 10px 0px; }
.top-threads__like { color: rgba(var(--accent-color-secondary-rgb), 1); } 

@media (min-width: 1280px) {
    .top-threads__desktop { display: unset; }
    .top-threads__table { grid-template-columns: 50px 10px 50px 30px 1fr; }
    .top-threads__filter-column {
        grid-column: 5 / span 1; 
        justify-content: space-between;
        margin: unset;
    }
    .top-threads__mobile { display: none; }
    .top-threads__count-cell { font-size: unset; }
}

/* Components/BlockedUser.css */
.blocked-user-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px;
}
.blocked-user { display: flex; gap: 20px; }

/* Components/ThreadCardCompact.css */
.threadcardcompact {
    padding: 8px 16px;
    background: var(--surface-color);
    gap: 4px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
}
/* inline so the "(by author)" caption that follows the heading stays on the same line */
.threadcardcompact__title { display: inline; }
/* the .desktop wrapper is display: contents, so the menus are flex items of the stats row;
   the margin tops up the 4px flex gap to the 16px the full card uses between its menus */
.threadcardcompact__menu { margin-left: 12px; }
/* PostReactions renders block-level containers; flex keeps them on one line with the last-post link.
   The mobile gap is finger-friendly: the row mixes several tap targets (reactions, last-post link,
   preview icon) that need clear separation on touch screens. */
.threadcardcompact__stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* pushes the mobile post count to the far end of the space-between row */
.threadcardcompact__spacer { margin-left: auto; }

@media (min-width: 1280px) {
    .threadcardcompact { gap: 2px; }
    .threadcardcompact__stats { gap: 4px; }
}

/* Components/Error.css */
.error-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    align-items: center;
} 

.error-page__container {
    max-width: 424px;
    min-width: 0;
    padding: 10px 10px; 
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: start;
}

/* stretches to the container width so the details panel below gets a definite width to wrap within */
.error-page__content {
    align-self: stretch;
    min-width: 0;
}

.error-page__logo-link {
    display: inline-flex;
}

.error-page__details-panel {
    margin-top: 16px;
    padding: 12px;
    background: var(--surface-color-300);
    border-radius: var(--border-radius-small);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-page__details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.error-page__details-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-middle-priority-color);
}

.error-page__copy-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    border: var(--border);
    border-radius: var(--border-radius-small);
    background: var(--surface-color);
    color: var(--text-middle-priority-color);
    transition: var(--transition);
}

    .error-page__copy-button:hover { color: var(--text-color); }
    .error-page__copy-button .menu-icon { width: 14px; height: 14px; }

/* stack traces contain long unbreakable tokens (urls, wasm frames): wrap them so the panel
   can never overflow the page column and slide under the sidebar widgets */
.error-page__details {
    max-width: 100%;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.5;
}

/* collapsed by default: a short multiline preview, the full text is one "Show more" or "Copy" away */
.error-page__details_clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.error-page__details_expanded {
    max-height: 50vh;
    overflow: auto;
}

.error-page__expand-button {
    align-self: start;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--link-color);
}

    .error-page__expand-button:hover { color: var(--link-hover-color); }

@media (min-width: 1280px) {
    /* padding (instead of the previous translate(-30%) hack) lifts the card optically above the exact
       middle without ever clipping its top when the card is tall (e.g. DEBUG stack traces) */
    .error-page { justify-content: center; padding-bottom: 12vh; }
}

/* Components/ThreadCardTitle.css */
.thread-card-title__trending-icon { color: var(--fire-color); margin-top: -3px; margin-right: 2px; }
.thread-card-title__closed-icon { font-size: 14px; margin-top: -5px; margin-right: 2px; }
.thread-card-title__pinned-icon { font-size: 14px; margin-top: -5px; margin-right: 2px; }
.thread-card-title__followed-icon { font-size: 14px; margin-right: 2px; margin-top: -3px;}
.thread-card-title { 
    color: var(--thread-title-color);
    transition: var(--transition);
}
.thread-card-title_read { color: var(--text-low-priority-color); }

.thread-card-title:hover {
    color: var(--accent-color);
}


/* Components/ThreadLastPostPreview.css */
/* Hover card with the thread's last post, anchored to the "nickname · time ago" caption.
   Hidden via visibility (not display) so it can be measured for positioning before showing.
   The secondary surface tone separates it from the white/dark cards it floats above. */
.thread-last-post-preview {
    position: fixed;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: var(--unit);
    width: min(520px, calc(100vw - 32px));
    padding: var(--unit-2x);
    background: var(--surface-color-secondary);
    border: var(--border);
    border-radius: var(--border-radius-big);
    box-shadow: var(--shadow);
    transition: opacity 0.15s linear;
    /* the caption the card anchors to is small gray text, so the panel resets to the content font */
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-align: left;
    cursor: auto;
}

.thread-last-post-preview_visible { visibility: visible; opacity: 1; }

.thread-last-post-preview__header {
    padding-bottom: var(--unit);
    border-bottom: 1px solid var(--separator-color);
}

.thread-last-post-preview__content {
    max-height: min(420px, 55vh);
    overflow-y: auto;
    /* wide embeds (tweets, images) are clipped to the panel instead of forcing a horizontal scrollbar */
    overflow-x: hidden;
    overflow-wrap: anywhere;
    color: var(--text-middle-priority-color);
}

.thread-last-post-preview__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--unit);
    border-top: 1px solid var(--separator-color);
}

.thread-last-post-preview__thread-link { color: var(--text-middle-priority-color); }
    .thread-last-post-preview__thread-link .font-icon { font-size: 13px; }

/* Components/DefaultAvatar.css */
.default-avatar {
    font-size: 32px;
    -webkit-text-fill-color: transparent;
    opacity: 0.7; 
}
    html[data-style="legacy"] .default-avatar { font-size: 54px; }

@media (prefers-color-scheme: dark) {
    .default-avatar { opacity: unset; }
}

/* Components/PostMediaLink.css */
.post-media-link {
    position: relative; 
    max-height: 470px;
    background: var(--image-background);
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--border-radius);
} 
.post-media-link__video-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.post-media-link__image { display: block; object-fit: contain; } 



/* Components/Logo.css */
.logo { display: flex; cursor: pointer; height: 32px;  }
.logo__right-card-container {
    transform-origin: center;
    position: relative; width: 32px; height: 36px; overflow: hidden; margin-left: -9px; }
.logo__left-card-container {
    transform-origin: center;
    position: relative; width: 32px; height: 36px; overflow: hidden; }
.logo__right-card { transform: scale(-1, -1); }
.logo__svg { width: 100%; height: 100%; }
.logo__card-outer-container { display: flex; justify-content: center; width: 32px; height: 36px; }
.logo__card-rank { color: var(--logo-card-color); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.logo__card-rank_left { left: -2px; }
.logo__card-rank_right { left: 2px; }
.logo__card-shrinking { animation: shrink 0.2s forwards; }
.logo__card-expanding { animation: expand 0.2s forwards; }

@keyframes shrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0.125); }  
}

@keyframes expand {
    from { transform: scaleX(0.125); }
    to { transform: scaleX(1); }
}

@media (min-width: 1280px) {
    .logo { height: 36px; }
}

/* Components/ThreadCardFooter.css */
.thread-card-footer { display: flex; gap: 16px; align-items: center; color: var(--text-low-priority-color); }
.thread-card-footer__last-post { white-space: nowrap; flex: 1 1 0px; width: 0px; min-width: 0px; overflow: hidden; text-overflow: ellipsis; }
/* the mobile gap keeps the post-count link, last-post link and preview icon tappable without
   hitting a neighbor; desktop restores the compact caption spacing */
.thread-card-footer__post-count-container { flex: 1; display: flex; gap: 10px; align-items: center; }

@media (min-width: 1280px) {
    .thread-card-footer__post-count-container { gap: 4px; }
}

/* Components/Announcement.css */
.announcement { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; gap: 16px; }
.announcement__content-container { display: flex; gap: 8px; align-items: center; }
.announcement__icon { align-self: start; color: var(--text-color); }
.announcement__close-button { align-self: start; }


/* Components/BackButton.css */
.backbutton { width: 100%; display: flex; gap: 10px; align-items: center; }
.backbutton__icon { color: var(--text-middle-priority-color); margin-bottom: 1px; }
.backbutton:hover .backbutton__icon { color: var(--accent-color); }
.backbutton:hover .backbutton__text { color: var(--accent-color); }

@media (min-width: 1280px) {
    .backbutton__text { color: var(--text-low-priority-color); }
}


/* Components/ContentImage.css */
.content-image { border-radius: 8px; height: auto; max-height: min(100%, 540px); object-fit: contain; }

/* Components/Counter.css */
.counter {
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-low-priority-color); 
}

/* Components/CreateThread.css */
.create-thread { display: flex; flex-direction: column; gap: 12px; }
.create-thread__submit-button {flex: 1;}
.create-thread__preview-button {flex: 1;}
.create-thread__button-container { display: flex; gap: 16px; justify-content: space-between; }
.create-thread__button-inner-container { display: flex; gap: 16px; }

@media (min-width: 1280px) {
    .create-thread { gap: 24px; }
    .create-thread__submit-button {flex: unset;}
    .create-thread__preview-button {flex: unset;}
}

/* Components/CreateThreadImageCover.css */
.create-thread-image-cover { display: flex; flex-direction: column; gap: 8px; }
.create-thread-image-cover__title { margin-right: 64px; }

/* Components/DeletedItem.css */
.deleted-item { 
    color: var(--text-low-priority-color);
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--surface-color);
    border-radius: var(--border-radius-small); 
}
.deleted-item_visible { }

/* Components/DislikeToggle.css */
.dislike-toggle { color: var(--text-low-priority-color); cursor: pointer; line-height: 1; margin-bottom: -4px; }
    .dislike-toggle:hover {color: var(--accent-color);}
.dislike-toggle_state_checked { color: var(--accent-color); }
.dislike-toggle__icon { font-size: 20px; }

/* Components/EditorPlaceholder.css */
.editor-placeholder { 
    outline: 1px solid var(--surface-color-500);
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow);
    padding: 5px 10px;
    background: var(--surface-color); 
}
    .editor-placeholder:hover { outline: 1px solid var(--outline-on-hover); }
.editor-placeholder__reply { color: var(--text-low-priority-color); }

/* placeholders are inactive while an editor window (floating or fullscreen) is open */
.editor-window-open .editor-placeholder {
    pointer-events: none;
    opacity: 0.5;
}

/* Components/EmptyContent.css */
.empty-content {
    position: relative;
    background: var(--surface-color-300);
    border-radius: var(--border-radius-big);
    padding: 12px 24px;
    color: var(--text-middle-priority-color);
    margin-bottom: 15px;
}
.empty-content__container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}
.empty-content__message { order: 2; }
.empty-content__image { order: 1; max-width: 140px; opacity: 0.4; }
.empty-content::after {
    content: '';
    position: absolute;
    bottom: -28px;
    left: 28px;
    border-width: 0px 37px 28px 0;
    border-style: solid;
    border-color: transparent var(--surface-color-300) transparent transparent;
}

@media (min-width: 1280px) {
    .empty-content { padding: 24px 48px 24px 96px; }
    .empty-content__image { order: 3; max-width: unset; }
    .empty-content__container { flex-direction: row;  gap: 100px; }
}

/* Components/FeaturedThreadWidget.css */
.featured-thread-widget__media-link { max-height: 200px; }
.featured-thread-widget__image { object-fit: cover; }

/* Components/Footer.css */
.footer { 
    padding: 20px 20px; 
    margin-top: 16px; 
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-low-priority-color); 
}
.footer__link { white-space: nowrap; }
.footer__icon { opacity: 0.3; }
    .footer__icon:hover { opacity: unset; }


/* Components/HamburgerNavigationButton.css */
.hamburger-button { line-height: normal; max-width: 100%; display: flex; gap: 8px; align-items: center; justify-content: center; flex: 1 1 0px; border: unset; }
.hamburger-button__icon { font-size: 10px; margin-bottom: -1px; }
.hamburger-button__hamburger {}
/* preserves the look the element had as an <h1> now that it is a non-heading <span> */
.hamburger-button__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 20px; font-weight: 700; line-height: normal; }

/* Components/HeaderBar.css */
.header-bar {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
}
.header-bar__control-container {
    gap: 20px;
    display: flex;
    align-items: center;
    height: 100%;
}
.header-bar__search { margin-bottom: -1px; }
.header-bar__notification { margin-top: 3px; }
.header-bar__user-account-menu { max-width: 100px; align-self: stretch; }

@media (min-width: 1280px) {
    .header-bar { padding: 12px 20px; }
    .header-bar__notification { margin-top: unset; }
    .header-bar__logo { display: none; }
}

/* Components/HeaderNavigation.css */
.header-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 100vw;
    margin-bottom: 8px;
    padding: 12px;
    margin: 0px -12px;
}

/* sticky-header_stuck is toggled synchronously in js (setupStickyHeader), so the background
   appears in the same frame instead of after the server round trip that adds header-navigation_stuck */
.header-navigation_stuck,
.header-navigation.sticky-header_stuck {
    background: var(--surface-color);
    box-shadow: var(--sticky-header-shadow); 
}

.header-navigation__top-button {
    padding: 0px 12px;
}

.header-navigation__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

@media (min-width: 1280px) {
    .header-navigation {
        display: none;
    }
}

/* Components/IconLoader.css */
@keyframes shimmer { 
    0% { background-position: 200% 0; } 
    100% { background-position: -200% 0; } }

.icon-loader {
    overflow: hidden;  
    animation: shimmer 1.5s infinite linear;
    background: linear-gradient(
        90deg,
        var(--background-color) 25%,
        var(--surface-color-400) 50%,
        var(--background-color) 75%
    );
    background-size: 200% 100%;
}

.icon-loader__default-icon { background: var(--surface-color-300); }


/* Components/IconText.css */
.icontext { display: flex; gap: 4px; align-items: center; justify-content: center; }
.icontext__text { white-space: nowrap; }
.icontext__icon { }


/* Components/InfoCard.css */
.infocard {
    position: relative;
    background: var(--surface-color-secondary);
    padding: 10px 20px;
    border-radius: var(--border-radius-big);
}
.infocard__link { color: var(--text-low-priority-color); }
.infocard__inner-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-right: 38px;
}
.infocard__icon { max-width: fit-content; max-height: 60px; }
.infocard__close-button { position: absolute; right: 16px; top: 12px; font-size: 14px; }


[data-theme="dark"] .infocard__icon {
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(256deg) brightness(104%) contrast(101%);
}

/* Components/LikeToggle.css */
.like-toggle { 
    transition: var(--transition);
    color: var(--text-low-priority-color);
    cursor: pointer;
    white-space: nowrap;
}
    .like-toggle:hover {color: var(--accent-color);}
.like-toggle__text-container { white-space: nowrap; }
.like-toggle__icon { transition: var(--transition); color: var(--text-low-priority-color); margin-top: -6px; font-size: 18px; }
    .like-toggle:hover .like-toggle__icon {color: var(--accent-color);}
.like-toggle__icon_liked { color: var(--text-color); transition: var(--transition); }
    .like-toggle:hover .like-toggle__icon_liked {color: var(--accent-color);}
.like-toggle__text {  color: var(--text-low-priority-color); font-weight: 700; transition: var(--transition); }
    .like-toggle:hover .like-toggle__text {color: var(--accent-color);}
    .like-toggle__popup:hover .like-toggle__text {color: var(--accent-color);}
.like-toggle__count { font-size: 15px; font-weight: 700; color: var(--accent-color-secondary); transition: var(--transition); }
.like-toggle__count_priority_low { color: rgba(var(--accent-color-secondary-rgb), 0.6); }
    .like-toggle__popup:hover .like-toggle__count {color: var(--accent-color);}

.like-toggle__users-popup { margin-left: -7px; max-width: 300px; display: flex; gap: 8px; flex-wrap: wrap; }
.like-toggle__users-popup-container { overflow: hidden; }
.like-toggle__show-more-button { border: none; background: none; padding: 0; font: inherit; color: var(--text-low-priority-color); cursor: pointer; transition: var(--transition); }
    .like-toggle__show-more-button:hover { color: var(--accent-color); }
.like-toggle__container { display: inline-flex; gap: 4px; }
.like-toggle__nickname::before { content: '•'; margin-right: 5px; }
.like-toggle__popup { color: var(--text-low-priority-color); }

/* Components/LocationIndicator.css */
.location-indicator { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--text-middle-priority-color); }
/* preserves the look the page name had as an <h1> now that it is a non-heading <span> */
.location-indicator__title { font-size: 20px; font-weight: 700; }

/* Components/Login.css */
.login { display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 19px; }
.login__title-container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.login__footer { align-items: start; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.login__signin-button { height: 40px; min-height: 40px; white-space: nowrap; }
.login__button-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

@media (min-width: 1280px) {
    .login { align-items: start; gap: 16px; }
    .login__signin-button { justify-content: start; }
}

/* Components/LoginEmail.css */
.login-email { display: flex; flex-direction: column; gap: 16px; }
.login-email__header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.login-email__footer { align-items: center; display: flex; flex-direction: column; gap: 40px; }
.login-email__form-container { display: flex; flex-direction: column; gap: 12px; }
.login-email__submit-button { margin-top: 16px; }
.login-email__signup-container { align-items: center; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

@media (min-width: 1280px) {
    .login { align-items: start; gap: 16px; }
    .login-email__signup-container { align-items: start; }
    .login-email__footer { align-items: start; }
    .login-email__header { gap: 12px; }
}

/* Components/LoginFeedback.css */
.login-feedback { display: flex; flex-direction: column; gap: 14px; }
.login-feedback__container { display: flex; flex-direction: column; gap: 6px; }
.login-feedback__circle { width: 114px; height: 114px; border-radius: 50%; background: var(--surface-color-200); }
.login-feedback__icon { width: 148px; }

/* Components/LoginLayout.css */
.login-layout { display: flex; flex-direction: column; position: relative; height: 100%; }
.login-layout input, .login-layout textarea { background-color: var(--background-color); }
.login-layout__logo { height: 6em; filter: invert(100%); }
.login-layout__content-container {
    display: flex;
    flex-direction: column;
    background: var(--surface-color);
    padding: 24px 24px;
    flex: 1; 
}
.login-layout__close-button { position: absolute; right: 20px; top: 20px; font-size: 28px; color: var(--surface-color); }
.login-layout__logo-container {
    background: var(--login-logo-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 44px;
}
.login-layout__modal {
    position: fixed; 
    overflow: auto;
    z-index: 1000; 
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%; 
    background-color: var(--background-color); 
}
.login-layout__modal-container {
    border-radius: var(--border-radius-big);
    overflow: hidden;
    position: relative;
    background: var(--surface-color);
    margin-top: 7vh;
    width: 100%;
}

@media only screen and (min-width: 1280px) {
    .login-layout__modal { background-color: var(--overlay-background-color); }
    .login-layout__modal-container {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        width: 50em;
        height: unset;
        min-height: unset;
        margin-top: unset;
    }
    .login-layout__close-button { color: var(--text-low-priority-color); }
    .login-layout__close-button:hover { color: var(--text-color); }
    .login-layout { flex-direction: row; height: unset; }
    .login-layout__logo-container { padding: 56px 56px; flex: 1 1 0; }
    .login-layout__content-container { flex: 3 3 0; padding: 82px 82px; }
} 

/* Components/MarkupEditor.css */
.markup-editor {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface-color);
    padding: 8px 8px;
    border-radius: var(--border-radius-small); 
    outline: var(--border); 
}
    .markup-editor:focus-within { outline: 1px solid var(--outline-on-hover); }
    /* the wrapper's :focus-within outline is the focus indicator; suppress the textarea's own
       ring from the global Accessibility.css rule so a second border doesn't appear inside */
    .markup-editor__textarea:focus-visible { outline: none; }
.markup-editor_error { outline: 1px solid var(--accent-color); }
.markup-editor__button-container { display: flex; flex-wrap: wrap; gap: 12px; }
.markup-editor__preview-caption { height: 22px; min-height: 22px; color: var(--text-low-priority-color); }
.markup-editor__textarea {
    background: var(--surface-color);
    border: unset; 
    flex: 1 1 auto; 
    min-height: 0; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
}
/* the post editor overlays the page at z-index 1000000 on mobile and in the floating/fullscreen
   window modes, so the editor's own dialogs (link, YouTube) must stack above it */
.modal.editor-input-modal { z-index: 1000001; }
/* image upload status strip: progress and errors are shown here instead of as text inside the editor */
.markup-editor__upload-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    border-radius: var(--border-radius-small);
    background: rgba(var(--link-color-rgb), 0.08);
    color: var(--text-low-priority-color);
    font-size: 14px;
}
.markup-editor__upload-status_error {
    background: unset;
    outline: 1px solid var(--accent-color);
    color: var(--accent-color);
    justify-content: space-between;
}
.markup-editor__upload-caption { white-space: nowrap; }
.markup-editor__upload-status_error .markup-editor__upload-caption { white-space: normal; }
.markup-editor__upload-progress-track {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--separator-color);
    overflow: hidden;
}
.markup-editor__upload-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--primary-color);
    transition: width 0.2s ease;
}
/* fills the space of the hidden textarea and scrolls when the editor height is
   constrained (floating window, fullscreen, mobile), instead of overflowing it */
.markup-editor__preview-container {
    padding: 8px 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


/* Components/MarkupPreview.css */
.markup-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    position: relative;
    overflow: hidden;
    -webkit-line-clamp: 3;
}

.markup-preview__toggle { font-weight: 700; }
/*    .markup-preview__toggle::before {
        content: '';
        position: absolute;
        left: -15px;
        top: 0;
        width: 15px; 
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to right, transparent, white); 
        z-index: 2;
    }
*/
/* Components/Modal.css */
/* Lock background scroll while a modal is open, matching the html:has(...) locks in main.css. */
html:has(.modal) { overflow: hidden; }

.modal {
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    margin-top: 56px;
    background-color: var(--overlay-background-color); 
}

.modal input, .modal textarea, .modal .image-input, .modal select  { background-color: var(--background-color); }

.modal__input { background: var(--background-color); }
.modal__container {
    max-height: 90vh;
    border-radius: var(--border-radius-big);
    overflow-y: auto;
    position: relative;
    margin: 12px 12px;
    padding: 24px 24px;
    background: var(--surface-color);
}
.modal__header { margin-right: 32px; }
.modal__close-button { position: absolute; right: 24px; top: 24px; font-size: 14px; }
.modal__close-button-icon { font-size: 21px; color: var(--text-low-priority-color); }

@media (min-width: 1280px) {
    .modal__close-button-icon { font-size: 22px; }
    .modal__close-button { position: absolute; right: 24px; top: 21px; }
    .modal__close-button { font-size: 22px; color: var(--text-low-priority-color); }
    .modal__close-button:hover { color: var(--text-color); }
    .modal { margin-top: unset; }
    .modal__container {
        padding: 30px 40px; 
        position: absolute;
        margin: unset;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -30%);
        width: 40em;
        height: unset;
        min-height: unset;
        margin-top: unset;
        border-radius: var(--border-radius-big) var(--border-radius-big);
    }
} 

/* Components/ModerateThread.css */
.moderate-thread__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0px;
}
.moderate-thread__button {
    align-self: start;
}
.moderate-thread__action-row {
    max-width: 500px;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.moderate-thread__action-row_last { border-bottom: none; }

.moderate-thread__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.moderate-thread__button .menu-icon {
    vertical-align: text-bottom;
    margin-right: 6px;
}

.moderate-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.moderate-thread__header {
    margin-bottom: 16px;
    margin-right: 56px;
}

.moderate-thread input[type="text"] {
    background: var(--background-color);
}

.moderate-thread select {
    background-color: var(--background-color);
}

.merge-threads__option {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
}

/* Components/NavigationBar.css */
.navigationbar { padding: 12px; display: flex; flex-direction: column; margin-right: 4px; gap: var(--unit); font-size: 16px; line-height: normal; }
.navigationbar__loader-item { height: 16px; border-radius: 4px; }
.navigationbar__loader { display: flex; flex-direction: column; gap: 22px; }
.navigationbar__logo-container { line-height: 0px; }
.navigationbar__primary-link-container { gap: 16px; align-items: center; }

.navigationbar__forum {
    display: flex;
    gap: var(--unit);
    padding: 8px 12px;
    margin-left: -12px;
    justify-content: start;
    align-items: start;
    border-radius: var(--border-radius);
    line-height: unset;
    color: var(--text-middle-priority-color); 

}
    .navigationbar__forum:hover { background: var(--surface-color); color: unset; }

.navigationbar__container_collapsed { float: right; }
.navigationbar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: -12px -12px 0 -12px; 
    position: sticky;
    top: 0;
    box-shadow: var(--navigationbar-header-shadow);
    background: var(--surface-color);
    z-index: 10000; 
}
.navigationbar__category-title_with-spaces { display: flex; flex-wrap: wrap; }
.navigationbar__search { margin-top: 8px; background: var(--background-color); }

.navigationbar__item { display: flex; gap: 7px; padding: 10px 12px; margin-left: -12px; justify-content: start; color: var(--text-middle-priority-color); border-radius: var(--border-radius); } 
    .navigationbar__item:hover { color: unset; }
    .navigationbar__item:hover .navigationbar__item-icon { color: unset; }

.navigationbar__category { color: var(--text-low-priority-color); margin: 12px 0px 6px 0px; }
    .navigationbar__category:first-child { margin: 0px 0px 6px 0px; }
.navigationbar__navigated-item { background: var(--surface-color); font-weight: 700; color: var(--text-color); }
.navigationbar__navigated-item .navigationbar__item-icon { color: unset; }
.navigationbar__navigated-item .navigationbar__forum-icon { opacity: unset; }
.navigationbar__item-icon { width: 20px; height: 20px; color: var(--text-low-priority-color); justify-self: center; align-self: center; }
.navigationbar__forum:hover .navigationbar__forum-icon { opacity: unset; }
.navigationbar__forum-icon { height: 20px; width: 20px; min-width: 20px; min-height: 20px; border-radius: 3px; }
.navigationbar__forum-list { display: flex; flex-direction: column; gap: 1px; }
.navigationbar__separator { margin-top: -9px; }

@media (min-width: 1280px) {
    .navigationbar__separator { margin-top: -12px; }
    .navigationbar__collapse-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: var(--text-low-priority-color);
    }
        .navigationbar__collapse-button:hover { color: var(--text-high-priority-color); }
    .navigationbar__collapse-button-icon { width: 24px; height: 24px; }
    /* the whole collapsed panel acts as an expand control,
       except the header and the icon links column where clicks don't expand */
    .navigationbar__container_collapsed { cursor: ew-resize; }
    .navigationbar__container_collapsed .navigationbar__header-container,
    .navigationbar__primary-link-container { cursor: default; }
    /* the sidebar scrollbar stays visible instead of appearing on hover */
    .navigationbar__forum-list.scroll-container { scrollbar-color: var(--scrollbar-hover-color); }
    .navigationbar__forum-list.scroll-container::-webkit-scrollbar-thumb { background-color: var(--surface-color); }
    .navigationbar { font-size: 14px; flex: 1 1 0; margin: -12px; padding: 12px; height: 100%; gap: 15px; }
    .navigationbar__header-container { display: flex; justify-content: space-between; align-items: center; }
    .navigationbar_collapsed { margin-top: 0px; }
    .navigationbar__forum-icon { opacity: 0.7; }
}

/* Components/NavigationBarLink.css */
.navigationbar-link {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    margin-left: -12px;
    justify-content: start;
    color: var(--text-middle-priority-color);
    border-radius: var(--border-radius);  
}

.navigationbar-link__icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.navigationbar-link__icon-container_compact { transform: scale(1.5); }

.navigationbar-link_navigated { background: var(--surface-color); font-weight: 700; color: var(--text-color); pointer-events: none; }
.navigationbar-link_navigated-bar-collapsed { background: var(--surface-color);  color: unset; pointer-events: none; }

.navigationbar-link__icon {
    color: var(--text-low-priority-color);
    justify-self: center;
    align-self: center; 
    transition: var(--transition);
}

.navigationbar-link__icon_communities { font-size: 20px; }
.navigationbar-link__icon_follow { font-size: 14px; }
.navigationbar-link__icon_feed { font-size: 18px; color: #fe9066; }
.navigationbar-link__icon_new-posts { margin-bottom: -3px; }

.navigationbar-link:hover, .navigationbar-link:hover .navigationbar-link__icon { color: var(--text-high-priority-color); }
.navigationbar-link:hover .navigationbar-link__icon_feed { color: #fe6f5d; }
.navigationbar-link_navigated .navigationbar-link__icon { color: var(--text-high-priority-color);  }
.navigationbar-link_navigated .navigationbar-link__icon_feed { color: #fe6f5d; }

.compact-navigationbar-link {
    display: flex;
    border-radius: 50%;
    padding: 14px;
    width: 53px;
    height: 53px;
    align-items: center;
    justify-content: center;
    color: var(--text-low-priority-color); 
}
.compact-navigationbar-link_feed { color: #fe9066; }
.compact-navigationbar-link:hover { background: var(--surface-color); color: unset; }

.compact-navigationbar-link:hover .navigationbar-link__icon { color: var(--text-high-priority-color); }
.compact-navigationbar-link_navigated { background: var(--surface-color); color: unset; pointer-events: none; }
.compact-navigationbar-link_navigated .navigationbar-link__icon { color: var(--text-high-priority-color); }

.compact-navigationbar-link_feed:hover .navigationbar-link__icon { color: #fe6f5d; }
.compact-navigationbar-link_navigated.compact-navigationbar-link_feed .navigationbar-link__icon { color: #fe6f5d; }




/* Components/Notification.css */
.notification {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 8px 8px;
    background: var(--surface-color);
    gap: 12px;
    border-radius: var(--border-radius); 
    font-size: 14px;
    line-height: 22px;
}

.notification__content-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.notification__post-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    width: 0px;
    flex: 1 1 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notification__date {  margin-left: auto; white-space: nowrap; color: var(--text-low-priority-color); }
.notification_style_on-surface { background: var(--background-color); border-radius: var(--border-radius-small); margin: 0px -12px; } 
.notification__date_style_on-surface { margin-left: unset; font-size: 10px; line-height: 17px; }
.notification_read { background: unset; }

.notification__icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-color);
    color: var(--text-low-priority-color); 
    border-radius: var(--border-radius);
    align-self: start;
}

@media (min-width: 1280px) {
    .notification { align-items: center; }
    .notification__icon { margin-top: 0px; }
    .notification__date_style_on-surface { font-size: 12px; line-height: 17px; }
}


/* Components/NotificationButton.css */
.notification-button { position: relative; }

/* Components/NotificationModal.css */
.notification-modal { display: flex; flex-direction: column; gap: 16px; }
.notification-modal__header { font-size: 16px; color: var(--text-middle-priority-color); }
.notification-modal__container {  display: flex; flex-direction: column; gap: 4px; }

/* Components/OkCancel.css */
.okcancel { background: var(--surface-color); display: flex; flex-direction: column; gap: 20px; }
.okcancel__button-container { margin-top: 10px; display: flex; gap: 8px; justify-content: end; }

/* Components/Pagination.css */
.pagination {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    gap: 4px;
}

.pagination__input {
    width: 40px;
    max-width: 40px;
    height: 32px;
    border: var(--border);
}

.pagination__button {
    gap: 5px;
    padding: 4px 8px;
}

.pagination__button[aria-disabled="true"] {
    opacity: var(--opacity-priority-low);
    pointer-events: none;
    cursor: not-allowed;
}

.pagination__button_compact {
    width: 30px;
    height: 30px;
    padding: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Components/PaginationBase.css */
.pagination-base { display: flex; align-items: center; font-size: 14px; line-height: 20px; }
.pagination-base__page { padding: 6px; position: relative; font-weight: 700; color: var(--text-low-priority-color);  }
    .pagination-base__page:hover {
        color: var(--text-high-priority-color);
    }
.pagination-base__page_active { color: var(--text-color); border-radius: var(--border-radius); padding: 6px 10px; background: var(--surface-color); }
.pagination-base__ellipses { align-self: end; margin-bottom: 2px; }

@media (min-width: 1280px) {
    .pagination-base__page { padding: 6px 10px;  } 
}



/* Components/PaginationCompact.css */
.compact-pagination {
    display: flex;
    gap: 8px;
    align-items: center;
}

.compact-pagination__caption {
    font-size: 12px;
    white-space: nowrap;
}

.compact-pagination__collapse-button {
    font-size: 11px;
    display: inline-block;
    transform: scaleY(0.8);
    opacity: 0.3;
}

.compact-pagination__popup {
    background: var(--surface-color);
}

.compact-pagination__button {
    width: 25px;
    height: 30px;
    padding: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compact-pagination__button[aria-disabled="true"] {
    opacity: var(--opacity-priority-low);
    pointer-events: none;
    cursor: not-allowed;
}

@media only screen and (min-width: 1280px) {
    .compact-pagination__caption { font-size: 14px; }
}

/* Components/PostAuthor.css */
.post-author { display: flex; gap: 6px; align-items: center; font-size: 13px; line-height: 19px; }
.post-author__nickname { color: var(--text-color); font-weight: 700; white-space: nowrap; }
.post-author__container { display: flex; flex-direction: column; gap: 6px; line-height: 10px; width: 0px; flex: 1 1 0px; }
html[data-style="legacy"] .post-author__container { gap: 8px; }
.post-author__nickname-container { display: flex; gap: 6px; align-items: center; min-width: 0; }

/* Post header (variant A): a larger avatar anchors the block, the user title sits beside the
   nickname, the stats line reads "N posts · member since ...", and the date moves to the right */
.post-author_in-post { gap: 10px; }
    .post-author_in-post > .avatar { width: 40px; height: 40px; }
    .post-author_in-post > .default-avatar { font-size: 40px; }
    html[data-style="legacy"] .post-author_in-post > .avatar { width: 54px; height: 54px; }
    html[data-style="legacy"] .post-author_in-post > .default-avatar { font-size: 54px; }

.post-author__post-date { white-space: nowrap; color: var(--text-low-priority-color); }
    .post-author__post-date:hover { color: var(--text-middle-priority-color); text-decoration: underline; }
/* sized to stay within the 19px header line so the badge never stretches the row */
.post-author__original-poster-caption {
    font-weight: 700;
    font-size: 12px; line-height: 17px; 
    background: var(--original-poster-color);
    color: var(--text-color-on-primary);
    padding: 0px 8px;
    border-radius: 25px;
}

/* Components/PostCard.css */
.post-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: calc(var(--unit) * 2) calc(var(--unit) * 2);
    background: var(--surface-color);
    border-radius: var(--border-radius-big);
}


/* Components/PostEditor.css */
.post-editor {
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000000;
    background: var(--surface-color);
    padding: 8px;
}

@supports (height: 100dvh) {
    .post-editor {
        height: 100dvh; 
        right: unset;
        bottom: unset;
    }
}

.post-editor__control-container { display: flex; gap: 8px; justify-content: space-between; }
.post-editor__inner-control-container { display: flex; gap: 8px; }
.post-editor__post-button { align-self: end; }
.post-editor__markup-editor { flex: 1; }

@media (min-width: 1280px) {
    .post-editor {
        height: unset;
        width: unset;
        overflow: unset;
        position: unset;
        z-index: unset;
        background: unset;
        padding: unset;
    }
    .post-editor__collapsed { height: unset; }
    .post-editor__markup-editor { flex: unset; }
}

/* window controls (detach into a floating window / maximize to full screen) */
.post-editor__window-bar {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.post-editor__window-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--border-radius-small);
    color: var(--text-low-priority-color);
    background: transparent;
}

    .post-editor__window-button:hover {
        background: var(--surface-color-300);
        color: var(--text-color);
    }

.post-editor__window-icon {
    width: 15px;
    height: 15px;
}

.post-editor__resize-handle { display: none; }

/* on mobile the editor already covers the whole page (see the base rules above),
   so the window modes only differentiate the layout on desktop */
@media (min-width: 1280px) {
    .post-editor_mode_floating {
        position: fixed;
        top: unset;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        bottom: 16px;
        width: min(760px, 94vw);
        height: 400px;
        z-index: 1000000;
        background: var(--surface-color);
        outline: 1px solid var(--surface-color-500);
        border-radius: var(--border-radius);
        box-shadow: 0px -4px 25px var(--shadow-color);
        padding: 10px 14px 14px 14px;
        overflow: visible;
    }

    .post-editor_mode_fullscreen {
        position: fixed;
        inset: 0;
        height: unset;
        width: unset;
        z-index: 1000000;
        background: var(--surface-color);
        padding: 16px max(16px, calc((100vw - 1000px) / 2));
        overflow: auto;
    }

    .post-editor_mode_floating .post-editor__markup-editor,
    .post-editor_mode_fullscreen .post-editor__markup-editor {
        flex: 1;
        min-height: 0;
    }

    .post-editor_mode_floating .markup-editor__textarea,
    .post-editor_mode_fullscreen .markup-editor__textarea {
        height: auto !important;
        resize: none;
    }

    .post-editor_mode_floating .post-editor__resize-handle {
        display: block;
        position: absolute;
        top: -6px;
        left: 0;
        right: 0;
        height: 14px;
        cursor: ns-resize;
    }
}

/* Components/PostSelectionTextPopup.css */
.post-selection-text-popup { display: flex; gap: 20px; align-items: center; justify-content: center; }
.post-selection-text-popup__button { width: 100%; } 
    .post-selection-text-popup__button:after { content: ''; position: absolute; top: -10px; bottom: -10px; left: -10px; right: -10px; }
.post-selection-text-popup__button-container { flex: 1; display: flex; align-items: center; justify-content: center; }

@media (min-width: 1280px) {
    .post-selection-text-popup__button { width: unset; } 
    .post-selection-text-popup { gap: 10px; }
        .post-selection-text-popup__button { width: unset; } 
}

/* Components/PostSkeletonLoader.css */
.post-skeleton-loader__item {
    height: 140px;
    border-radius: var(--border-radius-big);
    background: var(--surface-color);
}
.post-skeleton-loader__item_last { background: linear-gradient(var(--surface-color), var(--text-color-on-highlight)); }


/* Components/ReportPost.css */
.report-post { display: flex; flex-direction: column; gap: 32px; }
.report-post__caption { color: var(--text-middle-priority-color); margin-right: 32px; }
.report-post__select-input { align-self: start; }
.report-post__submit { align-self: end; margin-top: 8px; }

/* Components/ReportThread.css */
.report-thread { display: flex; flex-direction: column; gap: 32px; }
.report-thread__caption { color: var(--text-middle-priority-color); margin-right: 32px; }
.report-thread__select-input { align-self: start; }
.report-thread__submit { align-self: end; margin-top: 8px; }
/* Components/RequestResetPassword.css */
.request-reset-password { display: flex; flex-direction: column; gap: 16px; }
.request-reset-password__submit-button { margin-top: 8px;  }
.request-reset-password__header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.request-reset-password__header-caption { color: var(--text-middle-priority-color); }

/* Components/ResendEmailConfirmation.css */
.resend-email-confirmation { display: flex; flex-direction: column; gap: 20px; }
.resend-email-confirmation__buttons { display: flex; gap: 8px; align-items: center; justify-content: start; }

/* Components/Search.css */
.search { display: flex; flex-direction: column; gap: 8px; }
.search__submit-container { display: flex; gap: 8px; }
.search__filter-container { display: flex; flex-direction: column; gap: 8px; }
.search__text-field { flex-grow: 1; }

/* Components/SignUpWithEmail.css */
.sign-up-with-email { display: flex; flex-direction: column; gap: 16px; }
.sign-up-with-email__header { display: flex; flex-direction: column; gap: 8px; }
.sign-up-with-email__submit-button { margin-top: 8px; }
.sign-up-with-email__form { display: flex; flex-direction: column; gap: 16px; margin: 10px 0px; }
.sign-up-with-email__footer { gap: 4px; display: flex; flex-direction: column; align-items: center; }

@media (min-width: 1280px) {
    .sign-up-with-email__footer { align-items: start; }
}



/* Components/Skeleton.css */
.skeleton { }
.skeleton__avatar { background-color: var(--surface-color-400); border-radius: 50%; width: 32px; height: 32px; }
.skeleton__text { background: var(--surface-color-400); border-radius: var(--border-radius-small); height: 16px; }
.skeleton__card { height: 260px; display: flex; flex-direction: column; gap: 16px; }
.skeleton__text_small { width: 58px; }
.skeleton__text_middle { width: 136px; }
.skeleton__text_last-item { width: 85%; }
.skeleton__button { background-color: var(--surface-color-400); border-radius: var(--border-radius-small); width: 60px; height: 30px; }
.skeleton__button_small { background-color: var(--surface-color-400); border-radius: var(--border-radius-small); width: 30px; height: 30px; }
.skeleton__post { display: flex; flex-direction: column; gap: 16px; margin: 16px 0px; }

.skeleton__shimmer-animation {
    background: var(--skeleton-gradient);
    background-size: 200% 100%;
    animation: shimmer 2s infinite ease-in-out;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: 0% 0; }
}


/* Components/ThreadCard.css */
.thread-card {
    padding: 16px 16px;
    background: var(--surface-color);
    border-radius: var(--border-radius-big);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.thread-card__post-content { overflow-wrap: anywhere; }
.thread-card__inner-header { display: flex; flex: 1; }
.thread-card__header {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -4px; 
}
.thread-card_trending {
    background: var(--trending-thread-background);
    box-shadow: var(--shadow-small);
    border: 2px solid var(--surface-color); 
}

/* Icon triggers on thread cards (preview eye, three-dots and moderation menus) sit inside gray
   caption rows, where the generic trigger hover (color: unset) just inherits the same gray.
   The high-priority color makes the hover visible: black in the light theme, white in the dark. */
.thread-card .popup__trigger_style_low-priority-text:hover,
.threadcardcompact .popup__trigger_style_low-priority-text:hover { color: var(--text-high-priority-color); }


/* Components/ThreadCardMenuContainer.css */
.thread-card-menu-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.thread-card-menu-container__closed-thread-icon { color: var(--text-low-priority-color); }
.thread-card-menu-container__closed-thread-container { display: flex; color: var(--text-middle-priority-color-two); gap: 6px; align-items: center; }

/* Components/ThreadCardPostCount.css */
.threadcardpostcount__post-count-container { white-space: nowrap; }

.threadcardpostcount__post-icon { color: var(--text-low-priority-color); transition: var(--transition); }
.threadcardpostcount__post-icon-highlighted { color: var(--text-color); transition: var(--transition); }
    a:hover .threadcardpostcount__post-icon { color: var(--accent-color); }
    a:hover .threadcardpostcount__post-icon-highlighted { color: var(--accent-color); }

.threadcardpostcount__reply-notification {
    position: absolute;
    border-radius: 50%;
    background: var(--accent-color);
    border: 1px solid var(--surface-color);
    top: 0px;
    left: 8px;
    width: 7px;
    height: 7px;
}

.threadcardpostcount__new-posts {
    display: inline-block;
    line-height: 17px;
    padding: 0px 4px;
    border: var(--border);
    color: var(--text-middle-priority-color-two);
    border-radius: var(--border-radius-small);
}

/* Components/ThreadSearch.css */
.thread-search {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(360px, 80vw);
}

/* The filter and both inputs each take a full-width line of their own.
   No background override: Popup.css already flips inputs inside popups to the
   page-background fill, so they stay visible on the white popup surface. */
.thread-search input { width: 100%; }

/* the time filter is a plain-text trigger, so it hugs its content instead of stretching */
.thread-search__time-filter { align-self: flex-start; }

.thread-search__text-field { position: relative; }

/* room for the search glyph so typed text doesn't overlap it */
.thread-search__text-input { padding-left: 38px; }

/* the input is 43px tall and sits at the wrapper bottom: (43px - 16px glyph) / 2 ≈ 13px centers the icon */
.thread-search__text-icon {
    position: absolute;
    left: 12px;
    bottom: 13px;
    color: var(--text-low-priority-color);
    pointer-events: none;
}

.thread-search__submit {
    /* .button's "all: unset" resets box-sizing to content-box, so restore it for a true 30px height */
    box-sizing: border-box;
    height: 30px;
    align-self: flex-end;
}

/* Components/ThumbnailLink.css */
.thumbnail-link { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; margin-bottom: 8px; }
.thumbnail-link__thumbnail { object-fit: contain; max-height: 120px; border-radius: 5px; align-self: flex-start; }
.thumbnail-link__site-name-container { display: flex; gap: 8px; align-items: center; }
.thumbnail-link__icon { max-width: 16px; border-radius: 2px; height: auto; object-fit: contain; }

.thumbnail-link__link { color: var(--link-color); transition: var(--transition); word-break: break-all; }
    .thumbnail-link__link:hover { color: var(--link-hover-color); }
    .thumbnail-link__link:visited { color: var(--link-visited-color); }

.thumbnail-link__title { font-weight: 700; color: var(--link-color); }
    .thumbnail-link__title:hover { color: var(--link-title-hover-color); }
    .thumbnail-link__title:visited { color: var(--link-visited-color); }

.thumbnail-link__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 15px; 
    background: var(--link-card-background-color);
    border-radius: 0px 4px 4px 0px;
    border-style: solid;
    border-width: 1px 1px 1px 2px;
    border-color: var(--link-border);
}



/* Components/TweetSkeletonLoader.css */
/* Basic skeleton styles */
.skeleton {
    background-color: var(--surface-color-400);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

/* Skeleton loader specific to twitter-tweet blockquote */
.twitter-tweet.skeleton {
    width: 550px; 
    height: 435px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-small);
}

.twitter-tweet.skeleton a {
    display: none; /* Hide the anchor tag during skeleton loading */
}

.twitter-tweet.skeleton .header {
    display: flex;
    align-items: center;
    padding: var(--unit);
}

.twitter-tweet.skeleton .header .avatar {
    width: calc(6 * var(--unit));
    height: calc(6 * var(--unit));
    border-radius: 50%;
    margin-right: var(--unit);
    flex-shrink: 0;
}

.twitter-tweet.skeleton .content {
    height: calc(25 * var(--unit)); /* Adjust based on a typical tweet text height */
    margin: var(--unit);
}

.twitter-tweet.skeleton .footer {
    display: flex;
    justify-content: space-between;
    padding: var(--unit);
    height: calc(5 * var(--unit));
}

.twitter-tweet.skeleton .footer .button {
    width: calc(6 * var(--unit));
    height: calc(2 * var(--unit));
    border-radius: var(--border-radius-small);
}

/* Components/User.css */
.user { font-weight: 700; white-space: nowrap; }
.user__original-poster {
    background: var(--original-poster-color);
    color: var(--text-color-on-highlight);
    padding: 2px 8px;
    border-radius: 25px;
}
.user__avatar_small { width: 20px; height: 20px; }
.user__avatar { width: 32px; height: 32px; border-radius: 50%; }
.user__avatar_big { width: 64px; height: 64px; }


/* Components/UserAccountMenu.css */
.user-account-menu {}
.user-account-menu__nickname { margin-top: -2px; }

@media (min-width: 1280px) {
    .user-account-menu { background: var(--surface-color); }
    .user-account-menu { border: var(--border); }
    .user-account-menu:hover { border: var(--border-contrast); }
}

/* Components/UserPosts.css */
.user-posts { display: flex; flex-direction: column; gap: 24px; }
.user-posts__card-like-icon { margin-top: -4px; vertical-align: middle; }


/* Components/Post.css */
.post {
    scroll-margin-top: 20px;
    scroll-margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
.post__content { overflow-wrap: break-word; word-break: break-word; }
.post_deleted { color: var(--text-low-priority-color); }
    .post_deleted .font-icon { color: var(--text-low-priority-color); }
    .post_deleted a { color: var(--text-low-priority-color); }
    .post_deleted .post-author__date { color: var(--text-low-priority-color); }
    .post_deleted .popup { color: var(--text-color); }
.post__recommended-caption { color: #DA771A; }

.post__control-container { display: flex; gap: 16px; align-items: center; font-size: 13px; line-height: 19px; }
.post_scrolled-into-view { background: var(--scrolled-post-background-color); padding: 12px 16px; margin: -12px -16px; border-radius: 10px; }
    .post_scrolled-into-view .thumbnail-link__card, .post_scrolled-into-view .postquote {
        background: var(--surface-inside-scrolled-post)
    }
/* extra scroll margin keeps the located post and its caption clear of the fixed page header */
.post_recommended { background: var(--scrolled-post-background-color); border-radius: 10px; position: relative; scroll-margin-top: 72px; }
    .post_recommended::before {
        content: "";
        z-index: -1;
        background: inherit;
        top: -8px;
        bottom: -8px;
        left: -8px;
        right: -8px;
        position: absolute;
    }
.post__located-caption {
    color: #DA771A;
    font-weight: 700;
    margin-bottom: -8px;
}
.post__like-dislike-container { display: flex; gap: 10px; }
.post__separator {
    background: var(--scrolled-post-background-color);
    padding: 8px 20px;
    color: #DA771A;
    margin: 0px -16px; 
    border-bottom: 1px solid rgba(1, 1, 1, 0.1);
    border-top: 1px solid rgba(1, 1, 1, 0.1);
}
.post__quote-icon { font-size: 13px; }

@media (min-width: 1280px) {
    .post_replies-open { z-index: 1000; }
    .post__separator { margin: unset; }
}



/* Pages/FollowedThreadPage/FollowedThreadPage.css */
.followed-thread-page { display: flex; flex-direction: column; gap: 8px; }
.followed-thread-page__caption { color: var(--text-middle-priority-color-two); }


/* Pages/NewPostsPage.css */
.new-posts-page { display: flex; flex-direction: column; gap: 16px; }
.new-posts-page__thread-compact-card-container { display: flex; flex-direction: column; gap: 4px; }
.new-posts-page__caption { color: var(--text-middle-priority-color-two); }

@media (min-width: 1280px) {
    .new-posts-page { margin-top: 16px; }
    .new-posts-page__header { display: flex; justify-content: space-between; }
    .new-posts-page__caption-container { display: flex; flex-direction: column; }
}

/* Pages/ClientNotFound.css */
.client-not-found {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Pages/ServerNotFound.css */
.server-not-found {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.server-not-found__container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
    align-items: start;
}

/* Pages/AccountPage/Settings.css */
.settings { display: flex; flex-direction: column; gap: 20px; }
.settings__container { align-self: start; display: flex; flex-direction: column; gap: 16px; }
.settings__submit { align-self: start; }

/* Pages/AccountPage/ProfileEdit.css */
.profile-edit { display: flex; flex-direction: column; gap: 20px; }
.profile-edit__column { display: flex; flex-direction: column; gap: 10px; }
.profile-edit__row { display: flex; gap: 10px; }
.profile-edit .label { width: 100% }
.profile-edit__submit { align-self: start; }
.profile-edit__mobile-column-desktop-row { display: flex; flex-direction: column; gap: 10px; }


@media (min-width: 1280px) {
    .profile-edit__mobile-column-desktop-row { flex-direction: row; }
}

/* Pages/PasswordResetPage.css */
.password-reset-page { display: flex; flex-direction: column; gap: 16px; }
.password-reset-page__form { align-items: start; display: flex; flex-direction: column; gap: 16px; }
.password-reset-page__icon { margin-bottom: 8px; margin-top: 16px; width: 90px; }
.password-reset-page__reset-complete { display: flex; flex-direction: column; gap: 12px; align-items: start; }
.password-reset-page__login { color: var(--text-low-priority-color); }


/* Pages/CreateThreadPage.css */
.create-thread-page { }
.create-thread-page__back-button { margin-bottom: 16px; align-self: start; }

/* Pages/SearchPage/SearchPage.css */
.search-page { display: flex; flex-direction: column; gap: 20px; }
.search-page__form { display: flex; flex-direction: column; gap: 8px; }
.search-page__settings-button { color: var(--text-low-priority-color); align-self: start; }
.search-page__settings { display: flex; flex-direction: column; gap: 16px; }
.search-page__control-container { display: flex; gap: 8px; margin-top: 10px; }
.search-page__settings-ok-button { align-self: end; margin-top: 16px; }
.search-page__settings-heading { margin-top: 5px; }
.search-page__text-field { flex-grow: 1; }
.search-page__submit-button { display: flex; }
.search-page__container { display: flex; flex-direction: column; gap: 8px; }
.search-page__search-result-container { display: flex; flex-direction: column; gap: 8px; }

@media (min-width: 1280px) {
    .search-page__search-result-container { gap: 16px; }
    .search-page__control-container { margin-top: 0px; }
}


/* Pages/NotificationPage/NotificationPage.css */
.notification-page { display: flex; flex-direction: column; gap: 8px; }
.notification-page__mark-button {align-self: end;}
.notification-page__container { display: flex; flex-direction: column; gap: 4px; }
.notification-page_unread-notification { background: var(--surface-color); border-radius: var(--border-radius); }




/* Pages/ForumPage/ForumPage.css */
.forum-page { display: flex; flex-direction: column; gap: 16px; }
.forum-page_full-card { gap: 20px; }
.forum-page__subscribe-button { color: var(--text-low-priority-color); transition: var(--transition); }
    .button:hover .forum-page__subscribe-button { opacity: unset; color: var(--accent-color); }
.forum-page__closed-forum {
    background: var(--surface-color-400);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-radius: 4px;
}
.forum-page__forum-icon-container { width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0; overflow: hidden; }
.forum-page__forum-icon-container img { width: 100%; height: 100%; object-fit: contain; }
.forum-page__control-container { display: flex; align-items: start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.forum-page__control-inner-container { display: flex; justify-content: center; align-items: center; gap: 24px; }
.forum-page__thread-compact-card-container { display: flex; flex-direction: column; gap: 4px; }
.forum-page__mark-read-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

@media (min-width: 1280px) {
    .forum-page__title-container { display: flex; align-items: start; gap: 12px; align-self: center; }
    .forum-page__title { margin-top: -5px; }
    .forum-page__forum-icon-container { border-radius: 4px; width: 40px; height: 40px; overflow: hidden; }
    .forum-page { padding-top: 4px; }
    .forum-page__header { align-items: start; display: flex; justify-content: space-between; }
    .forum-page__toggle { margin-top: 8px; }
}

/* Pages/CommunitiesPage/CommunitiesPage.css */
.communities-page__container { display: flex; flex-direction: column; gap: calc(var(--unit) * 1.5); }
.communities-page__description { font-size: 12px; line-height: 17px; color: var(--text-low-priority-color); }
.communities-page__forum-title { font-size: 16px; line-height: unset; }
.communities-page__category-title { color: var(--text-low-priority-color); }
.communities-page__forum-card { background: var(--surface-color); padding: var(--unit) var(--unit); display: flex; border-radius: 15px; gap: var(--unit); }
.communities-page__follow-button { margin-left: auto; align-self: center; flex-shrink: 0; display: flex; gap: 4px; align-items: center; }
.communities-page__follow-checkmark { color: var(--primary-color); font-weight: 700; }
.communities-page__thread-title { font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; word-break: break-word; overflow-wrap: anywhere; }

.communities-page__loader { display: flex; flex-direction: column; gap: 30px; }
.communities-page__loader-item { display: flex; gap: 50px; }
.communities-page__loader-left-item { flex: 4 0 auto; display: flex; gap: 16px; }
.communities-page__loader-left-item-container { width: 100%; display: flex; flex-direction: column; gap: 16px; } 
.communities-page__loader-right-item { flex: 6 0 auto; display: flex; flex-direction: column; gap: 16px; }
.communities-page__loader-icon { min-width: 48px; width: 48px; height: 48px; border-radius: var(--border-radius-small); }
hr.communities-page__loader-separator:last-of-type { display: none; }

@media (min-width: 1280px) {
    .communities-page__category-title { grid-column: 1/ span 2; margin-top: var(--unit); }
    .communities-page__forum-separator { grid-column: 1 / span 2; }
    div.communities-page__forum-separator:last-of-type { display: none; }
    .communities-page__forum-card { background: unset; padding: unset; align-items: start; gap: calc(var(--unit) * 1.5); }
    .communities-page__container { display: grid; grid-template-columns: 4fr 6fr; grid-template-rows: auto; grid-row-gap: calc(var(--unit) * 2); grid-column-gap: calc(var(--unit) * 5); }

}

/* Pages/AdminPage/AdminPage.css */
.admin-forum-row { display: flex; flex-wrap: wrap; gap: var(--unit); align-items: center; }
.admin-forum-row__identity { display: flex; gap: calc(var(--unit) / 2); align-items: center; flex: 1; min-width: 260px; }
.admin-forum-row__controls { display: flex; flex-wrap: wrap; gap: calc(var(--unit) / 2); align-items: center; margin-left: auto; min-width: 0; max-width: 100%; justify-content: flex-end; }
.admin-forum-row__badge { font-size: 11px; font-weight: 700; color: var(--text-low-priority-color); border: var(--border); border-radius: var(--border-radius-small); padding: 1px 6px; }
.admin-forum-row__badge_danger { color: var(--error-color); border-color: var(--error-color); }
.admin-forum-row__index { display: flex; gap: 6px; align-items: center; color: var(--text-low-priority-color); font-size: 14px; }
.admin-forum-row__index-input { width: 80px; height: 34px; padding: 4px 8px; font-size: 14px; }

/* Pages/Feed/Feed.css */
.feed { display: flex; flex-direction: column; gap: 16px; }
.feed__container { display: flex; flex-direction: column; gap: 8px; }
.feed__loader { display: flex; flex-direction: column; gap: 36px; }


/* Pages/Profile/Profile.css */
.profile { display: flex; flex-direction: column; gap: 20px; }
.profile__back-button-container { margin: 0px 0px 30px 0px; }
.profile__container { display: flex; flex-direction: column; gap: 16px; }
.profile__user-container { display: flex; gap: 8px; }
.profile__user-inner-container { display: flex; flex-direction: column; gap: 8px; }
.profile__nickname { font-weight: 700; white-space: nowrap; }
.profile__joined { display: flex; flex-direction: column; gap: 4px; color: var(--text-low-priority-color); }
.profile__stats-container { display: flex; gap: 48px; }
.profile__user-avatar { height: 117px; width: 117px; min-height: 117px; min-width: 117px; object-fit: contain; background: var(--surface-color-300); border-radius: var(--border-radius-small); }
html .default-avatar.profile__default-avatar { font-size: 117px; }
.profile__about { white-space: pre-wrap; display: flex; flex-direction: column; gap: 8px; }
.profile__button-container { display: flex; gap: 8px; flex-wrap: wrap; }

.profile__user-grid { 
    display: grid;
    grid-template-columns: auto auto auto auto min-content auto;
    grid-row-gap: 24px;
    grid-column-gap: 8px;
}

.user-note { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface-color-300); border-radius: var(--border-radius-small); }
.user-note__header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-note__poster { font-weight: 700; }
.user-note__title { font-weight: 600; }
.user-note__message { white-space: pre-wrap; overflow-wrap: anywhere; }

@media only screen and (min-width: 1280px) {
    .profile__user-avatar { height: 150px; width: 150px; min-height: 150px; min-width: 150px; }
    html .default-avatar.profile__default-avatar { font-size: 150px; }
    .profile__container { display: flex; flex-direction: row; gap: 16px; justify-content: space-between; }
    .profile__user-container { gap: 24px; }
    .profile__stats-container { margin-right: 16px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto; align-self: start; column-gap: 32px; row-gap: 32px; } 
} 

/* Pages/Profile/ProfileStat.css */
.profile-stat { color: var(--text-middle-priority-color); font-size: 24px; } 

@media only screen and (min-width: 1280px) {
    .profile-stat__container { display: flex; flex-direction: column; align-items: start; min-width: 0; }
}

/* Pages/ForumPage/ThreadCardViewToggle.css */
.threadcardview-toggle { display: flex; gap: 8px; }
.threadcardview-toggle__button { color: rgba(var(--text-color-rgb), 0.2); }
    .threadcardview-toggle__button:hover {  color: var(--text-color); }
.threadcardview-toggle__button_selected { color: var(--text-color); pointer-events: none; }
.threadcardview-toggle__icon { font-weight: 700; }


/* Pages/ThreadPage/ThreadPage.css */
.thread-page { display: flex; flex-direction: column; gap: 16px; }
.thread-page__bottom-editor { margin-bottom: 16px; margin-top: 32px; }
.thread-page__posts {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.thread-page__view-icon { font-size: 18px; margin-bottom: -1px; }
.thread-page__highlighted-panel {
    background: var(--surface-color-tertiary);
    padding: 10px 14px;
}

.thread-page__subscribe-button { color: var(--text-low-priority-color); transition: var(--transition); }
    .button:hover .thread-page__subscribe-button { opacity: unset; color: var(--accent-color); }

.thread-page__backbutton { align-self: start; }
.thread-page__separator { border-bottom: var(--post-separator-width) solid var(--post-separator-color); }
    hr.thread-page__separator:first-of-type { display: none; }
.thread-page__bottom-pagination { margin: 4px 0px; align-self: end; }
.thread-page__header { display: flex; justify-content: space-between; align-items: center; }
.thread-page__like-dislike-container { display: flex; gap: 6px; }
.thread-page__stats { display: flex; gap: 24px; align-items: center; }
.thread-page__search-container { display: flex; gap: 16px; align-items: center; }

.thread-page__first-post {
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.thread-page__show-full-post-button { margin-top: 12px; color: var(--text-low-priority-color);  }
.thread-page__first-post_collapsed:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: var(--fade-background);
    z-index: 2;
    pointer-events: none;
}

@media (min-width: 1280px) {
    .thread-page__backbutton { margin-top: 5px; }
    .thread-page__bottom-pagination { align-self: unset; margin: 16px 0px; }
}

/* keeps the loading indicator visible when the thread page mounts with no content yet */
.thread-page__initial-loading {
    min-height: 60vh;
}

.thread-page__next-unread-reply-button {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    background: var(--accent-color);
    color: var(--text-color-on-primary);
    box-shadow: var(--shadow-small);
    transition: var(--transition);
}
    .thread-page__next-unread-reply-button:hover { filter: brightness(1.1); }
    .thread-page__next-unread-reply-icon { font-size: 13px; }

/* Pages/ThreadPage/ThreadStickyHeader.css */
.thread-sticky-header { 
    position: fixed;
    top: 0;
    left: 0;
    /* matches the .header-container row it visually replaces when scrolled */
    height: var(--header-height);
    right: 0;
    z-index: 98;
    background: var(--surface-color);
    box-shadow: var(--shadow-small);
}

.thread-sticky-header__container {
    grid-column: 3 / span 1; 
    grid-row: 3 / span 1;
    height: 100%;
    width: 100%;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}


/* Pages/ThreadPage/TopPostWidget.css */
.top-post-widget { gap: 14px; }


/* Pages/ThreadPage/TopPost.css */
.top-post { position: relative; display: flex; flex-direction: column; gap: 3px; }
.top-post__link { display: block; }
.top-post__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.top-post__preview { position: static; }
.top-post__header { display: flex; justify-content: space-between; gap: 8px; }
.top-post__user { display: flex; gap: 4px; align-items: center; }
.top-post__avatar { width: 20px; height: 20px; border-radius: 50%; }
html .default-avatar.top-post__default-avatar { font-size: 20px; }
.top-post__nickname { font-weight: 700; }
.top-post__right-header { display: flex; gap: 10px; color: var(--text-low-priority-color); }
a:hover .top-post__right-header { color: var(--accent-color); }
.top-post__like { display: flex; gap: 4px; }

/* Pages/ThreadPage/OriginalPosterWidget.css */
.original-poster-widget__container {
    display: flex;
    gap: 6px;
    align-items: center;
}

.original-poster-widget__inner-container {
    line-height: 16px;
}

/* Pages/MessagePage/ConversationEntry.css */
.conversation-entry {
    cursor: pointer;
    padding: 8px 8px;
    border-radius: 3px;
    gap: 16px;
}
.conversation-entry__user-card { width: 0px; flex: 1 1 0px; }
.conversation-entry_active {
    box-shadow: var(--shadow); 
    background: var(--surface-color);
}
.conversation-entry__date {
    font-size: 10px;
    white-space: nowrap;
    line-height: 12px;
}
.conversation-entry__last-message {
    color: var(--text-low-priority-color); 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1; 
    line-height: 18px;
    margin-top: -4px;
    margin-bottom: -4px;
}
.conversation-entry__badge {
    padding: 2px 5px;
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    background: var(--accent-color);
    color: var(--text-color-on-primary);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    align-self: end;
}

@media (min-width: 1280px) {
    .conversation-entry { padding: 10px 16px; }
}

/* Pages/MessagePage/ConversationEntries.css */
.conversation-entries { gap: 10px; }
.conversation-entries_desktop {
    margin-top: 10px;
}

.conversation-entries__separator { border-bottom: 1px solid var(--separator-color); }
    hr.conversation-entries__separator:first-of-type { display: none; }

/* search input pinned above the conversation list */
.conversation-list-search { position: relative; }
/* room for the search glyph and the clear button so typed text doesn't overlap them */
.conversation-list-search__input {
    padding-left: 38px;
    padding-right: 38px;
}
.conversation-list-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-low-priority-color);
    pointer-events: none;
    z-index: 1;
}
.conversation-list-search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-low-priority-color);
    cursor: pointer;
}
    .conversation-list-search__clear:hover { color: var(--accent-color); }

/* "start new conversation" section shown under matching conversations while searching */
.conversation-list__new-conversation { margin-top: 10px; }
.conversation-list__new-conversation-users { gap: 20px; }
.conversation-list__new-conversation-user { cursor: pointer; }
    .conversation-list__new-conversation-user:hover { color: var(--accent-color); }

/* on desktop the "+ New Message" button and the search box stay pinned while
   the list below scrolls in its own container (scroll-container handles the overflow) */
@media (min-width: 1280px) {
    .conversation-list-container {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .conversation-list {
        flex: 1 1 0;
        min-height: 0;
    }
}

/* Pages/MessagePage/PrivateMessage.css */
.private-message { align-self: end; border-radius: 10px; padding: 12px 16px; background: var(--surface-color); margin-left: 75px; }
.private-message__date { align-self: end; }
.private-message_sent { align-self: start; background: var(--private-message-color); margin-right: 75px; margin-left: unset; }

.private-message + .private-message_sent, .private-message_sent + .private-message {
    margin-top: 8px;
}

/* a search result was clicked: briefly flash a ring around the target message */
.private-message_highlighted { animation: private-message-highlight-flash 2.4s ease-out; }

@keyframes private-message-highlight-flash {
    0%, 25% { box-shadow: 0 0 0 2px var(--primary-color); }
    100% { box-shadow: 0 0 0 2px transparent; }
}

/* matched search words inside the navigated message */
.private-message__match {
    background: rgba(var(--link-color-rgb), 0.4);
    color: inherit;
    border-radius: 3px;
    padding: 0px 1px;
}

@media (min-width: 1280px) {
    .private-message { margin-left: 100px; }
    .private-message_sent {  margin-right: 100px; margin-left: unset;  }
}

/* Pages/MessagePage/Conversation.css */
.conversation {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.conversation__back-button { align-self: start; }
.conversation__empty-message {
    gap: 8px;
    flex: 1 1 0px;
    overflow: hidden; 
    min-height: 0;   
    margin: 16px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.conversation__message-container {
    gap: 8px;
    flex: 1 1 0px;
    overflow: auto; 
    min-height: 0;   
    margin: 16px 0px;
}
.conversation__participant-container {
    padding: 10px;
    border-bottom: 1px solid rgba(var(--border-color-rgb), 0.1); 
    margin: 0px -12px;
}
/* holds the message list and, when searching, the results overlay */
.conversation__body {
    position: relative;
    flex: 1 1 0px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* search results are shown in place of the messages, inside the message container */
.conversation__search-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 12px 0px;
    background: var(--background-color);
    overflow: auto;
}
.conversation__editor-placeholder { margin: 16px 0px; }
.conversation__message-group { gap: 8px; }
.conversation__message-group-date { align-self: center; }

@media (min-width: 1280px) {
    .conversation__participant-container { padding-bottom: 20px; }
}

/* Pages/MessagePage/RecipientPicker.css */
.recipient-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recipient-picker__user-container { gap: 20px; }
.recipient-picker__heading { font-size: 16px; line-height: 22px; }
.recipient-picker__recipient { cursor: pointer; }
    .recipient-picker__recipient:hover { color: var(--accent-color); }

/* Pages/MessagePage/MessagePage.css */
.message-page {
    display: flex;
    flex-direction: column;
    height: 100%;       
    min-height: 0;     
}

.message-page__header { line-height: unset; }

.message-page__sign-in-prompt {
    flex: 1 1 0px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 0px;
}

@media (min-width: 1280px) {
    .message-page { padding: 0px 50px; }
}

/* Pages/MessagePage/ConversationSearch.css */
/* popup search input */
.conversation-search-box { width: min(320px, 80vw); }
.conversation-search-box__field { position: relative; }
.conversation-search-box input { width: 100%; }
/* room for the search glyph so typed text doesn't overlap it */
.conversation-search-box__input { padding-left: 38px; }
.conversation-search-box__icon {
    position: absolute;
    left: 12px;
    bottom: 13px;
    color: var(--text-low-priority-color);
    pointer-events: none;
    z-index: 1;
}

/* results shown inside the message container */
.conversation-search-results { display: flex; flex-direction: column; gap: 8px; }
.conversation-search-results__header { align-items: center; }
.conversation-search-results__hint { display: block; }
.conversation-search-results__list { display: flex; flex-direction: column; gap: 4px; }
.conversation-search-results__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.conversation-search-results__item:hover,
.conversation-search-results__item:focus-visible {
    background: rgba(var(--border-color-rgb), 0.08);
    outline: none;
}
.conversation-search-results__snippet {
    color: var(--text-low-priority-color);
    font-size: 0.9em;
    overflow-wrap: anywhere;
}
.conversation-search-results__match {
    background: rgba(var(--link-color-rgb), 0.25);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}
.conversation-search-results__load-more { margin-top: 4px; }

/* PostQuote.css */
.postquote { 
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface-color-400);
    padding: calc(var(--unit) * 1) calc(var(--unit) * 2); 
    border-radius: var(--border-radius-small);
    width: 100%;
    margin-bottom: 0.3em;
    margin-top: 1.5em;
}
    .postquote:first-of-type { margin-top: unset; }

.postquote__nickname-container { display: flex; gap: 4px; align-items: center; }
.postquote__content { color: var(--text-middle-priority-color); }


/* Quote.css */
.quote { 
    background: var(--surface-color-400);
    padding: calc(var(--unit) * 1) calc(var(--unit) * 2); 
    border-radius: var(--border-radius-small);
    width: 100%;
    margin-bottom: 0.3em;
    color: var(--text-middle-priority-color); 
    margin-top: 1.5em;
}
    .quote:first-of-type { margin-top: unset; }


/* Spoiler.css */
.spoiler {
    background: var(--surface-color-400);
    padding: calc(var(--unit) * 1) calc(var(--unit) * 2); 
    border-radius: var(--border-radius-small);
    width: 100%;
    align-items: center;
    margin-top: 16px;
}
.spoiler__caption { font-size: 13px; line-height: 19px; font-weight: 700; }
.spoiler__summary { display: flex; gap: 6px; align-items: center; }
.spoiler__content { margin-top: 8px; }
summary::marker { content: ""; }
details summary::-webkit-details-marker { display: none; }

/* Accessibility.css */
/* Global accessibility rules. Imported last (see Import.css) so these win
   specificity ties against component rules that use `all: unset`. */

/* Visible keyboard focus for every interactive element. The CSS reset removes
   outlines globally; this restores them for keyboard (not mouse) focus. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
input[type="checkbox" i]:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="radio"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--outline-on-hover);
    outline-offset: 2px;
}

/* Screen-reader-only text: visually hidden but announced by assistive tech. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Neutralize non-essential motion for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}