/* This stylesheet is NOT optimized. I've tried to separate styles for different pages into their own sections so you can totally change one without breaking another, which means a lot of repetition for the sake of clarity. Elements that are repeated across many pages are in their own sections and labeled as such. */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   CSS RESET
	It's a good idea to start with a reset so ensure that everything starts the same on all browsers.
*/

/*********

table of contents

A. CSS Reset
B. Fluid Typography Settings
C. Link Styling
D. Root Variables
	D1. Constant Variables
	D2. Light Mode Variables
	D3. Dark Mode Variables
E. Preload Class
F. Material Symbols Support
G. Group-Specific Styling
H. Global styles
	H1. Headline Styles
	H2. Button Styling
	H3. Icon Styles
	H4. Card Styles
	H5. Grid Styles
	H6. Forms, Fields, and Inputs Styles
	H7. Stats Styles
I. Master Grid
J. Header
	J1. Rotating Newsfeed
K. Navigation Panel
L. Sidebar/Nav Modal
	L1. Navigation Modal Mode

*********/



/*****************

A. CSS Reset

******************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
	font-size: 16px;
}
body * {
	box-sizing: border-box;	
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	background: rgb(var(--color2light));
}


/*****************

B. Fluid Typography Settings

*****************/

/* Fluid font size variables for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    /* Using clamp() for fluid typography. The function clamp(MIN, VAL, MAX) ensures that 
       the font size scales dynamically between the MIN and MAX values based on the 
       viewport width (VAL), providing responsive and scalable text. */
	--font-size-xsm: clamp(0.6rem, 1vw, 0.65rem);
	--font-size-sm: clamp(0.8rem, 1.2vw, .85rem);
	--font-size-base: clamp(1rem, 1.5vw, 1.1rem);
	--font-size-md: clamp(1.2rem, 2vw, 1.3rem);
	--font-size-lg: clamp(1.4rem, 2.5vw, 1.5rem);
	--font-size-xl: clamp(1.6rem, 3vw, 1.8rem);
	--font-size-xxl: clamp(1.8rem, 3.5vw, 2rem);
	--font-size-xxxl: clamp(2.4rem, 5vw, 2.8rem);
  }
}

/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    /* Fixed font sizes as a fallback for older browsers that do not support the clamp function. 
       These sizes are the initial values for typical devices. */

    /* Fallback sizes mirroring the smaller end of the clamp ranges */
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-md: 1.2rem;
    --font-size-lg: 1.4rem;
    --font-size-xl: 1.6rem;
    --font-size-xxl: 1.8rem;
    --font-size-xxxl: 2rem;
  }

  /* Enhanced media queries provide a more gradual scaling of text sizes across different 
     breakpoints, mimicking the fluidity of the clamp function as closely as possible. */

  /* For medium-sized devices (e.g., tablets) */
  @media screen and (min-width: 600px) {
    :root {
      --font-size-sm: 0.95rem;
      --font-size-base: 1.05rem;
      --font-size-md: 1.25rem;
      --font-size-lg: 1.45rem;
      --font-size-xl: 1.65rem;
      --font-size-xxl: 1.85rem;
      --font-size-xxxl: 2.05rem;
    }
  }

  /* For large-sized devices (e.g., small laptops, desktops) */
  @media screen and (min-width: 900px) {
    :root {
      --font-size-sm: 1rem;
      --font-size-base: 1.15rem;
      --font-size-md: 1.35rem;
      --font-size-lg: 1.55rem;
      --font-size-xl: 1.75rem;
      --font-size-xxl: 1.95rem;
      --font-size-xxxl: 2.15rem;
    }
  }

  /* For extra-large devices (e.g., large desktops) */
  @media screen and (min-width: 1200px) {
    :root {
      --font-size-sm: 1.1rem;
      --font-size-base: 1.3rem;
      --font-size-md: 1.5rem;
      --font-size-lg: 1.7rem;
      --font-size-xl: 2rem;
      --font-size-xxl: 2.3rem;
      --font-size-xxxl: 2.5rem;
    }
  }
}


/*********

C. Link Styling

LEAVE THIS AT THE TOP, SO USERGROUP STYLES WILL OVERWRITE THE BASE COLORS

**********/

a,
a:link,
a:visited {
	color: rgb(var(--color1));
	text-decoration: none;
	font-weight: 700;
	font-family: inherit;
}

a:hover {
	color: rgb(var(--color3));
}

/*****************

D. Root Variables

*****************/

/*****************

 D1. Constant Variables

These remain the same in light and dark mode.

/*****************/

:root {
	
	/* --- 1. CORE FONTS --- */
    --font1: 'Inter', sans-serif;          /* Body Reading */
    --font2: 'Orbitron', sans-serif;       /* Display / Neon */
    --font3: 'Share Tech Mono', monospace; /* Utility */

    /* --- 2. THE VISUAL SYSTEM (Design Tokens) --- */
    
    /* STYLE A: "INK" (For Titles & Headlines) */
    /* Emotional, Elegant, Big. Uses Cormorant. */
    --style-ink-family: var(--font2);
    --style-ink-weight: 700;
    --style-ink-spacing: -0.5px; /* Tighten big serifs slightly */
    --style-ink-line-height: 1.1;

    /* STYLE B: "LABEL" (For UI, Meta, & Structure) */
    /* Technical, Clean, Small. Uses Helvetica. */
    --style-label-family: var(--font3);
    --style-label-weight: 700;
    --style-label-spacing: 1px; /* Wide spacing makes it look expensive */
    --style-label-case: uppercase;

	/* IMAGES */
		--bgimagesmall: url(../../../);
	
	/* VISUAL CONTRAST COLOR 1 */
		--color3: 0, 229, 255;
		--color3light: 255, 43, 214;
		--color4: 255, 236, 39;
		--color4light: 124, 255, 178;
	
	/* GRADIENTS */
	--gradient1: linear-gradient(180deg, rgb(var(--color2)), rgb(var(--color3)));
	--gradient2: linear-gradient(0deg, rgb(var(--color2)), rgb(var(--color3)));

	/* SPACING */
	--spacing-small: 0.5rem;
	--spacing-medium: 1rem;
	--spacing-large: 1.5rem;
	--spacing-xlarge: 2.5rem;
	
	
	/* TRANSITION - for standardized transitions */
	
	--transition: all 0.3s ease;
		
}

/*****************

 D2. Light Mode Variables

These are only applicable to Light Mode

*****************/


:root, html[data-theme='light'] {
	
	/*
		COLORS - REGULAR AND A FEW STEPS LIGHTER. STORED LIKE THIS FOR EASY OPACITY MANIPULATION. WHEN REFERENCING, ALWAYS USE RGB(VAR(--VAR))
	*/

		/* BODY TEXT */
		--color1: 13, 22, 36;
		--color1light: 55, 86, 105;
		/* BACKGROUND */
		--color2: 232, 248, 252;
		--color2light: 249, 254, 255;


		/* BOX SHADOW FOR CONSISTENCY, DEFAULT IS MATERIAL DESIGN */

		--box-shadow: 0 10px 26px rgba(16, 46, 70, .12), 0 0 18px rgba(var(--color3), .18), inset 0 0 0 1px rgba(var(--color3), .16);

		/* BORDER */

		--border: 1px solid rgba(var(--color3), .32);
		--border-color: 1px solid rgba(var(--color3), .58);
		--border-dashed: 1px dashed rgba(var(--color3), .42); 
		--border-double: 3px double rgba(var(--color3), .58); 
}

/*****************

 D3. Dark Mode Variables

These are only applicable to Dark Mode

*****************/

:root, html[data-theme='dark'] {
	
/*
	COLORS - REGULAR AND A FEW STEPS LIGHTER. STORED LIKE THIS FOR EASY OPACITY MANIPULATION. WHEN REFERENCING, USE RGB(VAR)
*/

	/* BODY TEXT */
	--color1: 230, 246, 255;
	--color1light: 135, 190, 210;
	/* BACKGROUND */
	--color2: 4, 6, 18; 
	--color2light: 14, 18, 38;	
	--box-shadow: 0 0 22px rgba(var(--color3), .24), inset 0 0 0 1px rgba(var(--color3), .18);
	--border: 1px solid rgba(var(--color3), .35);
	--border-color: 1px solid rgba(var(--color3), .65);
	--border-dashed: 1px dashed rgba(var(--color3), .5);
	--border-double: 3px double rgba(var(--color3), .7);
}

/**********

	E. Preload Class
	
	Applied to body class on load, then removed after the page has loaded.
	Should prevent ugly visible transitions prior to page load as things settle into saved states.
	
************/

.preload * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

/**********
	
	F. Material Symbols Support
	
	If you're using a different source for icons, you'll want to update, ignore, or delete this!
	
************/

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	color: rgb(var(--color1));
	font-size: 24px;
	/* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	user-select: none;
	transition: var(--transition);
}


/***********************

G. Group-Specific Styling

If you don't know which group is which number, check the ACP group control url. These are meant to be reusable classes you can add to elements to style per group. Feel free to add more than just the text color.

*************************/


.group1 {
	color: rgb(var(--color-group1));
	}

.group2 {
	color: rgb(var(--color-group2));
	}

.group3 {
	color: rgb(var(--color-group3));
	} 

.group4 {
	color: rgb(var(--color-group4));
	}

.group5 {
	color: rgb(var(--color-group5));
	}

.group6 {
	color: rgb(var(--color-group6));
	}

.group7 {
	color: rgb(var(--color-group7));
	}


/*****************

H. Global Styles

Global styles appear across all pages.

This theme was styled with a mobile-first philosophy, ensuring that everything fits on the tiniest of screens.

Media queries for larger screenes are included after each section that uses one.

NOTE: DUE TO MOBILE BROWSER BEHAVIORS, IT IS RECOMMENDED TO AVOID USING VH FOR ANYTHING INTENDED FOR SMALL-SCREEN VIEWING. AVOID USING COVER-SIZED BACKGROUND IMAGES FOR MOBILE SCREENS AS WELL.

*****************/

body {
	background: rgb(var(--color2));
	color: rgb(var(--color1light));
	font-family: var(--font1), Tahoma, Verdana, Arial, Sans-Serif;
	font-size: var(--font-size-base);
}

p {
	margin: var(--spacing-small) 0;	
}

textarea {
	border: var(--border);
	outline: 0;
}

strong {
	font-weight: bold;
}

.smalltext {
	font-size: var(--font-size-sm);
}

.largetext {
	font-size: var(--font-size-lg);
}

.hidden {
	display: none;
}

fieldset {
	border-top: 5px double;
	padding: var(--spacing-small);
	margin: var(--spacing-small);
}

.flex {
	display: flex;
	gap: var(--spacing-medium);
}

.wrap {
	flex-wrap: wrap;
}

/* Used for any 1-column grid where you want some vertical space between the contained components without having to add it manually */

.plain-grid {
	display: grid;
	gap: var(--spacing-small);
}

.border {
	border: var(--border);
}

/* Use to constrain the width of anything with a lot of text; has a little padding, centers itself */

.text-container {
	max-width: 600px;
	margin: auto;
	padding: var(--spacing-medium);
}

/*****************

H1. Headline Styles

*****************/

/* --- GROUP 1: THE "INK" (H1-H3) --- */
/* Use these for actual content titles. */

h1, h2, h3 {
    font-family: var(--style-ink-family);
    font-weight: var(--style-ink-weight);
    letter-spacing: var(--style-ink-spacing);
    line-height: var(--style-ink-line-height);
    margin-bottom: 0.5em;
}

h1 {
    /* PURPOSE: Page Titles, Thread Titles */
    font-size: var(--font-size-xxl); 
}

h2 {
    /* PURPOSE: Major Section Headers ("My Category", "Board Statistics") */
    font-size: var(--font-size-xl);
}

h3 {
    /* PURPOSE: Card Titles ("My Forum"), Content Sub-headers */
    font-size: var(--font-size-lg);
}

/* --- GROUP 2: THE "SYSTEM" (H4-H6 + LEGEND) --- */
/* Use these for organization, labels, and UI elements. */

h4, h5, h6, legend {
    font-family: var(--style-label-family);
    font-weight: var(--style-label-weight);
    letter-spacing: var(--style-label-spacing);
    text-transform: var(--style-label-case);
    line-height: 1.4;
}

legend {
    /* PURPOSE: Fieldset Titles ("INLINE MODERATION", "SEARCH") */
    /* Matches H3 in size, but uses the System font */
    font-size: var(--font-size-lg); 
    border-bottom: none;
    margin-bottom: 10px;
	padding: 0 var(--spacing-small);
}

h4 {
    /* PURPOSE: Widget Headers ("RECENT THREADS"), Sidebar Blocks */
    font-size: var(--font-size-md);
}

h5 {
    /* PURPOSE: Navigation Tabs ("THREADS"), Buttons ("NEW REPLY") */
    font-size: var(--font-size-base);
}

h6 {
    /* PURPOSE: Metadata Labels ("JOINED", "LOCAL TIME", "REPLIES") */
    font-size: var(--font-size-sm); /* ~0.7rem */
    letter-spacing: 1.5px; /* Extra wide for tiny text */
}


/* =========================================
   TYPOGRAPHY SYSTEM
   ========================================= */

/* --- 1. THE INK (Cormorant) --- */
/* Use for: Titles, Names, Big Numbers */
.ink-title {
    font-family: var(--font2);
    font-weight: 700;
    line-height: 1.1;
    color: rgb(var(--color1));
    letter-spacing: -0.5px; /* Tighten for drama */
}

/* --- 2. THE STRUCTURE (Montserrat) --- */
/* Use for: Labels, UI, Buttons, Dates */
.system-label {
    font-family: var(--font3);
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Wide spacing looks expensive */
    color: rgb(var(--color1)); /* Dark Grey or Black */
}

/* --- 3. THE BODY (Lora) --- */
/* Use for: Long text, Descriptions */
.body-text {
    font-family: var(--font1);
    font-weight: 400;
    line-height: 1.6;
    color: rgb(var(--color1light)); /* Soften the black for reading comfort */
}


/* Page Titles - large, bold identifying title at top of lots of pages */

.page-title {
	font-size: var(--font-size-xxxl);
	padding: 0 var(--spacing-medium);
	margin: var(--spacing-xlarge) 0;
	margin-left: var(--spacing-medium);
	box-shadow: var(--box-shadow);
	display: inline-block;
	border-left: 5px double rgb(var(--color3));
}



/*****************

H2. Button Styling

*****************/

.button,
button {
	/* TYPOGRAPHY */
    font-family: var(--font1);     /* Lora (Body Font) */
    font-weight: 700;              /* Bold */
    text-transform: uppercase;     /* Capitalized for structure */
    letter-spacing: 1.5px;         /* Wide spacing for readability */
    font-size: 0.85rem;            /* Scaled down slightly to balance the bold */
    
    /* THE "CHUNKY" LOOK */
    background-color: rgb(var(--color1)); /* Deep Black/Dark Grey */
    color: rgb(var(--color2));            /* White/Light Grey Text */
    border: 1px solid rgb(var(--color1)); /* Border matches background */
	margin: var(--spacing-small);
	border-left: 5px solid rgb(var(--color3));
    
    /* SHAPE */
    border-radius: 0px;            /* Sharp corners (Academy style) */
    padding: 0.75rem 1.5rem;       /* Generous padding */
    box-shadow: none;              /* Flat, modern look */
    
    /* FUNCTIONALITY */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all 0.2s ease-in-out;
}

.button:focus {
	color: rgb(var(--color3));
}

.button:hover, button:hover {
	/* This automatically grabs the user's selected color (Blue, Gold, etc.) */
    background-color: rgb(var(--color3)); 
    border-color: rgb(var(--color3));
    
    /* Text turns dark for contrast against the bright accent */
    color: rgb(var(--color1));            
    
    /* Tactile Lift Effect */
    transform: translateY(-2px);
}

.button:active, 
button:active {
    transform: translateY(0);             /* Pushes back down */
    background-color: rgba(var(--color3), 0.8); /* Slight dim on click */
}

/* SIDEBAR SPECIFIC ADJUSTMENT */
/* Keeps the sidebar buttons from looking like one giant wall */
.user-links a .button, 
.user-links .button {
    width: 100%;               /* Full width in sidebar */
    margin-bottom: 4px;        /* Tiny gap between stacked buttons */
    text-align: center;
}

/* FLOATING ACTION BUTTON - SPECIAL FIXED POSITION BUTTON, USED ON LARGE PAGES WHERE YOU MIGHT WANT TO HIT A BUTTON BEFORE THE BOTTOM OF THE PAGE: SEARCH AND PROFILE EDIT */

.fab {
	position: fixed;
	bottom: 120px;
	/* floats a little above the very bottom of the page */
	right: var(--spacing-medium);
	z-index: 800;
	/* ensures it floats above other elements but below modals */
	outline: 4px solid rgb(var(--color2light));
}

/* Add sticky class to your fab if you want it to stick to a container! */

.sticky {
	position: sticky;
	left: 100%;
}

@media screen and (min-width: 768px) {
	.fab {
		bottom: var(--spacing-small);
	}
}

/*******************

H3. Icon Styles

System to contain and flex your icons (Material Icons by default, styled above) in nice neat strips. This setup appears on multiple pages.

********************/

/* strip to contain icons */
.icon-panel {
	box-shadow: var(--box-shadow);
}

/*icon strip interior, can be combined with the panel or may be multiple to a panel. if you only have one, make sure it has both panel and section classes. */

.icon-panel-section {
	display: flex;
	align-items: stretch;
	background: rgb(var(--color2light));
	text-align: center;
}

/* container for a single icon */

.icon-container {
	border-right: var(--border);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--spacing-small);
	position: relative;
	transition: background-color 0.3s ease;
	cursor: pointer;
}

/* Hover Effect */
.icon-container:hover {
	background-color: rgba(var(--color1light), .1);
	/* Subtle background change on hover */
}

/* Active Effect */
#light-mode-button.active,
#dark-mode-button.active {
	font-weight: bold;
}

.icon-container.active {
	/* Distinct border for active state */
	background-color: rgba(var(--color3), .1);
	/* Slightly darker background for active state */
}

/* for filler sections, to take up any remaining space */

.flex-full {
	flex: 1;
	cursor: auto;
	padding: 0;
}

/* no hover effects for space fillers */

.flex-full:hover {
	background-color: transparent;
	transform: scale(0);
}

/*******************

H4. Card Styles

"Cards" as consistently styled flex containers that appear on many pages

********************/


.card {
	background: rgb(var(--color2light));
	border: var(--border-color);
	border-top: 5px double;
	padding: var(--spacing-medium);
	box-shadow: var(--box-shadow);
	flex: 1;
	min-width: 300px;
	max-width: 100%;
	margin-top: var(--spacing-small);
}

.card-wide,
.full-width {
	width: 100%;
	flex-basis: 100%;
}

/*******************

H5. Grid Styles
	
Grids appear all over the place. I've used them to replace MyBB's ugly ass tables with more flexible but still table-like layouts.

Some grids look like tables on all screen sizes. Grid containers with "responsive" class transform into tables on larger screens but display card layouts more suitable for small screens on mobile.

********************/

/* Basically replaces "table": keep all table content within a single container */
/* Add "responsive" class to your grid container if you want it to start out with its own block display but switch to card display on larger screens. */

.grid-container {
	display: grid;
	grid-template-columns: 1fr;
	/* Single column for mobile */
	background: rgb(var(--color2light));
	overflow-x: auto;
	border: var(--border-color);
	padding: var(--spacing-medium);
}

/* 1. RESET: Kill the bottom borders */
.grid-item {
    border-bottom: none;
}

/* 2. APPLY: Add Top Borders to ALL rows */
.grid-row .grid-item {
    /* The separator line sits ABOVE the content */
    border-top: var(--border-dashed);	
	align-content: flex-end;
}

/* 3. EXCEPTION: Remove Top Border from the FIRST row */
/* This targets the row immediately following the header */
.grid-item-header + .grid-row .grid-item {
    border-top: none;
}

/* header class for top row grid-items, distinguished by a different background color. these elemnts are both grid items and grid item headers. No headers on responsive grids for small screens. */

.grid-item-header {
	font-size: var(--font-size-sm);
	font-weight: bold;
	font-family: var(--font3);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-bottom: 5px double;
}

/* by default, a grid row has display: contents, allowing it to disappear into the larger grid structure. The grid row will keep its own styling when display:contents is removed. */

.grid-row {
	box-shadow: var(--box-shadow);
	display: contents;
}

/* wrap styled card elements in this to not interfere with table layouts */

.responsive-wrapper {
	display: block;
}

.grid-hide {
	display: block;
}


/* a responsive grid has rows with "display: block" so it maintains whatever structure you have set up until the screen is large enough to display the entire table. */

.grid-container.responsive .grid-row {
	display: block;
}


/* color resets */
.grid-container.responsive .grid-row:nth-child(even) .grid-item {
	background-color: transparent;
}

/* highlighted grid row */

.grid-row-highlighted {
	background-color: rgba(var(--color3), .5);
}

/* normal grid item, basically one cell, border to distinguish cells */

.grid-item {
	padding: var(--spacing-small);
}

.grid-container.responsive .grid-item {
	padding: 0;
	border: none;
}

.grid-container.responsive .mobile-only {
	display: block;
}

/*should prevent overflowing text from breaking the layout on small screens */

.grid-item,
.grid-item a {
	hyphens: auto
}

/* Full-width grid item if it needs to take up an entire row -- ie the 'there is nothing here' messages */

.full-width {
	grid-column: 1 / -1;
	padding: var(--spacing-medium);
}


/* single-row header and footer items */

.grid-header,
.grid-footer {
	grid-column: 1 / -1;
	/* Spans all columns */
	text-align: center;
	padding: var(--spacing-medium);
	background: rgb(var(--color2light));
}

.grid-footer {
	border-top: 5px double;	
}

/*
TABLE LAYOUTS
Declare layouts for different tables throughout the site
*/

.col1 {
	grid-template-columns: auto;
}

.col2 {
	grid-template-columns: repeat(2, auto);
}

.col3 {
	grid-template-columns: repeat(3, auto);
}

.col4 {
	grid-template-columns: repeat(4, auto);
}

.col5 {
	grid-template-columns: repeat(5, auto);
}

.col6 {
	grid-template-columns: repeat(6, auto);
}

.col7 {
	grid-template-columns: repeat(7, auto);
}

.grid-container.responsive.col2,
.grid-container.responsive.col3,
.grid-container.responsive.col4,
.grid-container.responsive.col5,
.grid-container.responsive.col6,
.grid-container.responsive.col7 {
	grid-template-columns: auto;
}

/** Responsive Tables -- Become responsive on larger screens, display cards on smaller screens **/

@media screen and (min-width: 600px) {

	.grid-container.responsive .grid-item-header {
		display: block;
	}

	.grid-container.responsive .grid-row {
		display: contents;
	}

	.grid-hide {
		display: none;
	}

	/* color every other grid row */
	.grid-container.responsive .grid-row:nth-child(even) .grid-item {
		background-color: rgba(var(--color3), .1);
	}

	.grid-container.responsive .responsive-wrapper {
		display: contents;
	}

	.grid-container.responsive .mobile-only {
		display: none;
	}

	.grid-container.responsive.col1 {
		grid-template-columns: auto;
	}

	.grid-container.responsive.col2 {
		grid-template-columns: repeat(2, auto);
	}

	.grid-container.responsive.col3 {
		grid-template-columns: repeat(3, auto);
	}

	.grid-container.responsive.col4 {
		grid-template-columns: repeat(4, auto);
	}

	.grid-container.responsive.col5 {
		grid-template-columns: repeat(5, auto);
	}

	.grid-container.responsive.col6 {
		grid-template-columns: repeat(6, auto);
	}

	.grid-container.responsive.col7 {
		grid-template-columns: repeat(7, auto);
	}
}
/**********************

H6. Forms, Fields, and Inputs Styles

***********************/

select, 
textarea, 
input[type="text"], 
input[type="password"],
input[type="color"] {
    border-radius: 0 !important;
    border: 1px solid rgba(var(--color1), 0.3); /* Subtle border */
    font-family: var(--font1); /* Lora */
}

/* Hover/Focus for Inputs */
select:focus, 
textarea:focus, 
input[type="text"]:focus {
    border-color: rgb(var(--color3));
    outline: 1px solid rgb(var(--color3));
}

/* Style for individual rows in a form */
.form-row {
	border-bottom: var(--border-dashed);
	/* Consistent border bottom */
	padding: var(--spacing-medium) 0;
	/* Padding around form rows */
	align-items: baseline;
	gap: var(--spacing-medium);
}

.form-header {
	font-family: var(--font2); /* Cormorant Garamond */
    font-size: 1.4rem;         /* Large and readable */
    font-weight: 700;          /* Heavy Ink */
    text-transform: none;      /* Keep it Title Case, don't force caps */
    letter-spacing: -0.5px;    /* Tighten it up for a headline feel */
}



.form-row:last-child {
	border: none;
}

/* Style for form labels */
label {
	display: block;
	margin-bottom: var(--spacing-small);
	align-self: baseline;
	flex: 1;
}


.form-label {
		font-family: var(--font3);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.checkbox-field {
	flex: 1;	
	    display: flex;
    flex-wrap: wrap;
}

/* Flex container for checkbox and radio groups */
.checkbox-group,
.radio-group {
	/* Align items in a row */
	display: flex;
	align-items: self-start;
	flex-wrap: wrap;
	/* Space between checkboxes or radio buttons */
	gap: var(--spacing-small);
	margin: var(--spacing-small) 0;
	
}

/* Styles for textboxes and select elements */
.textbox,
select,
.input {
	padding: var(--spacing-small);
	/* Comfortable padding */
	border: var(--border);
}

/* Focus style for inputs */
.textbox:focus,
select:focus,
.input:focus {
	border-color: rgb(var(--color3));
	/* Blue border on focus */
	box-shadow: 0 0 0 2px rgba(var(--color3), 0.25);
	/* Subtle shadow on focus */
	outline: none;
	/* Remove default focus outline */
}

/* Style for touch-friendly checkboxes */
.checkbox {
	width: 30px;
	/* Larger touch area */
	height: 30px;
	cursor: pointer;
	/* Indicate clickable area */
}

/* BRUTALIST CHECKBOXES */
input[type="checkbox"], input[type="radio"] {
    /* 1. Kill the Default Look */
    -webkit-appearance: none;
    appearance: none;
    
    /* 2. Create the Box */
    width: 16px;
    height: 16px;
    border: 1px solid #000; /* Ink Border */
    background: #fff;
    border-radius: 0; /* Sharp corners */
    
    /* 3. Layout */
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 8px;
    cursor: pointer;
}

/* Checked State */
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: rgb(var(--color3)); /* Fill with Orange */
    
    /* Optional: Create a 'frame' effect */
    box-shadow: inset 0 0 0 2px #fff; 
}

/* Radio Button (Make it circular to distinguish from checkbox) */
input[type="radio"] {
    border-radius: 50%;
}

/**********************
H7. Stats Styles

"The Ledger System"
- Mobile: Stacked vertically (Form style)
- Desktop: Split horizontally (Dossier style)
***********************/

/* --- 1. BASE CONTAINER (Mobile First) --- */
.stat-wrapper {
    /* Layout: Stack label on top of data */
    display: flex;
    flex-direction: column;
    gap: 4px; 
    
    /* The "Perforated" Paper Look */
    border-bottom: var(--border-dashed);
    margin: 0;
    padding: var(--spacing-medium); /* Breathing room */
    
    width: 100%;
    box-sizing: border-box;
}

/* --- 2. THE LABEL (Structure/Metadata) --- */
/* Uses Montserrat (--font3) for technical look */
.stat-label {
    font-family: var(--font3);
    font-size: var(--font-size-xsm); /* Tiny */
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Wide spacing = Expensive */
    color: rgb(var(--color1light)); /* Pushed to background */
    font-weight: 700;
    /* Alignment defaults to Left for mobile */
    text-align: left;
    padding: 0;
}

/* --- 3. THE DATA (Ink/Content) --- */
/* Uses Cormorant (--font2) for importance */
.stat-stat {
    font-family: var(--font2);
    font-size: var(--font-size-md); /* Big & Readable */
    color: rgb(var(--color1)); /* Ink Black */
    line-height: 1.2;
    text-align: left;
    
    /* Ensure long emails/data don't break mobile layout */
    word-break: break-word; 
}

.stat-h {
        flex-direction: row; /* Switch to Horizontal */
        align-items: stretch; /* Stretch divider to full height */
        padding: 15px 0; /* Less horizontal padding, use gaps instead */
}

.stat-h .stat-label {
	flex: 1;
        text-align: right;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
}

.stat-h .stat-stat {
	flex: 1;
        text-align: left;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.stat-h .stat-divider {
	display: block;
        width: 1px;
        background-color: rgb(var(--color1light));
}

.stat-hero {
	font-size: 2.5rem; /* Massive */
    line-height: 1;    /* Tight */
    margin-top: 10px;
}

/* Helper for sub-text (e.g. "0.13 per day") */
.stat-small {
    font-family: var(--font1); /* Lora */
    font-size: var(--font-size-sm);
    margin-top: 4px;
    display: block;
    font-style: italic;
}

/* --- 4. THE DIVIDER (Hidden on Mobile) --- */
.stat-divider {
    display: none;
}

/* =========================================
   RESPONSIVE SWITCH (Desktop View)
   Transforms the stack into a 2-column Ledger
   ========================================= */
@media screen and (min-width: 768px) {
    
    /* Target the responsive class (.stat-r) */
    .stat-wrapper.stat-r {
        flex-direction: row; /* Switch to Horizontal */
        align-items: stretch; /* Stretch divider to full height */
        padding: 15px 0; /* Less horizontal padding, use gaps instead */
    }

    /* LEFT SIDE: The Label */
    .stat-r .stat-label {
        flex: 1; /* Takes 50% width */
        text-align: right;
        padding-right: 20px; /* Air gap before center line */
        
        /* Vertically center the label */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* CENTER: The Spine */
    .stat-r .stat-divider {
        display: block;
        width: 1px;
         background-color: rgb(var(--color1light)); /* The subtle vertical line */
    }

    /* RIGHT SIDE: The Data */
    .stat-r .stat-stat {
        flex: 1; /* Takes 50% width */
        text-align: left;
        padding-left: 20px; /* Air gap after center line */
        
        /* Vertically center the data */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* --- UTILITY: Always Vertical (.stat-v) --- */
/* Use this if you have a sidebar stat that should NEVER go horizontal */
.stat-v {
    text-align: center;
}
.stat-v .stat-label { text-align: center; }
.stat-v .stat-stat { text-align: center; }

/**********************

H8. Modal Styles

All Modal pop-up windows (ie quick login, user info modal, nav modal, anything that pops up!) styled the same.

IF YOU ADD MORE, MAKE SURE YOU CHECK THE JSCRIPT IN THE HEADER TO ENSURE THEY HAVE EVERYTHING THEY NEED TO FUNCTION CORRECTLY.

***********************/

/* 	No scroll class attached to body when a modal is open. Ensures the page does not scroll */

.no-scroll {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: fixed;
}

/* Container for modal content, fills and blocks entire screen */

.modal {
	display: none;
	opacity: 0;
	position: fixed;
	/* Stay in place */
	z-index: 1000;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, .5);
	/* Black w/ opacity */
	justify-content: center;
	align-items: center;
	transition: var(--transition);
}

.modal.show {
  display: flex; /* Shown as a flex container */
  opacity: 1; /* Fully opaque */
}

.modal table td {
	padding: var(--spacing-medium);	
}

.modal .close-modal {
	display: none;	
}


.close {
	color: rgb(var(--color1));
	font-family: var(--font3);
	font-size: var(--font-size-xxl);
	font-weight: bold;
	grid-column: 1 / -1;
	width: 100%;
	text-align: right;
	display: block;
	/* Layout */
    grid-column: 1 / -1;
    width: 100%;
    text-align: right;
    display: block;
    /* Spacing - Pull it closer to the edge so it feels anchored */
    cursor: pointer;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}


/* MODAL CONTENT */

.modal-content {
	background-color: rgb(var(--color2light));
	margin: 15% auto;
	/* 15% from the top and centered */
	border: var(--border);
	box-shadow: var(--box-shadow);
	display: grid;
	width: fit-content;
	grid-template-columns: 1fr;
	gap: var(--spacing-small);
	padding: var(--spacing-medium);
	box-shadow: 8px 8px 0px rgba(0,0,0,0.15); /* The "Lifted Paper" Shadow */
}

.modal-inner-wrapper {
	padding: var(--spacing-medium);
}

.jquery-modal .modal-inner-wrapper {
	display: flex;
	place-content: center;
}

/*

USER INFO MODAL SPECIFIC STYLES

*/


/* User info section styles */
/* Base styles for the modal */
#myModal-userinfo .modal-content {
	width: 60%;
	/* Adjust width for user info modal */
	margin: auto;
	padding: var(--spacing-medium);
	position: relative;
	background: rgb(var(--color2));
}

#myModal-userinfo .modal-inner-wrapper {
	border: var(--border-color);
		background-color: rgb(var(--color2light));
}

#myModal-login .modal-content {
	width: min(92vw, 460px);
	margin: auto;
	padding: var(--spacing-medium);
	position: relative;
	background: rgb(var(--color2));
}

#myModal-login .modal-inner-wrapper {
	border: var(--border-color);
	background-color: rgb(var(--color2light));
	padding: var(--spacing-medium);
}

/* User info section styles */
#myModal-userinfo .user-info-section {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--spacing-small);
	padding: var(--spacing-medium) var(--spacing-small);
	border-bottom: var(--border-double);
}

#myModal-userinfo div {
	padding-left: var(--spacing-small);
}

#myModal-userinfo #userName {
	font-size: var(--font-size-lg);
}

#myModal-userinfo #pronouns {
	font-size: var(--font-size-sm);
}

#myModal-userinfo .user-avatar {
	width: 80px;
	/* Adjust as needed */
	height: 80px;
	object-fit: cover;
}

#myModal-userinfo .user-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

#myModal-userinfo .user-info h3 {
	margin: 0;
	color: rgb(var(--color1));
}

#myModal-userinfo .full-profile-link {
	text-decoration: none;
	color: rgb(var(--color1));
	font-weight: bold;
	margin-top: var(--spacing-small);
}

#myModal-userinfo .full-profile-link:hover {
	text-decoration: underline;
}

/* Additional sections styles */
#myModal-userinfo .additional-info .section {
	padding: var(--spacing-medium);
	border-bottom: var(--border-dashed);
	/* Light border for separation */
}

#myModal-userinfo .additional-info .section-content {
	margin-top: var(--spacing-small);
}


/* Override if needed */
#myModal-userinfo .modal-content {
	width: 60%;
	/* Adjust width for user info modal */
}

/* Responsive adjustments */
@media (max-width: 768px) {
	#myModal-userinfo .modal-content {
		width: 90%;
		/* More width on smaller screens */
	}
}

/********************

I. Master Grid

Every page is contained within a single master grid. Defaults to mobile view.

********************/

#main-grid {
	display: grid;
	grid-template-areas:
		'top'
		'content'
		'footer'
		'nav';
	overflow-x: auto;
	transition: var(--transition);
}

#content {
	margin-top: var(--spacing-small);	
	container-type: inline-size;
    container-name: main-layout; /* Give it a name to be safe */
}

/* Overflow auto ensures the footer works correctly even if the page content is too wide, BUT! It breaks sticky positioning. Since sticky positioning is only relevant on a couple of pages, we remove it for those pages only using a thread-view class on the body of those pages. Then we make sure nothing spans wider than the thread container! If you make changes to sticky divs, make sure you consider the overflow settings on the main grid. */

.thread-view #main-grid {
	overflow: initial;	
}

@media screen and (min-width: 768px) {
    #main-grid {
        /* Adjust the grid template on larger screens to have a header and collapsible sidebar */
        grid-template-areas:
            'nav nav'
			'sidebar top'
            'sidebar content'
            'sidebar footer';		
			grid-template-columns: 0 1fr;
    }
	
	#main-grid.sidebar-open {
    	grid-template-columns: 300px 1fr; /* Sidebar space opens */
	}
}

/*****************

J. Header

The header has its own template but should appear on every page.

****************/

/* GRID ELEMENT FOR HEADER */

#header.initial-closed {
    height: 2rem; /* Or whatever defines your 'closed' state */
}


#header {
position: relative;
height: clamp(13rem, 20vw, 18rem);
	grid-area: top;
    background:
		linear-gradient(rgba(var(--color3), .13) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--color3light), .12) 1px, transparent 1px),
		radial-gradient(circle at 18% 20%, rgba(var(--color3light), .35), transparent 32%),
		radial-gradient(circle at 82% 12%, rgba(var(--color3), .25), transparent 28%),
		linear-gradient(135deg, rgb(4, 6, 18), rgb(22, 9, 42) 55%, rgb(3, 20, 36));
    background-size: 48px 48px, 48px 48px, auto, auto, auto;
z-index: 5;
    background-position: center;
transition: var(--transition);
width: 100%;
overflow: hidden;
	border-bottom: 5px double rgb(var(--color3));
}

#header-wrapper {
	position: relative;
}

#header.closed {
	height: 2rem;
	overflow: hidden;
}

#header.closed #title {
	padding:0;
	margin:0;
	font-size:2rem;
	bottom: 0;
	width:100%;
	text-align:center;
}

#header.closed #title a {
	font-size: 1.25rem;      /* Shrink text significantly */
	border-top: none;
	border-bottom: none;
	border-left: 5px double rgb(var(--color3));
	border-right: 5px double rgb(var(--color3));
    padding: 0 1rem;   /* Reduce padding */
	margin: 0;
    
    /* Remove heavy shadows for the small bar */
    text-shadow: none;
    box-shadow: none;
}

#header-toggle {
    cursor: pointer;
    transition: 0.5s ease all;
	position: absolute;
	bottom: 0;
	right: 0;
	color: rgb(var(--color3));
	text-shadow: 0 0 12px rgba(var(--color3), .75);
	cursor: pointer;
}

.rotate-icon {
    transform: rotate(180deg);
    transition: var(--transition);
}

#title {
		bottom:1rem;
}

#title a {
	font-family: var(--font2); /* Cormorant Garamond */
    font-weight: 700;          /* Bold to stand out against background images */
    font-size: clamp(2rem, 4vw, 3.6rem);         /* Large and dramatic */
    text-transform: uppercase;
    color: rgb(var(--color1));
    text-decoration: none;
    
    /* THE FRAME STYLING */
    display: inline-block;     /* Crucial: makes the border wrap the text, not the screen */
    margin: var(--spacing-small) var(--spacing-large);    /* Breathing room inside the frame */
	padding: var(--spacing-small);
    
    /* CONTRAST & DEPTH */
    /* Essential since you don't have the image yet */
    text-shadow: 0 2px 15px rgba(0,0,0,0.6); 
    
    /* ANIMATION */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth ease-out effect */
}

/* HOVER EFFECT */
#title a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle glass effect */
    letter-spacing: 0.18em; /* Slight expansion */
}

@media screen and (min-width: 768px) {
	#header.initial-closed {
    	height: 0; /* Or whatever defines your 'closed' state */
	}
	
	#header.closed {
		top: 50px;
		overflow: hidden;
	}
	
}

/*****************

J1. Rotating Newsfeed

Just a simple example of something you could put in your header. Script for automatic rotation of news items in headerinclude template.

****************/


#info-wrapper {
	height: 100px;
	overflow-y: auto;
}

#infoContainer {
  opacity: 1;
  transition: opacity 1s;
}


.fade-out {
  animation: fadeOut 1s forwards;
}

.fade-in {
  animation: fadeIn 1s forwards;
}

#newsfeed-wrapper {
	align-self: self-end;
	background: rgba(var(--color2light), .5);
}

 #newsfeed {
	display: inline-block;	 
	 padding: var(--spacing-large);
	 background: rgba(var(--color2), .5);
}

.news-date {
	font-family: var(--font2);
	font-weight: bold;
	font-size: var(--font-size-md);
}

.news-text {
	padding: var(--spacing-medium);
}

#header.closed #words1, #header.closed #words2, #header.closed #newsfeed {
	display: none;	
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media screen and (min-width: 768px) {
	#content {
		min-height: auto;
		margin-top: 3rem;
	}
	
	#header {
		top: 50px;	
	}
	
	#newsfeed-wrapper {
		text-align-last: center;
	}
}


/**************

K. Navigation Panel

This defaults to a fixed-position FOOTER for mobile views. Try it! Footers are underappreciated but easy to reach with a thumb. You can change it to a HEADER by removing bottom: 0 but will have to restyle the top and bottom of the page to make room for its height.

***************/

#navigation {
	position: fixed;
	z-index: 850;
	width: 100%;
	bottom: 0;
	display: grid;
	grid-template-areas:
		'icon upper'
		'icon lower';
	grid-template-columns: min-content;
	grid-area: nav; 
	border-top: var(--border);
	background: rgb(var(--color2light));
}

/* For small screens, certain icons move to the navigation modal and disappear in the footer */

.nav-shrink {
	display: none;
}

.sidebar .nav-shrink {
	display: flex;	
}

#icon-mod, #icon-admin, #icon-filter {
	display: none;
}

#header-nav-upper #icon-mod, #header-nav-upper #icon-admin, #header-nav-upper #icon-filter {
	display: flex;
}

.guest {
	padding: var(--spacing-small);
}

.member-pms {
	position: absolute;
	top:0;
	right:0;
	font-size:var(--font-size-sm);
}

#navigation a {
	flex: 1;
	color: rgb(var(--color1));
}

#header-nav-upper {
	grid-area: upper;
}

.header-avatar {
	height: 100px;
	width:100px;
	background: black; 
	background-size: cover;
}

#header-nav-lower {
	grid-area: lower;
}

#header-nav-upper .header-icon-container .textdesc {
	display:none;	
}

#header-nav-login {
	display: none;	
}

.quicksearch {
	padding: var(--spacing-medium) 0;
	text-align: center;
	border-bottom: var(--border);
}

@media screen and (min-width: 768px) {
	#navigation {
		top: 0;
		height: 50px;
		grid-template-areas: 'icon lower';
		overflow:hidden;
	}
	
	#header-nav-upper {
		display: none;	
	}
	
	.header-avatar {
		width: 50px;
		height: 50px;
	}
	
	.nav-shrink, .textdesc {
		display: block;
	}
	
	.nav-grow {
		display: block;	
	}
	
	.textdesc {
		font-size: var(--font-size-sm);
	}
	
	#myBtn {
		display: none;	
	}
	
	#icon-mod, #icon-admin, #icon-filter {
		display: flex;	
	}
	
}

/**************

L. Sidebar/Nav Modal

Morphs between sidebar and popup depending on screen size, 768px breakpoint

********************/

#myModal-nav .modal-inner-wrapper {
		background-color: rgb(var(--color2light));
}

@media screen and (min-width: 768px) {
	
	#myModal-nav {
		display: block !important;
	}
	
	#myModal-nav .modal-inner-wrapper, #myModal-nav .modal-outer-wrapper {
		height:100%;
	}
	
	.sidebar {
		position: fixed;
			opacity: 1;
		top: 50px; /* Room for the fixed header) */ 
		left: 0; /* Align to the left */
		transform: translateX(-100%); /* Initially off-screen */
		width: 300px;
		height: 100%;
		transition: transform 0.3s; /* Smooth transition for sliding effect */
		overflow-y: auto;
		z-index: 10;
	}
	
	.sidebar .modal-inner-wrapper {
		padding: 0;	
	}
	
	.sidebar .close {
		display: none;		
	}
	
	.sidebar .modal-content {
		display: contents;
	}
	
	.sidebar .mobile-icons {
		display: none;	
	}
	
	#main-grid.sidebar-open .sidebar {
	transform: translateX(0);
	}
	
}



/**************

L1. Navigation Modal Mode 

Pops up to provide additional navigation options on smaller screens

********************/


/* User Links Styling */

.user-links {
  	display: grid;
	grid-template-columns: 1fr 1fr;	
    gap: var(--spacing-small);
    padding: var(--spacing-medium);;
    background-color: rgba(var(--color2light), 0.8);
    border-top: var(--border-double);
    border-bottom: var(--border-double);
}

.user-links div {
    padding: var(--spacing-small);
    text-align: center;
}

/* Color and Theme Options */
.color {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-small);
    padding: var(--spacing-small);
	border-bottom: var(--border);
}

.signal-tuner {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.signal-toggle {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--color2light), .82);
	border: 1px solid rgba(var(--color3), .45);
	box-shadow: 0 0 12px rgba(var(--color3), .18);
	cursor: pointer;
	clip-path: polygon(.45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%, 0 .45rem);
}

.signal-options {
	position: absolute;
	top: calc(100% + .45rem);
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .35rem;
	width: 10.5rem;
	padding: .55rem;
	background: rgba(var(--color2), .96);
	border: 1px solid rgba(var(--color3), .5);
	box-shadow: 0 0 22px rgba(var(--color3), .24);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-.25rem);
	transition: var(--transition);
}

.signal-tuner:hover .signal-options,
.signal-tuner:focus-within .signal-options,
.signal-tuner.open .signal-options {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.signal-label {
	width: 100%;
	font-family: var(--font3);
	font-size: var(--font-size-xsm);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: rgb(var(--color1light));
	text-align: center;
}

.signal-preset {
	width: 1.45rem;
	height: 1.45rem;
	border: 1px solid rgba(var(--color3), .42);
	background: rgb(var(--signal-color));
	box-shadow: 0 0 10px rgba(var(--signal-color), .45);
	cursor: pointer;
	clip-path: polygon(.35rem 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%, 0 .35rem);
}

.signal-preset.active {
	outline: 2px solid rgb(var(--color1));
	box-shadow: 0 0 18px rgba(var(--signal-color), .85), 0 0 28px rgba(var(--signal-color), .35);
}

#colorPicker1 {
	width: 1.55rem;
	height: 1.55rem;
	padding: 0;
	border: 1px solid rgba(var(--color3), .5);
	background: transparent;
	cursor: pointer;
}

/* Additional Links */
.additional-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.additional-links a {
    text-align: center;
}

/* Theme Selector Style */
#theme_select {
    padding: 1rem;
    text-align: center;
}

/* BOARD WRAPPER TO CONTAIN ALL CONTENT BEYOND HEADER */
@media screen and (min-width: 768px) {
	#board-wrapper {
		margin-top: 2rem;
		max-width: 1200px;
		margin: auto;
	}
	
	.user-links {
		display: flex;
		flex-wrap: wrap;	
	}
}



/***************************

M3. Description Toggles

Open/Close descriptions on categories and forums

****************************/

.category-description, #forumdisplay-description {
	max-height: 0;
    overflow: hidden;
    transition: all ease .3s;
	background: rgba(var(--color2light), .85);
		max-width: 500px;
	box-shadow: var(--box-shadow);
}

.category-description.expanded, #forumdisplay-description.expanded {
    max-height: 500px; /* Adjust based on actual content height */
	margin-bottom: var(--spacing-large);
}



/****************************

SEARCH PAGE STYLES

******************************/

.search-form {
    max-width: 600px;
	margin: auto;
}


/*
    SEARCH RESULT TABLES
*/

/*** Search results appear in distinct card-style for small screens but switch to a basic table on larger screens. Edit the card styles here. Tables styles are controlled by the grid section above. ***/

#search-results .grid-row {
    margin: var(--spacing-medium);
    padding: var(--spacing-medium);
    box-shadow: var(--box-shadow);
}

#search-results .grid-item {
    border: none;
    padding: var(--spacing-small) 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center; /* Align items vertically center in each grid-item */
}

#search-results .grid-item-header {
	display: none;	
}

#search-results .thread-preview {
	line-break: anywhere;
	flex-basis: 100%;
	padding: var(--spacing-medium);
	min-width: 100px;
}

.search-results-flex-wrapper {
	display: flex;	
	gap: var(--spacing-small);
	justify-content: flex-end;
}

#search-results .search-checkbox {
    display: inline;
    float: right; /* Consider using flexbox instead of float for better alignment and spacing */
}

#search-results .forum-link {
	font-size: var(--font-size-md);	
}

#search-results .search-lastpost {
	display: block;
	text-align: right;
}

/* Larger screens - reset card styles to fit in grid */
@media screen and (min-width: 600px) {

    #search-results .grid-item-header {
        display: block; /* Reveal header items */
    }
	
	#search-results .grid-item {
		padding: var(--spacing-small);
	}
	
	.search-results-flex-wrapper {
		display: contents;	
	}
	
	#search-results .search-lastpost {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
}

	

/* Quotes and Codeblocks */

blockquote {
	border: var(--border);
	margin: 0;
	background: rgb(var(--color2light));
	padding: var(--spacing-small);
}

blockquote cite {
	font-weight: bold;
	border-bottom: var(--border);
	font-style: normal;
	display: block;
	padding-bottom: var(--spacing-small);
	margin: 0 0 var(--spacing-small) 0;
}

blockquote cite>span {
	float: right;
	font-weight: normal;
	font-size: var(--font-size-sm);
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: rgb(var(--color2));
	border: var(--border);
	padding: var(--spacing-small);
}

.codeblock .title {
	border-bottom: var(--border);
	font-weight: bold;
	padding-bottom: var(--spacing-small);
	margin: 0 0 var(--spacing-small) 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
}



/**********************

FORUM JUMP

***********************/

.forumjump {
	width: 80%;
}





/***************************

FORUM DISPLAY STYLES - FORUM VIEW WITH THREADS ON PAGE

****************************/

.forumdisplay-container {	
	width: min(1180px, calc(100% - 2rem));
	margin: auto;
    margin-bottom: var(--spacing-large);
    padding-bottom: var(--spacing-large);
}

/* Container to hold list of threads and subforums */
		
.forumdisplay-toggle-container{
	display: flex;
	border-bottom: var(--border);	
	font-family: var(--font3);
		}

/* Toggle between display of threads and subforums */
		
.forumdisplay-toggle {
    cursor: pointer;
    padding: var(--spacing-medium);
    background-color: rgba(var(--color2light), .5);
    text-align: center;
    border: var(--border);
	cursor: pointer;
}

.forumdisplay-content {
    display: none;
}

/* Default state: Show threads, hide subforums */

#forumdisplay-subforums-container {
    display: none;
}

#forumdisplay-threadlist-container {
    display: block;
}

#threadlist-control {
	border-bottom: 1px solid rgba(var(--color3), .45);	
}

#threadlist-control .icon-panel-section,
.threadlist-control-bottom {
	overflow-x: auto;
	scrollbar-width: thin;
}

#threadlist-control .icon-container,
.threadlist-control-bottom .icon-container {
	flex: 0 0 auto;
}

#threadlist-control .flex-full,
.threadlist-control-bottom .flex-full {
	flex: 1 0 1rem;
	min-width: 1rem;
}

/* Active tab */

.forumdisplay-toggle.active {
    background-color: rgb(var(--color2light)); 
	border-top: var(--border-color);
}


#forumdisplay-description-toggle {
	display: inline-block;	
	width: var(--spacing-large);
	cursor: pointer;
}

/* Announcements */

.forumdisplay-announcement {
		
}


/* Sticky threads, normal threads */

.thread-separator {
	background: rgb(var(--color3));
	padding: var(--spacing-medium);
}


/* Styling for individual threads in forum threadlist */

.threadlist-container .threads-wrapper {
	display: grid;
	gap: .45rem;
	padding: var(--spacing-small);
}

.threadlist-container .thread-container {
	position: relative;
	display: grid;
	grid-template-areas:
		'thread-status thread-title thread-stats'
		'thread-status thread-metadata thread-lastpost';
	grid-template-columns: .55rem minmax(0, 1fr) minmax(12rem, auto);
	align-items: stretch;
	overflow: hidden;
	box-shadow: var(--box-shadow);
	background:
		linear-gradient(135deg, rgba(var(--color3), .09), transparent 36%),
		rgba(var(--color2light), .9);
	margin: 0;
	border: 1px solid rgba(var(--color3), .28);
	transition: var(--transition);
}

.threadlist-container .thread-container::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(var(--color3), .16), transparent 34%),
		linear-gradient(rgba(255,255,255,.028) 50%, transparent 50%);
	background-size: auto, 100% 4px;
	opacity: .45;
}

.threadlist-container .thread-container:hover {
	border-color: rgba(var(--color3), .78);
	box-shadow:
		0 0 24px rgba(var(--color3), .22),
		inset 0 0 0 1px rgba(var(--color3), .12);
	transform: translateY(-1px);
}

.threadlist-container .thread-title {
	grid-area: thread-title;
	font-size: var(--font-size-md);
	margin: 0;
	padding: .75rem .9rem .35rem;
	min-width: 0;
	background: transparent;
	border-bottom: 0;
}

.threadlist-container .thread-title a {
	color: rgb(var(--color1));
	text-shadow: 0 0 10px rgba(var(--color3), .35);
}

.threadlist-container .thread-title a:hover {
	color: rgb(var(--color3light));
}

.threadlist-container .thread-title img {
	width: .85rem;
	height: .85rem;
	margin-right: .25rem;
	filter: drop-shadow(0 0 6px rgba(var(--color3), .7));
}

.threadlist-container .thread-metadata {
	grid-area: thread-metadata;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .55rem;
	align-items: baseline;
	padding: 0 .9rem .75rem;
	font-family: var(--font3);
	font-size: var(--font-size-xsm);
	text-transform: uppercase;
	letter-spacing: .08em;
	min-width: 0;
}

.threadlist-container .thread-author {
	grid-area: thread-author;
	align-self: end;
	font-size: var(--font-size-sm);
	margin-left: 0;
}

.threadlist-container .thread-divider {
	flex: 1;
	border-bottom: var(--border);
}

.threadlist-container .thread-time {
	grid-area: thread-time;
	font-size: var(--font-size-xsm);
}

.threadlist-container .thread-stats {
	grid-area: thread-stats;
	display: flex;
	justify-content: flex-end;
	align-items: start;
	gap: .35rem;
	font-family: var(--font3);
	padding: .75rem .9rem .35rem;
	font-size: var(--font-size-xsm);
	text-align: right;
	white-space: nowrap;
}

.threadlist-container .thread-replies,
.threadlist-container .thread-views {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.65rem;
	padding: .25rem .45rem;
	background: rgba(var(--color3), .1);
	border: 1px solid rgba(var(--color3), .28);
	color: rgb(var(--color1light));
}

.threadlist-container .thread-replies {
	grid-area: thread-replies;
}

.threadlist-container .thread-views {
	grid-area: thread-views;
}

.threadlist-container .thread-lastpost {
	grid-area: thread-lastpost;
	align-self: stretch;
	display: flex;
	align-items: end;
	justify-content: flex-end;
	padding: 0 .9rem .75rem;
	border-top: none;
	font-family: var(--font3);
	font-size: var(--font-size-xsm);
	text-align: right;
	white-space: normal;
	max-width: 21rem;
}

.threadlist-container .thread-lastpost .lastpost-date {
	display: block;
	color: rgb(var(--color1light));
}

.threadlist-container .thread-status {
	grid-area: thread-status;
	position: relative;
	background: rgba(var(--color3), .1);
	border-right: 1px solid rgba(var(--color3), .35);
}

.threadlist-container .thread-container .thread_status {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 4rem;
	border: 0;
	background: rgb(var(--color3));
	box-shadow: 0 0 16px rgba(var(--color3), .65);
}

.threadlist-container .thread-container .thread_status.folder,
.threadlist-container .thread-container .thread_status.hotfolder,
.threadlist-container .thread-container .thread_status.closefolder {
	opacity: .45;
}

.threadlist-container .thread-container .thread_status.closefolder {
	background: rgb(var(--color1));
	box-shadow: none;
}

@media screen and (max-width: 600px) {
	.threadlist-container .thread-container {
		grid-template-areas:
			'thread-status thread-title'
			'thread-status thread-metadata'
			'thread-status thread-stats'
			'thread-status thread-lastpost';
		grid-template-columns: .55rem minmax(0, 1fr);
	}

	.threadlist-container .thread-stats,
	.threadlist-container .thread-lastpost {
		justify-content: flex-start;
		text-align: left;
		white-space: normal;
		padding: 0 .9rem .75rem;
		max-width: none;
	}

	.threadlist-container .thread-stats {
		padding-top: .15rem;
	}
}

.threadlist-container {
	background:
		linear-gradient(135deg, rgba(var(--color3), .08), transparent 34%),
		rgba(var(--color2light), .5);
	border: 1px solid rgba(var(--color3), .32);
	box-shadow: var(--box-shadow);
	padding-bottom: var(--spacing-medium);
	overflow: hidden;
	clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% .9rem, 100% 100%, .9rem 100%, 0 calc(100% - .9rem));
}

.threadlist-container > .card {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-width: 0;
	margin: 0 var(--spacing-small);
	border-top: 1px solid rgba(var(--color3), .35);
	box-shadow: none;
	background:
		linear-gradient(90deg, transparent, rgba(var(--color3), .08)),
		rgba(var(--color2), .38);
	clip-path: none;
}

.threadlist-bottom, .thread-bottom {
	display: flex;
	flex-wrap: wrap;
	padding: var(--spacing-large) 0;
	gap: var(--spacing-small);
	justify-content: flex-end;
}

.threadlist-bottom select {
	flex: 1;
}

.threadlist-sort {
    padding: 0 var(--spacing-small);
    justify-content: flex-end;
	margin-top: var(--spacing-small);
}

.threadlist-sort form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	justify-content: flex-end;
}

.threadlist-search form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .35rem;
}

.threadlist-search .textbox {
	min-width: min(16rem, 100%);
}

@media screen and (max-width: 600px) {
	.threadlist-container > .card {
		justify-content: stretch;
	}

	.threadlist-search,
	.threadlist-search form,
	.threadlist-search .textbox {
		width: 100%;
	}

	.threadlist-search button {
		margin-left: auto !important;
	}
}


/***************

THREAD VIEW STYLES

********************/

		.thread-view-container {
			background: rgba(var(--color2light), .5);
		}
		
		.thread-title-wrapper {
			position: sticky;
			top: 0;
			border-bottom: var(--border)
			align-items: center;
			box-shadow: var(--box-shadow);
			background: rgb(var(--color2light));
			padding: var(--spacing-small) var(--spacing-medium);
			z-index: 3;
			border-bottom: var(--border-double);
		}
		
		.thread-view-title {
			font-size: var(--font-size-l);
			font-family: var(--font2);
			border-left: var(--spacing-small) solid rgb(var(--color3));
			padding-left: var(--spacing-large);
		}

		#dynamic-author-info {
			padding: var(--spacing-small) 0;
			padding-left: var(--spacing-large);
			font-size: var(--font-size-sm);
		}
		
		.thread-view-topstrip {
			display: flex;	
			align-items: baseline;
			padding: 1rem;	
		}
		
		.thread-tools {
			padding: var(--spacing-small);
			display: flex;
			text-align: center;
		}

/* Users browsing toggle */

#usersbrowsing-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: var(--transition);
}

/* This class will be toggled to open/close the div */
#usersbrowsing-wrapper.open {
	max-height: 100px; /* Adjust this value based on the content size */
}

.usersbrowsing {
		padding: var(--spacing-small);	
}


@media screen and (min-width: 768px) {
	.thread-title-wrapper {
		position: relative;
		}
	
	#dynamic-author-info {
		display: none;	
	}
	
	.thread-view-title {
		font-size: var(--font-size-xl);
	}
}


/* NEW THREAD AND REPLY STYLES */

.new-post-wrapper {
	max-width: 800px;
	margin: auto;
}

.new-post-label {
	font-size: var(--font-size-xl);
	font-family: var(--font2);
}

.new-post-after {
	display: flex;
	flex-direction: column;
}

.collapsible-row {
	max-height: 0px;
	transition: max-height 0.5s ease-in-out;
	overflow: hidden;
}

.editor_control_bar {
	background: rgb(var(--color2light));
	border: var(--border);
	color: rgb(var(--color1));
	margin: auto;
}


/* MEMBER PROFILE STYLES */

.user-profile {
	display: grid;
	align-items: center;
	border: var(--border);
	margin: auto;
	padding: var(--spacing-medium);
	background: rgba(var(--color2light), .5);
	max-width: 600px;
}

.user-profile-top {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.name {
	grid-area: user-profile-name;
}

.avatar {
	width: 50%;
	padding-bottom: 50%;
	background-size: cover;
	position: relative;
	margin: auto;
	grid-area: user-profile-avatar;
}

.profile-avatar {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
}

.name {
	font-size: var(--font-size-lg);
	margin-top: var(--spacing-small);
}

.info {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 500px;
	overflow: auto;
	margin-bottom: var(--spacing-medium);
	box-shadow: var(--box-shadow);
		border: var(--border);
}

.info-section {
	width: 100%;
	display: none;
	margin: 1rem 0;
	padding: var(--spacing-medium);
}

.info-section.active {
	display: block;
}

.info-buttons {
	display: flex;
    gap: 5px;
    margin-bottom: -1px; /* Pushes tabs down onto the border line */
    padding-left: 10px;
    position: relative;
    z-index: 10; /* Sits on top of the content box */
	text-transform: uppercase;
}



/* Toggle between display of threads and subforums */
		
.userprofile-toggle {
    cursor: pointer;
    padding: var(--spacing-medium);
    background-color: rgba(var(--color2light), .5);
    text-align: center;
    border: var(--border);
	cursor: pointer;
}

.forumdisplay-content {
    display: none;
}

/* Default state: Show threads, hide subforums */

#forumdisplay-subforums-container {
    display: none;
}

#forumdisplay-threadlist-container {
    display: block;
}

#threadlist-control {
	border-bottom: 5px double;	
}

/* Active tab */

.userprofile-toggle.active {
    background-color: rgb(var(--color2light)); 
	border-top: var(--border-color);
    border: 1px solid #000; /* Ink Border */
    
    /* THE MAGIC ERASER: */
    border-bottom: 1px solid #fff; /* White line covers the black content border */
    
    color: #000;
    font-weight: bold;
    z-index: 11; /* Higher than the container */
}



.user-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.user-info-section {
	display: flex;
	background: rgba(var(--color2light), .5);
	box-shadow: var(--box-shadow);
	margin: var(--spacing-medium);
	padding: var(--spacing-medium);
}


/** User Fields **/

.custom-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Adjust the ratio between the columns as needed */
  gap: 10px; /* Adjust the gap between columns */
}

.custom-fields-wrapper .custom-field {
  grid-column: 1;
}

.custom-fields-wrapper #Bio {
  grid-column: 2;
	grid-row: 1 / 4; /* Update if you have more rows */
}

.options {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.mod-options, .admin-options {
	display: flex;
    flex-direction: column;
    background: rgba(var(--color2light), .85);
    padding: 0.5rem;
	flex: 1;
	margin: .5rem;
}

.mod-options .title, .admin-options .title {
	font-size: var(--font-size-lg);
	background: rgb(var(--color3));
	color:rgb(var(--color2));
	padding: var(--spacing-small);
}

.mod-options div, .admin-options div {
	padding: .25rem 0;	
	border-bottom: var(--border);
}

/*************

FOOTER STYLES

****************/

#footer {
	grid-area: footer;
	margin-bottom: 100px;
}

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

#footer ul.menu li {
	margin: 0 5px;
	display: inline;
}

#footer .upper {
	background: rgb(var(--color2));
	box-shadow: var(--box-shadow);
	overflow: hidden;
}

#footer .upper .language {
	float: right;
	margin: -1px;
	margin-left: 15px;
}

#footer .upper .language select {
	border-color: #ccc;
}

.theme select {
	border-color: #ccc;
}

#footer .upper ul.bottom_links {
	float: left;
	margin: 4px 0 0 0;
}

#footer .lower {
	padding: 6px 6px 12px 6px;
	overflow: hidden;
	font-size: var(--font-size-xsm);
}

#footer .lower a:hover,
#footer .lower a:active {
	color: #333;
	text-decoration: underline;
	font-weight: bold;
}

#footer .lower #current_time {
	float: right;
	color: #888;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 20px;
}

@media screen and (min-width: 768px) {
	#footer {
		margin-bottom: 0;
	}
}



/*   POPUP STYLES  */

.popup_menu {
	border: var(--border);
	z-index: 1;
	display:flex;
	flex-direction: column;
}

.popup_item_container {
	flex: 1;	
}

.popup_menu .popup_item {
	display: block;
	padding: 1rem;
	flex: 1;
	white-space: nowrap;
	text-decoration: none;
	background: #efefef;
	color: #333;
}

.popup_menu .popup_item:hover {
	background: #0072BC;
	color: #fff;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

/***************

CONTENT FILTER STYLES

********************/

/** By default, the notification that you can't see this post is hidden **/

.post-hidden {
	display: none;	
}

/** Display hidden notice and hide post content on combo of body tag and prefix tag in thread view container **/

body.sex .thread-view-container.S .post-hidden {
	display: block;
	padding: var(--spacing-medium);
	margin: var(--spacing-medium);
	background: rgb(var(--color1));
	color: rgb(var(--color2));
	font-weight: bold;
}

body.sex .thread-view-container.S .post-content-wrapper {
	display: none;
}

body.violence .thread-view-container.V .post-hidden {
	display: block;
	padding: var(--spacing-medium);
	margin: var(--spacing-medium);
	background: rgb(var(--color1));
	color: rgb(var(--color2));
	font-weight: bold;
}

body.violence .thread-view-container.V .post-content-wrapper {
	display: none;
}



/*************

	MEMBERLIST  STYLES

***************/

#member-list {
	display: grid;
	gap: var(--spacing-medium);
	margin: var(--spacing-large) 0;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.memberlist-member {
	background: rgb(var(--color2light));
	margin: auto;
	box-shadow: var(--box-shadow);
	max-width: 500px;
	border-left: 5px solid rgb(var(--color3));
	width: 100%;
	padding: var(--spacing-small);
}

.memberlist-writer {
	padding: var(--spacing-small);	
	font-family: var(--font3);
}

/* To show/hide info based on user groups, follow this general pattern */

/* Assume accounts are IC account */

.ooc {
	display: none;	
}

/* Hide IC fields on OOC accounts -- update with your OOC group numbers, whatever they may be */

.member-group4 .ic, .member-group3 .ic {
	display: none;	
}

/* Show OOC fields on OOC accounts -- update with your OOC group numbers, whatever they may be */

.member-group4 .ooc, .member-group3 .ooc {
	display: block;	
}

.memberlist-left {
	text-align: center;
	min-width: 200px;
	width: 100%;
	height: 100%;
}

.memberlist-title {
	font-size: var(--font-size-sm);
	padding: var(--spacing-small);
	font-family: var(--font2);	
}

.memberlist-profilelink {
	font-size: var(--font-size-md);
	padding: var(--spacing-small);
}

.memberlist-lastvisit-left {
	padding: var(--spacing-small);
}

.memberlist-right {
	display: none;
}

.memberlist-avatar-wrapper {
	width: 200px;
	height: 200px;
	position: relative;
	margin: auto;
}

.memberlist-image {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
}

@media screen and (min-width: 768px) {
	#member-list {
		grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
		justify-items: center;
	}

	.memberlist-info {
		display: grid;
		height: 100%;
		grid-template-columns: 1fr 3fr;
		gap: var(--spacing-small);
	}

	.memberlist-left {
		border-right: var(--border);
		text-align: left;
	}

	.memberlist-right {
		display: block;
	}

	.memberlist-username {
		padding: var(--spacing-small);
		flex: 1;
	}

	.memberlist-info .user-info-section {
		margin: var(--spacing-small);
	}

	.memberlist-stat, .statpage-stat {
		display: flex;
		padding: var(--spacing-small) 0;
		align-items: center;
	}

	.memberlist-wrapper .form-row {
		justify-content: right;
	}

	.memberlist-avatar-wrapper {
		width: 100%;
		height: auto;
		padding-bottom: 150%;
		position: relative;
	}
}


/* 1. Shared Base Styles (Typography & Layout) */
.online, .offline {
    font-family: var(--font-mono); /* Technical look */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    
    display: inline-flex;
    align-items: center;
}

/* 2. The Indicator Dot (Shape) */
.online::before, .offline::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid #000; /* Always a black border */
    margin-right: 8px;
}

.online::before {
    background-color: rgb(var(--color3)); /* The Light is ON (Orange) */
}

/* --- OFFLINE STATE --- */
.offline {
    color: #999; /* Text is inactive/grey */
}

.offline::before {
    background-color: #fff; /* The Light is OFF (Hollow) */
    /* Optional: dashed border for offline? */
    /* border-style: dashed; */
}
div.error {
	padding: .5rem;
	border: 2px solid rgb(var(--color4));
	background: rgb(var(--color2light));
}

div.error p {
	margin: 0;
	padding: .5rem 0;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(../../../images/error.png) no-repeat 0;
}

div.error ul {
	margin-left: var(--spacing-medium);
}

div.error ul li {
	padding: var(--spacing-medium) 0;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination,
.tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current,
.pagination a {
	padding: 3px 6px;
	margin-bottom: 3px;
}

.pagination a {
	background: #f5f5f5;
	border: 1px solid #ccc;
}

.pagination .pagination_current {
	background: none;
	color: #333;
	border: none;
	font-weight: bold;
}

.pagination a:hover {
	background: #0072BC;
	color: #fff;
	border-color: #263c30;
	text-decoration: none;
}

.pagination .go_page img {
	margin-bottom: -4px;
}

.drop_go_page {
	background: #f5f5f5;
	padding: 4px;
}

.pagination_breadcrumb {
	background-color: #efefef;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	font-weight: normal;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

.thread_legend,
.thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend,
.forum_legend dt,
.forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
	margin-top: 7px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

#posts_container {
	padding: 0;
}

.ignored_post {
	border-top: 3px solid #333;
	padding: 15px;
}

.ignored_post .show_ignored_post {
	margin-top: -15px;
}

.ignored_post .show_ignored_post a.button span {
	background-position: 0 -400px;
}

.deleted_post_hidden {
	border-top: 2px solid #ccc;
	padding: 15px;
}

.deleted_post_collapsed {
	border-top: 3px solid #333;
	padding: 15px;
}

.deleted_post_collapsed .show_deleted_post {
	margin-top: -15px;
}

.deleted_post_collapsed .show_deleted_post a.button span {
	background-position: 0 -400px;
}

.post.classic {
	padding-top: 15px;
}

.post .post_author {
	border-bottom: 1px solid #ccc;
	border-top: 2px solid #ccc;
	background: #f5f5f5;
	padding: 5px;
	overflow: hidden;
}

.post.classic .post_author {
	border: 1px solid #ddd;
	float: left;
	width: 15%;
	margin: 0 1% 15px 0;
	border-left: 0;
	padding: 5px 1%;
}

.post .post_author .buddy_status {
	vertical-align: middle;
	margin-top: -4px;
}

.post .post_author div.author_avatar {
	float: left;
	margin-right: 3px;
}

.post.classic .post_author div.author_avatar {
	float: none;
	text-align: center;
	margin-bottom: 8px;
}

.post .post_author div.author_avatar img {
	padding: 5px;
	border: 1px solid #ddd;
	background: #fff;
}

.post .post_author div.author_information {
	float: left;
	padding: 6px 8px;
}

.post.classic .post_author div.author_information {
	float: none;
	padding: 0;
	text-align: center;
}

.post .post_author div.author_statistics {
	float: right;
	font-size: 11px;
	padding: 3px 10px 3px 5px;
	color: #666;
	line-height: 1.3;
}

.post.classic .post_author div.author_statistics {
	border-top: 1px dotted #ccc;
	margin: 6px 0 0 0;
	padding: 6px 6px 3px 6px;
	float: none;
}

.post_head {
	padding: 1rem;
	border-bottom: var(--border-dashed);
	font-family: var(--font3);
}


.post.classic .post_content {
	float: left;
	width: 79%;
	padding: 0 1% 5px 1%;
}

.post_content .signature {
	margin-top: 5px;
	border-top: 1px dotted #ddd;
	padding: 10px 0 4px 0;
}

.post .post_meta {
	margin: 4px 0;
	font-size: 11px;
	color: #999;
}

.post .post_meta a:link,
.post .post_meta a:visited {
	color: #777;
}

.post .post_meta a:hover,
.post .post_meta a:active {
	color: #777;
}




.post:not(.deleted_post) .postbit_qrestore,
.post:not(.deleted_post) .status_type,
.post.deleted_post .postbit_mirage {
    display: none;
}

.quick_jump {
	background: url(../../../images/jump.png) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	margin-top: -3px;
	border: none;
}

.pollbar {
	background: url(../../../images/pollbar.png) top left repeat-x;
	border: 1px solid #3f3f3f;
	height: 10px;
}

.pollbar .percent {
	display: none;
}

.poll_votedfor {
	background: #efefef;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.posticons_label {
	white-space: nowrap;
}

/** jGrowl Start **/

/** Special IE6 Style Positioning **/
.ie6 {
	position: absolute;
}

.ie6.top-right {
	right: auto;
	bottom: auto;
	left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.top-left {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-right {
	left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-left {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.center {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	width: 100%;
}

/** jGrowl Styling **/
.jGrowl {
	z-index: 9999;
	color: #ffffff;
	font-size: 12px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: fixed;
}
.jGrowl.top-left {
	left: 0px;
	top: 0px;
}
.jGrowl.top-right {
	right: 0px;
	top: 0px;
}
.jGrowl.bottom-left {
	left: 0px;
	bottom: 0px;
}
.jGrowl.bottom-right {
	right: 0px;
	bottom: 0px;
}
.jGrowl.center {
	top: 0px;
	width: 50%;
	left: 25%;
}

/** Cross Browser Styling **/

.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer {
	margin-left: auto;
	margin-right: auto;
}
.jGrowl-notification {
	background-color: transparent;
	opacity: 0.9;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
	transform: scale(1);
	width: 250px;
	padding: 10px;
	margin: 10px;
	text-align: left;
	display: none;
	word-break: break-all;
}
.jGrowl .jGrowl-notification {
	min-height: 40px;
}
.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
	border: 1px solid #000;
	background: #000;
	color: #fff;
}
.jGrowl-notification .jGrowl-header {
	font-weight: bold;
	font-size: .85em;
}
.jGrowl-notification .jGrowl-close {
	background-color: transparent;
	color: inherit;
	border: none;
	z-index: 99;
	float: right;
	font-weight: bold;
	font-size: 1em;
	cursor: pointer;
}
.jGrowl-closer {
	background-color: #000000;
	opacity: 0.9;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
	transform: scale(1);
	width: 250px;
	padding: 10px;
	margin: 10px;
	text-align: left;
	display: none;
	border-radius: 5px;
	word-break: break-all;
	padding-top: 4px;
	padding-bottom: 4px;
	cursor: pointer;
	font-size: .9em;
	font-weight: bold;
	text-align: center;
}
.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
	border: 1px solid #000;
	background: #000;
	color: #fff;
}

.jGrowl .jGrowl-notification.jgrowl_success {
    background: lightgreen;
    border: 1px solid lightgreen;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_error {
    background: red;
    border: 1px solid red;
    color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_process, .jGrowl .jGrowl-closer {
    background: yellow;
    border: 1px solid yellow;
	color: #333;
}

/** Hide jGrowl when printing **/
@media print {
	.jGrowl {
		display: none;
	}
}

/** jGrowl End **/



/** Impromptu Start **/

/*! jQuery-Impromptu - v6.2.3 - 2016-04-23
* http://trentrichardson.com/Impromptu
* Copyright (c) 2016 Trent Richardson; Licensed MIT */

.jqifade{
	position: absolute;
	background-color: #777777;
}
iframe.jqifade{
	display:block;
	z-index:-1;
}
div.jqi{
	width: 400px;
	max-width:90%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	background-color: #ffffff;
	font-size: 11px;
	text-align: left;
	border: solid 1px #eeeeee;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	padding: 7px;
}
div.jqi .jqicontainer{
}
div.jqi .jqiclose{
	position: absolute;
	top: 4px; right: -2px;
	width: 18px;
	cursor: default;
	color: #bbbbbb;
	font-weight: bold;
}
div.jqi .jqistate{
	background-color: #fff;
}
div.jqi .jqititle{
	padding: 5px 10px;
	font-size: 16px;
	line-height: 20px;
	border-bottom: solid 1px #eeeeee;
}
div.jqi .jqimessage{
	padding: 10px;
	line-height: 20px;
	color: #444444;
	overflow: auto;
}
div.jqi .jqibuttonshide{
	display: none;
}
div.jqi .jqibuttons{
	text-align: right;
	margin: 0 -7px -7px -7px;
	border-top: solid 1px #e4e4e4;
	background-color: #f4f4f4;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
}
div.jqi .jqibuttons button{
	margin: 0;
	padding: 15px 20px;
	background-color: transparent;
	font-weight: normal;
	border: none;
	border-left: solid 1px #e4e4e4;
	color: #777;
	font-weight: bold;
	font-size: 12px;
}
div.jqi .jqibuttons button.jqidefaultbutton{
	color: #489afe;
}
div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus{
	color: #287ade;
	outline: none;
}
div.jqi .jqibuttons button[disabled]{
	color: #aaa;
}
.jqiwarning .jqi .jqibuttons{
	background-color: #b95656;
}

/* sub states */
div.jqi .jqiparentstate::after{
	background-color: #777;
	opacity: 0.6;
	filter: alpha(opacity=60);
	content: '';
	position: absolute;
	top:0;left:0;bottom:0;right:0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
div.jqi .jqisubstate{
	position: absolute;
	top:0;
	left: 20%;
	width: 60%;
	padding: 7px;
	border: solid 1px #eeeeee;
	border-top: none;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
}
div.jqi .jqisubstate .jqibuttons button{
	padding: 10px 18px;
}

/* arrows for tooltips/tours */
.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}

.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }

.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }

.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }

.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }

/*****************

CYBERPUNK VISUAL LAYER

*****************/

html {
	background:
		linear-gradient(rgba(var(--color3), .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--color3light), .045) 1px, transparent 1px),
		radial-gradient(circle at 15% 0%, rgba(var(--color3light), .18), transparent 28rem),
		radial-gradient(circle at 80% 10%, rgba(var(--color3), .15), transparent 24rem),
		rgb(var(--color2));
	background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

body {
	background:
		linear-gradient(rgba(255, 255, 255, .025) 50%, rgba(0, 0, 0, .035) 50%),
		radial-gradient(circle at 50% -20%, rgba(var(--color3), .12), transparent 32rem);
	background-size: 100% 4px, auto;
	color: rgb(var(--color1));
	text-shadow: 0 0 12px rgba(var(--color3), .12);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	background:
		linear-gradient(90deg, transparent, rgba(var(--color3), .08), transparent),
		linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,0));
	mix-blend-mode: screen;
	opacity: .45;
}

a,
a:link,
a:visited {
	color: rgb(var(--color3));
	text-shadow: 0 0 10px rgba(var(--color3), .35);
}

a:hover {
	color: rgb(var(--color3light));
	text-shadow: 0 0 14px rgba(var(--color3light), .7);
}

h1, h2, h3,
.ink-title,
.page-title,
#title a {
	font-family: var(--font2);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgb(var(--color1));
	text-shadow:
		0 0 8px rgba(var(--color3), .7),
		2px 0 0 rgba(var(--color3light), .45),
		-2px 0 0 rgba(var(--color3), .35);
}

h4, h5, h6, legend,
.system-label,
.form-label,
.stat-label {
	font-family: var(--font3);
	letter-spacing: .16em;
	color: rgb(var(--color3));
}

.page-title {
	border-left: 0;
	border-bottom: 1px solid rgba(var(--color3), .75);
	background: linear-gradient(90deg, rgba(var(--color3), .2), transparent);
	clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 45%, 100% 100%, 0 100%);
	padding: .65rem 1rem;
	box-shadow: 0 0 24px rgba(var(--color3), .22);
}

.button,
button,
input.button,
a.button {
	font-family: var(--font3);
	background:
		linear-gradient(135deg, rgba(var(--color3), .18), rgba(var(--color3light), .12)),
		rgb(var(--color2light));
	color: rgb(var(--color1));
	border: 1px solid rgba(var(--color3), .85);
	border-left: 4px solid rgb(var(--color3light));
	box-shadow:
		0 0 0 1px rgba(var(--color3), .12),
		0 0 18px rgba(var(--color3), .3),
		inset 0 0 18px rgba(var(--color3), .08);
	clip-path: polygon(.65rem 0, 100% 0, 100% calc(100% - .65rem), calc(100% - .65rem) 100%, 0 100%, 0 .65rem);
	text-shadow: 0 0 10px rgba(var(--color3), .55);
}

.button:hover,
button:hover,
input.button:hover,
a.button:hover {
	background:
		linear-gradient(135deg, rgba(var(--color3), .75), rgba(var(--color3light), .65)),
		rgb(var(--color2light));
	color: rgb(var(--color2));
	border-color: rgb(var(--color3light));
	box-shadow:
		0 0 22px rgba(var(--color3), .75),
		0 0 34px rgba(var(--color3light), .45);
}

.card,
.card-wide,
.modal-content,
.grid-container,
.tborder,
.post-wrapper,
.thread-container,
.forum-container,
.stat-wrapper,
.icon-panel-section,
.user-navigation.card,
.account-summary.card {
	background:
		linear-gradient(135deg, rgba(var(--color3), .08), transparent 32%),
		linear-gradient(180deg, rgba(var(--color2light), .92), rgba(var(--color2), .96));
	border: 1px solid rgba(var(--color3), .35);
	box-shadow: var(--box-shadow);
	backdrop-filter: blur(8px);
}

.card,
.modal-content,
.post-wrapper,
.thread-container,
.forum-container {
	clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% .9rem, 100% 100%, .9rem 100%, 0 calc(100% - .9rem));
}

.grid-item,
.grid-header,
.grid-footer,
.trow1,
.trow2,
.thead,
.tcat {
	background-color: rgba(var(--color2light), .72);
	border-color: rgba(var(--color3), .22);
}

.grid-item-header,
.thead,
.tcat,
.forum-header,
.thread-title,
.post-head,
.postbit_buttons {
	background:
		linear-gradient(90deg, rgba(var(--color3), .22), rgba(var(--color3light), .12), transparent);
	color: rgb(var(--color1));
	border-bottom: 1px solid rgba(var(--color3), .5);
}

.textbox,
textarea,
select,
.input {
	background: rgba(var(--color2), .88);
	color: rgb(var(--color1));
	border: 1px solid rgba(var(--color3), .45);
	box-shadow: inset 0 0 14px rgba(var(--color3), .08);
}

.textbox:focus,
textarea:focus,
select:focus,
.input:focus {
	border-color: rgb(var(--color3light));
	box-shadow:
		0 0 0 2px rgba(var(--color3light), .18),
		0 0 18px rgba(var(--color3), .35),
		inset 0 0 16px rgba(var(--color3), .12);
}

input[type="checkbox"],
input[type="radio"] {
	background: rgb(var(--color2));
	border: 1px solid rgb(var(--color3));
	box-shadow: 0 0 10px rgba(var(--color3), .25);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background: rgb(var(--color3light));
	box-shadow:
		inset 0 0 0 3px rgb(var(--color2)),
		0 0 18px rgba(var(--color3light), .8);
}

.material-symbols-outlined,
.icon-container .material-symbols-outlined {
	color: rgb(var(--color3));
	text-shadow: 0 0 12px rgba(var(--color3), .65);
}

.icon-container {
	border-color: rgba(var(--color3), .28);
	background: rgba(var(--color2light), .58);
}

.icon-container:hover,
.icon-container.active,
#light-mode-button.active,
#dark-mode-button.active {
	background: rgba(var(--color3), .18);
	box-shadow: inset 0 -2px 0 rgb(var(--color3light)), 0 0 16px rgba(var(--color3), .35);
}

#header {
	border-bottom: 1px solid rgb(var(--color3));
	box-shadow:
		0 0 36px rgba(var(--color3), .35),
		inset 0 -80px 120px rgba(0, 0, 0, .55);
}

#header::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(110deg, transparent 0 44%, rgba(var(--color3), .16) 44% 45%, transparent 45%),
		linear-gradient(rgba(255, 255, 255, .035) 50%, transparent 50%);
	background-size: auto, 100% 5px;
	pointer-events: none;
}

#title a {
	color: rgb(var(--color1));
	background: rgba(0, 0, 0, .32);
	border: 1px solid rgba(var(--color3), .65);
	box-shadow: 0 0 28px rgba(var(--color3), .4), inset 0 0 20px rgba(var(--color3), .08);
}

#navigation {
	background: rgba(var(--color2), .92);
	border-top: 1px solid rgba(var(--color3), .7);
	box-shadow: 0 -12px 28px rgba(var(--color3), .16);
	backdrop-filter: blur(10px);
}

#header-nav-upper,
#header-nav-lower {
	background: rgba(var(--color2light), .78);
}

#myModal-userinfo,
#myModal-nav,
#myModal-login,
#myModal-thread-legend,
#tocModal,
#smileyModal {
	background:
		radial-gradient(circle at center, rgba(var(--color3), .13), transparent 34rem),
		rgba(0, 0, 0, .78);
	backdrop-filter: blur(5px);
}

.close {
	color: rgb(var(--color3light));
	text-shadow: 0 0 12px rgba(var(--color3light), .75);
}

.close:hover,
.close:focus {
	color: rgb(var(--color4));
}

.post_body,
.thread-metadata,
.thread-stats,
.smalltext,
.body-text {
	color: rgb(var(--color1light));
}

.stat-stat {
	color: rgb(var(--color1));
	text-shadow: 0 0 10px rgba(var(--color3), .25);
}

.stat-divider {
	background-color: rgba(var(--color3), .55);
	box-shadow: 0 0 10px rgba(var(--color3), .55);
}

.pagination a,
.pagination .pagination_current {
	background: rgba(var(--color2light), .82);
	border: 1px solid rgba(var(--color3), .4);
	color: rgb(var(--color3));
}

.pagination .pagination_current,
.pagination a:hover {
	background: rgba(var(--color3), .22);
	color: rgb(var(--color1));
	box-shadow: 0 0 14px rgba(var(--color3), .35);
}

::selection {
	background: rgba(var(--color3light), .75);
	color: rgb(var(--color2));
}

.footer-signal,
.network-status,
.forum-signal,
.post-signal,
.profile-signal,
.deadnet-intro {
	font-family: var(--font3);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: rgb(var(--color3));
}

.network-status {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	padding: var(--spacing-small) var(--spacing-large);
	background: rgba(var(--color2), .62);
	border-top: 1px solid rgba(var(--color3), .28);
	border-bottom: 1px solid rgba(var(--color3), .28);
	font-size: var(--font-size-xsm);
}

.network-status span,
.forum-signal span,
.post-signal span,
.profile-signal span {
	color: rgb(var(--color3light));
	text-shadow: 0 0 10px rgba(var(--color3light), .7);
}

.deadnet-intro {
	margin: var(--spacing-large);
	padding: var(--spacing-medium);
	background:
		linear-gradient(90deg, rgba(var(--color3), .18), transparent),
		rgba(var(--color2light), .78);
	border: 1px solid rgba(var(--color3), .42);
	box-shadow: 0 0 18px rgba(var(--color3), .18);
	clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% .8rem, 100% 100%, 0 100%);
}

.deadnet-intro .deadnet-title {
	font-family: var(--font2);
	font-size: var(--font-size-md);
	color: rgb(var(--color1));
	text-shadow: 0 0 12px rgba(var(--color3), .55);
}

.deadnet-intro .deadnet-copy {
	color: rgb(var(--color1light));
	margin-top: .35rem;
	letter-spacing: .08em;
}

.forum-signal,
.post-signal,
.profile-signal {
	font-size: var(--font-size-xsm);
	padding: .35rem .5rem;
	background: rgba(var(--color3), .1);
	border-bottom: 1px solid rgba(var(--color3), .26);
}

.footer-signal {
	padding: var(--spacing-small) var(--spacing-medium);
	border-top: 1px solid rgba(var(--color3), .3);
	color: rgb(var(--color1light));
}

.desc {
	border-top: 1px solid rgba(var(--color3), .5) !important;
	border-bottom: 0 !important;
	padding-top: var(--spacing-small) !important;
	padding-bottom: var(--spacing-small) !important;
}

.desc-inner:empty {
	display: none;
}

.lastpost {
	border-top: 1px solid rgba(var(--color3), .45) !important;
	height: auto !important;
	min-height: 4rem;
}

.forum-container .threads,
.forum-container .posts {
	background: rgba(var(--color3), .08);
	border: 1px solid rgba(var(--color3), .18);
}

.avatar img,
.postbit-avatar-wrapper img,
.post-mobile-view-avatar,
#userAvatar {
	background:
		linear-gradient(135deg, rgba(var(--color3), .14), rgba(var(--color3light), .08)),
		rgb(var(--color2));
	border: 1px solid rgba(var(--color3), .45);
	box-shadow: 0 0 18px rgba(var(--color3), .18);
	filter: grayscale(.85) brightness(.78) contrast(1.12);
}

.postbit-avatar-wrapper img,
.avatar img {
	max-width: 100%;
}

.profile-avatar {
	border: 1px solid rgba(var(--color3), .45);
	box-shadow: 0 0 18px rgba(var(--color3), .18);
	filter: grayscale(.85) brightness(.78) contrast(1.12);
}

.profile-console {
	position: relative;
	display: block;
	width: min(1180px, calc(100% - 2rem));
	max-width: 1180px;
	margin: var(--spacing-xl) auto;
	padding: 0;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(var(--color3), .14), transparent 34%),
		linear-gradient(315deg, rgba(var(--color3light), .1), transparent 38%),
		rgba(var(--color2light), .86);
	border: 1px solid rgba(var(--color3), .42);
	box-shadow: 0 0 34px rgba(var(--color3), .16), inset 0 0 0 1px rgba(var(--color2), .65);
	clip-path: polygon(0 0, calc(100% - 1.1rem) 0, 100% 1.1rem, 100% 100%, 1.1rem 100%, 0 calc(100% - 1.1rem));
}

.profile-console::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(var(--color3), .12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--color3light), .06) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 68%);
}

.profile-console > * {
	position: relative;
	z-index: 1;
}

.profile-console .profile-signal {
	display: flex;
	justify-content: space-between;
	padding: .55rem .85rem;
	background: rgba(var(--color2), .72);
	border-bottom: 1px solid rgba(var(--color3), .34);
}

.profile-console .profile-signal::after {
	content: "identity confidence: unstable";
	color: rgb(var(--color3light));
	text-shadow: 0 0 10px rgba(var(--color3light), .65);
}

.profile-hero {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: var(--spacing-large);
	align-items: stretch;
	padding: var(--spacing-large);
}

.profile-avatar-panel {
	display: grid;
	gap: var(--spacing-medium);
	align-content: start;
}

.profile-avatar-frame {
	position: relative;
	aspect-ratio: 1;
	padding: .65rem;
	background:
		linear-gradient(135deg, rgba(var(--color3), .2), rgba(var(--color3light), .08)),
		rgba(var(--color2), .62);
	border: 1px solid rgba(var(--color3), .48);
	box-shadow: inset 0 0 22px rgba(var(--color3), .12), 0 0 26px rgba(var(--color3), .16);
	clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}

.profile-avatar-frame::before,
.profile-avatar-frame::after {
	content: "";
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.profile-avatar-frame::before {
	inset: .65rem;
	border: 1px solid rgba(var(--color3light), .36);
}

.profile-avatar-frame::after {
	left: .65rem;
	right: .65rem;
	top: 50%;
	height: 1px;
	background: rgba(var(--color3light), .8);
	box-shadow: 0 0 12px rgba(var(--color3light), .8);
	opacity: .72;
}

.profile-console .avatar {
	width: 100%;
	height: 100%;
	padding-bottom: 0;
	margin: 0;
	overflow: hidden;
	background: rgba(var(--color2), .7);
}

.profile-console .profile-avatar {
	inset: 0;
	width: 100%;
	height: 100%;
}

.profile-action-strip,
.profile-options {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.profile-action-strip {
	justify-content: center;
	padding: var(--spacing-small);
	background: rgba(var(--color2), .5);
	border: 1px solid rgba(var(--color3), .24);
}

.profile-identity {
	display: grid;
	align-content: center;
	gap: var(--spacing-medium);
	min-width: 0;
}

.profile-kicker {
	font-family: var(--font3);
	font-size: var(--font-size-xsm);
	text-transform: uppercase;
	letter-spacing: .16em;
	color: rgb(var(--color3));
}

.profile-console .user-profile-name {
	padding: var(--spacing-medium) 0;
	border-top: 1px solid rgba(var(--color3), .28);
	border-bottom: 1px solid rgba(var(--color3), .28);
}

.profile-console .name {
	margin: 0;
	font-family: var(--font2);
	font-size: clamp(2rem, 5vw, 4.5rem);
	line-height: .95;
	text-transform: uppercase;
	color: rgb(var(--color1));
	text-shadow: 0 0 18px rgba(var(--color3), .62);
}

.profile-console .user-profile-title {
	margin-top: .45rem;
	font-family: var(--font3);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgb(var(--color3light));
}

.profile-status-grid,
.profile-stat-deck,
.profile-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--spacing-small);
}

.profile-status-card,
.profile-stat-deck .stat-wrapper,
.profile-detail-grid .custom-field {
	padding: var(--spacing-medium);
	background: rgba(var(--color2), .58);
	border: 1px solid rgba(var(--color3), .24);
	box-shadow: inset 0 0 18px rgba(var(--color3), .06);
}

.profile-status-card span,
.profile-detail-grid .field-label {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--font3);
	font-size: var(--font-size-xsm);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgb(var(--color3));
}

.profile-status-value,
.profile-detail-grid .field-val {
	color: rgb(var(--color1));
	font-weight: 600;
}

.profile-stat-deck {
	padding: 0 var(--spacing-large) var(--spacing-large);
}

.profile-stat-deck .stat-wrapper {
	margin: 0;
	min-height: 7rem;
	justify-content: space-between;
	border-color: rgba(var(--color3), .3);
}

.profile-stat-deck .stat-label {
	color: rgb(var(--color3));
}

.profile-stat-deck .stat-stat {
	font-family: var(--font2);
	font-size: var(--font-size-lg);
	line-height: 1.1;
}

.profile-terminal {
	padding: 0 var(--spacing-large) var(--spacing-large);
}

.profile-terminal .info-buttons {
	gap: .35rem;
	margin: 0;
	padding: 0;
}

.profile-terminal .userprofile-toggle {
	border-color: rgba(var(--color3), .32);
	background: rgba(var(--color2), .58);
	color: rgb(var(--color1light));
	font-family: var(--font3);
	font-size: var(--font-size-xsm);
	letter-spacing: .12em;
}

.profile-terminal .userprofile-toggle.active {
	background: rgb(var(--color3));
	border-color: rgb(var(--color3));
	color: rgb(var(--color2));
	text-shadow: none;
}

.profile-terminal .info {
	height: auto;
	min-height: 18rem;
	max-height: none;
	align-items: stretch;
	margin: 0;
	padding: var(--spacing-medium);
	background: rgba(var(--color2), .46);
	border: 1px solid rgba(var(--color3), .32);
	box-shadow: inset 0 0 28px rgba(var(--color3), .08);
	overflow: visible;
}

.profile-terminal .info-section {
	margin: 0;
	padding: 0;
}

.profile-signature {
	padding: var(--spacing-medium);
	background: rgba(var(--color2), .55);
	border: 1px solid rgba(var(--color3), .22);
}

.profile-options {
	justify-content: flex-end;
	padding: 0 var(--spacing-large) var(--spacing-large);
}

html[data-theme='light'] .profile-console {
	background:
		linear-gradient(135deg, rgba(var(--color3), .12), transparent 34%),
		linear-gradient(315deg, rgba(var(--color3light), .08), transparent 38%),
		rgba(var(--color2light), .96);
	box-shadow: 0 0 24px rgba(var(--color3), .11), inset 0 0 0 1px rgba(255,255,255,.72);
}

html[data-theme='light'] .profile-console .profile-signal,
html[data-theme='light'] .profile-status-card,
html[data-theme='light'] .profile-stat-deck .stat-wrapper,
html[data-theme='light'] .profile-detail-grid .custom-field,
html[data-theme='light'] .profile-terminal .info,
html[data-theme='light'] .profile-action-strip,
html[data-theme='light'] .profile-signature {
	background: rgba(255,255,255,.78);
}

@media (max-width: 800px) {
	.profile-console {
		width: min(100% - 1rem, 1180px);
		margin-block: var(--spacing-medium);
	}

	.profile-hero {
		grid-template-columns: 1fr;
		padding: var(--spacing-medium);
	}

	.profile-avatar-frame {
		max-width: 18rem;
		margin: auto;
	}

	.profile-stat-deck,
	.profile-terminal,
	.profile-options {
		padding-inline: var(--spacing-medium);
	}

	.profile-console .profile-signal {
		display: block;
	}

	.profile-console .profile-signal::after {
		display: block;
		margin-top: .25rem;
	}
}

html[data-theme='light'] {
	background:
		linear-gradient(rgba(var(--color3), .18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--color3light), .12) 1px, transparent 1px),
		radial-gradient(circle at 15% 0%, rgba(var(--color3), .16), transparent 28rem),
		rgb(var(--color2));
	background-size: 42px 42px, 42px 42px, auto, auto;
}

html[data-theme='light'] body {
	background:
		linear-gradient(rgba(10, 25, 40, .035) 50%, rgba(255, 255, 255, .08) 50%),
		radial-gradient(circle at 50% -20%, rgba(var(--color3), .14), transparent 34rem);
	background-size: 100% 4px, auto;
	color: rgb(var(--color1));
	text-shadow: none;
}

html[data-theme='light'] body::before {
	opacity: .16;
	mix-blend-mode: multiply;
}

html[data-theme='light'] #header {
	background:
		linear-gradient(rgba(var(--color3), .2) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--color3), .12) 1px, transparent 1px),
		radial-gradient(circle at 18% 20%, rgba(var(--color3), .22), transparent 34%),
		linear-gradient(135deg, rgb(226, 248, 252), rgb(247, 253, 255) 52%, rgb(218, 240, 248));
	background-size: 48px 48px, 48px 48px, auto, auto;
	box-shadow:
		0 0 28px rgba(var(--color3), .22),
		inset 0 -70px 110px rgba(255, 255, 255, .42);
}

html[data-theme='light'] #title a {
	background: rgba(249, 254, 255, .72);
	color: rgb(var(--color1));
	text-shadow:
		0 0 6px rgba(var(--color3), .35),
		1px 0 0 rgba(var(--color3light), .2);
}

html[data-theme='light'] .card,
html[data-theme='light'] .card-wide,
html[data-theme='light'] .modal-content,
html[data-theme='light'] .grid-container,
html[data-theme='light'] .tborder,
html[data-theme='light'] .post-wrapper,
html[data-theme='light'] .thread-container,
html[data-theme='light'] .forum-container,
html[data-theme='light'] .stat-wrapper,
html[data-theme='light'] .icon-panel-section,
html[data-theme='light'] .user-navigation.card,
html[data-theme='light'] .account-summary.card {
	background:
		linear-gradient(135deg, rgba(var(--color3), .12), transparent 34%),
		linear-gradient(180deg, rgba(var(--color2light), .94), rgba(var(--color2), .96));
}

html[data-theme='light'] #navigation,
html[data-theme='light'] #header-nav-upper,
html[data-theme='light'] #header-nav-lower,
html[data-theme='light'] .network-status,
html[data-theme='light'] .signal-options {
	background: rgba(var(--color2light), .88);
}

html[data-theme='light'] .textbox,
html[data-theme='light'] textarea,
html[data-theme='light'] select,
html[data-theme='light'] .input {
	background: rgba(255, 255, 255, .86);
	color: rgb(var(--color1));
}

html[data-theme='light'] .post_body,
html[data-theme='light'] .thread-metadata,
html[data-theme='light'] .thread-stats,
html[data-theme='light'] .smalltext,
html[data-theme='light'] .body-text,
html[data-theme='light'] .deadnet-intro .deadnet-copy,
html[data-theme='light'] .footer-signal {
	color: rgb(var(--color1light));
}

html[data-theme='light'] .button:hover,
html[data-theme='light'] button:hover,
html[data-theme='light'] input.button:hover,
html[data-theme='light'] a.button:hover {
	color: rgb(var(--color1));
}

.jGrowl-notification,
.jGrowl-closer,
div.jqi,
div.jqi .jqistate,
.popup_menu,
.pm_alert,
.red_alert,
div.error {
	background:
		linear-gradient(135deg, rgba(var(--color3), .12), transparent 34%),
		rgba(var(--color2), .96) !important;
	border: 1px solid rgba(var(--color3), .45) !important;
	color: rgb(var(--color1)) !important;
	box-shadow: 0 0 22px rgba(var(--color3), .22) !important;
	border-radius: 0 !important;
}

.jGrowl-notification.jgrowl_success,
.jGrowl-notification.jgrowl_error,
.jGrowl-notification.jgrowl_process {
	background: rgba(var(--color2), .96) !important;
	color: rgb(var(--color1)) !important;
	border-color: rgba(var(--color3light), .65) !important;
}

div.jqi .jqimessage,
div.jqi .jqiclose,
div.jqi .jqititle {
	color: rgb(var(--color1)) !important;
	border-color: rgba(var(--color3), .28) !important;
}

.jqi .jqiarrowtl,
.jqi .jqiarrowtc,
.jqi .jqiarrowtr {
	border-bottom-color: rgb(var(--color2)) !important;
}

.jqi .jqiarrowbl,
.jqi .jqiarrowbc,
.jqi .jqiarrowbr {
	border-top-color: rgb(var(--color2)) !important;
}

.jqi .jqiarrowlt,
.jqi .jqiarrowlm,
.jqi .jqiarrowlb {
	border-right-color: rgb(var(--color2)) !important;
}

.jqi .jqiarrowrt,
.jqi .jqiarrowrm,
.jqi .jqiarrowrb {
	border-left-color: rgb(var(--color2)) !important;
}