/* Earth's Elite forum theme: the main site's "gaming hub" look (Option C)
   on top of SMF's Curve2. Loads after Curve2's index.css and responsive.css,
   so everything here overrides them.

   The header, banner, buttons and footer copy the site's public/assets/css/ee.css;
   keep the two in step. --accent, --accent2, --accent3 and --starfield are set
   per season in index.template.php. */

:root {
  --space: #050b1f;
  --card: rgba(13, 26, 58, 0.9);
  --card2: rgba(17, 34, 72, 0.92);
  --panel: #0b1a3a;
  --inset: #0b1f45;
  --hover: #10285a;
  --line: #17305c;
  --deep: #003375;
  --text: #D7E1EA;
  --muted: #ADCDEA;
  --up: #5FD38D;
  --down: #E5675C;
  --error: #FF9A90;
  --accent: #8DBEE9;
  --accent2: #5B8FD8;
  --accent3: #ADCDEA;
  --display: 'Chakra Petch', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --gutter: 16px;
}

/* ---------- Base ---------- */

html { background: var(--space); -webkit-text-size-adjust: 100%; }
body {
  background: var(--space);
  color: var(--text);
  font: 15px/1.55 var(--body);
}
::selection { background: var(--accent); color: var(--space); text-shadow: none; }

a, a:visited { color: var(--muted); }
a:hover { color: #fff; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent3);
  outline-offset: 2px;
}

strong, .strong { color: inherit; }
h1, h2, h3, h4, h5, h6 { color: #fff; }
h1, h2, h3 { font-family: var(--display); }

hr { height: 1px; background: var(--line); box-shadow: none; }
abbr { border-bottom-color: var(--muted); }

.wrap { max-width: 1360px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--accent); color: var(--space); font-weight: 600;
}
.skip-link:focus, .skip-link:visited { color: var(--space); }
.skip-link:focus { top: 8px; }

.hide-sm { display: none; }
.show-sm { display: inline-flex; }

/* ---------- Site buttons ---------- */

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 20px;
  border: 0; border-radius: 10px;
  font: 600 16px/1.1 var(--body);
  color: var(--space); cursor: pointer; text-align: center;
}
.pill:visited { color: var(--space); }
.pill:hover { color: var(--space); filter: brightness(1.12); }
.pill-a { background: var(--accent); }
.pill-ghost, .pill-ghost:visited { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--muted); }
.pill-ghost:hover { color: #fff; background: rgba(173, 205, 234, 0.08); filter: none; }
.pill-sm { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.pill.hide-sm { display: none; }

.round-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 0; border-radius: 10px;
  border: 0; padding: 0; overflow: hidden;
  background: var(--accent); color: var(--space); cursor: pointer;
  font: 700 18px/1 var(--display);
}
.round-btn:hover, .round-btn:focus { border: 0; }
.round-btn.avatar, .round-btn.avatar:visited { background: var(--deep); color: #fff; }
.round-btn.avatar img { width: 100%; height: 100%; object-fit: cover; }
.round-btn.bell, .round-btn.bell:visited { position: relative; overflow: visible; background: var(--card); color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.round-btn.bell:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--muted); }
.round-btn.bell[aria-current="page"], .round-btn.open { box-shadow: inset 0 0 0 2px var(--accent); }
.round-btn .amt {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; margin: 0; padding: 0 5px;
  border-radius: 6px; background: var(--accent); color: var(--space);
  font: 700 12px/20px var(--body); text-align: center;
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- Site header ---------- */

.site-header { background: var(--space); border-bottom: 1px solid var(--line); }

.header-main {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding-top: 12px; padding-bottom: 12px;
}

.logo { display: block; flex: 1 1 0; min-width: 100px; max-width: 210px; }
.logo img { display: block; width: 100%; max-width: 210px; height: auto; }

.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ee-tool { position: relative; }

/* Phone menu: the nav drops below the header as a list of links. */
.site-nav { display: none; order: 3; flex: 1 1 100%; flex-direction: column; padding: 4px 0 6px; }
.site-header.menu-open .site-nav { display: flex; }
.nav-link, .nav-link:visited {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 10px;
  border-bottom: 2px solid transparent;
  font-weight: 600; color: var(--muted);
}
.nav-link:hover { color: #fff; }
.nav-link[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }

/* SMF's member popups (profile, alerts, messages) under the header buttons. */
#pm_menu, #alerts_menu, #profile_menu {
  display: none; position: absolute; top: calc(100% + 8px); left: auto; right: 0; z-index: 90;
  width: 360px; min-width: 0; max-width: calc(100vw - 32px); padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  color: var(--text); font-size: 14px; line-height: 1.45;
}
#pm_menu.visible, #alerts_menu.visible, #profile_menu.visible { display: block; }
#profile_menu_top::after { content: none; }
.top_menu .loading { padding: 10px; color: var(--muted); }
.profile_username, .profile_username a { color: #fff; font: 700 18px/1.2 var(--display); }
.profile_user_avatar img.avatar { border-radius: 10px; }
.profile_user_links li { font-size: 14px; }
.pm_unread, .alerts_unread { border-top: 1px solid var(--line); }
.unread_notify { border-bottom: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.unread_notify:hover { background: var(--inset); }
.unread_notify strong { color: #fff; }
.unread_notify .avatar { border-radius: 8px; }
.top_menu .alert_bar, .top_menu .cat_bar { border-radius: 8px; }

/* ---------- Title banner ---------- */

.banner {
  background-image:
    linear-gradient(90deg, rgba(5, 11, 31, 0.95) 0%, rgba(5, 11, 31, 0.7) 55%, rgba(5, 11, 31, 0.45) 100%),
    var(--starfield);
  background-color: var(--space);
  background-size: cover;
  background-position: center 40%;
  border-bottom: 3px solid var(--div, var(--accent));
}
/* Forum pages are busy, so the forum's banner is a little shorter than the site's. */
.banner-inner { padding-top: 16px; padding-bottom: 26px; }
.banner .crumb-bar { margin-bottom: 18px; }

.eyebrow {
  margin: 0 0 6px; font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--div, var(--accent));
}
.banner-title {
  margin: 0 0 4px; font: 700 34px/1.08 var(--display); color: #fff; overflow-wrap: anywhere;
}
.banner-lead { margin: 8px 0 0; max-width: 640px; font-size: 18px; }
.banner-actions { margin-top: 18px; }

.stat-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.stat {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-radius: 10px; background: rgba(13, 26, 58, 0.8); border: 1px solid var(--line);
}
.stat strong { font: 700 18px/1.2 var(--display); color: #fff; }
.stat span { font-size: 14px; color: var(--muted); }
.stat-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 4px; background: var(--up); }

.crumb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.breadcrumbs { min-width: 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin: 0 4px 0 2px; }
.breadcrumbs [aria-current] { color: #fff; }

/* ---------- Forum menu bar ---------- */

.forum-bar { background: rgba(13, 26, 58, 0.6); border-bottom: 1px solid var(--line); }
.forum-bar-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-top: 8px; padding-bottom: 8px;
}
#main_menu { margin: 0; flex: 1 1 auto; min-width: 0; }

.dropmenu > li { margin: 0 2px 0 0; font-size: 15px; line-height: 1.2; }
.dropmenu li a, .dropmenu > li > a {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: 8px; color: var(--muted); font-weight: 600;
}
.dropmenu > li:hover > a, .dropmenu > li > a:focus {
  background: rgba(173, 205, 234, 0.08); border: 0; color: #fff; box-shadow: none; text-shadow: none;
}
.dropmenu a.active, .dropmenu li a.active:hover, .dropmenu li:hover a.active {
  background: rgba(141, 190, 233, 0.12); border: 0; color: #fff; font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent); text-shadow: none;
}
.menu_nav > li > a > .main_icons, .menu_nav > li > a > img { display: none; }
.dropmenu li strong { color: #fff; }

/* Level 2 and 3 */
.dropmenu li ul {
  padding: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.dropmenu li li { width: 16em; border: 0; border-radius: 6px; }
.dropmenu li li:hover { background: none; border: 0; }
.dropmenu li:hover li a, .dropmenu li li a {
  display: block; min-height: 0; padding: 8px 10px; line-height: 1.3; border-radius: 6px;
  background: none; color: var(--text); font-weight: 500;
}
.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover {
  background: var(--inset); color: #fff; border: 0;
}
.dropmenu li li.subsections > a::after { padding: 0; top: 8px; color: var(--muted); }
.dropmenu li li a.chosen { color: #fff; font-weight: 600; }

.amt { margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--accent); color: var(--space); font-weight: 700; font-size: 12px; }
.dropmenu li .active .amt, #top_info li .active .amt { background: var(--space); color: var(--accent); }

/* The forum menu and the profile/admin menus become a popup on phones. */
a.mobile_user_menu, a[class^="mobile_generic_menu_"] {
  gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--muted); color: #fff; font-weight: 600; cursor: pointer;
}
.menu_icon { filter: invert(1); }

.forum-search { display: flex; gap: 6px; flex: 0 1 340px; min-width: 0; padding: 0; }
.forum-search input[type="search"] { flex: 1 1 auto; min-width: 0; }

/* ---------- Main area and footer ---------- */

#footerfix { display: flex; flex-direction: column; }
.site-main { width: 100%; flex: 1 0 auto; padding-top: 20px; padding-bottom: 48px; }
#main_content_section { padding: 0; }

.site-footer { border-top: 1px solid var(--line); background: var(--space); }
.footer-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px;
  padding-top: 14px; padding-bottom: 20px; font-size: 14px; color: var(--muted);
}
.footer-links a { display: flex; align-items: center; min-height: 44px; }
.footer-links .copyright, .footer-links .smf-copyright, .footer-links .load-time { grid-column: 1 / -1; }
.footer-links .copyright { padding-top: 6px; }
.footer-links .smf-copyright, .footer-links .load-time { font-size: 12px; opacity: 0.8; }
.footer-links .smf-copyright a { display: inline; min-height: 0; }
.footer-links .smf-copyright .smalltext { font-family: var(--body) !important; }

/* ---------- Forms ---------- */

input, button, select, textarea {
  color: #fff; background: var(--inset);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: none;
  font: 15px/1.4 var(--body);
}
input, button, select {
  height: auto; min-height: 38px; padding: 6px 10px; line-height: 1.4; font-size: 15px;
}
textarea { padding: 8px 10px; }
input[type="checkbox"], input[type="radio"] {
  min-height: 0; width: 16px; height: 16px; padding: 0; background: none; accent-color: var(--accent);
}
input[type="file"] { min-height: 0; padding: 6px; }
input[type="number"] { padding-right: 4px; }
select[size], select[multiple] { min-height: 0; }
select option { background: var(--inset); color: #fff; }
input:hover, textarea:hover, button:hover, select:hover { border-color: #2a4b85; }
textarea:hover { background: var(--inset); }
input:focus, textarea:focus, button:focus, select:focus { border-color: var(--accent); background: var(--inset); }
input::placeholder, textarea::placeholder { color: #7f9cbd; }
input[disabled], textarea[disabled], select[disabled], .button.disabled, .button[disabled]:hover {
  background: #0a1735; color: #6f86a3; border-color: var(--line); opacity: 0.7;
}
.valid_input { background: rgba(95, 211, 141, 0.12); }
.invalid_input { background: rgba(229, 103, 92, 0.15); }

fieldset { border: 1px solid var(--line); border-radius: 10px; }
fieldset legend, legend { color: #fff; font-weight: 600; background: none; border: 0; }
fieldset.admin_group legend {
  padding: 0 6px; font-family: var(--display); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}

/* ---------- Buttons ---------- */

/* Background reset for Curve2's shared gradients. */
.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button,
.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover,
#top_section, .quickbuttons > li,
.quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus,
.inline_mod_check, .popup_window, #inner_section, .post_options ul,
.post_options ul a:hover, .post_options ul a:focus, .notify_dropdown a:hover, .notify_dropdown a:focus,
.button:hover, #search_form .button:hover, .quickbuttons li:hover,
.navigate_section ul, .popup_content, .up_contain {
  background-image: none;
}

.button, .button:visited, .quickbuttons > li > a, .inline_mod_check {
  display: inline-block; height: auto; min-height: 36px; padding: 0 14px;
  background: transparent; color: #fff;
  border: 1px solid rgba(173, 205, 234, 0.55); border-radius: 8px; box-shadow: none; text-shadow: none;
  font: 600 14px/34px var(--body); text-transform: none; letter-spacing: 0;
}
.button:hover, .button:focus, .quickbuttons > li:hover > a, .quickbuttons > li > a:focus {
  background: rgba(173, 205, 234, 0.1); color: #fff; border-color: var(--muted); box-shadow: none; text-decoration: none;
}
.pagesection .button { color: #fff; }

/* Primary: the current choice and form submits. */
.button.active, .button.active:visited,
input[type="submit"].button:not([name="preview"]):not([name="cancel"]), button[type="submit"].button {
  background: var(--accent); color: var(--space); border-color: var(--accent); font-weight: 600; text-shadow: none;
}
.button.active:hover, .button.active:focus,
input[type="submit"].button:not([name="preview"]):not([name="cancel"]):hover, button[type="submit"].button:hover {
  background: var(--accent); color: var(--space); border-color: var(--accent); filter: brightness(1.12);
}
input.button, button.button { min-height: 38px; line-height: 1.2; padding: 8px 16px; }
.cat_bar .button { box-shadow: none; }
.buttonlist .button, .buttonrow .button { margin: 2px 0 2px 4px; }
.buttonrow .button, .buttonrow .button:first-child, .buttonrow .button:last-child { border-radius: 8px; }
.buttonlist, .buttonrow, .pagelinks { z-index: auto; }

/* Dropdowns hanging off a button (Notify, Mark read...). */
.buttonlist .top_menu, .notify_dropdown {
  padding: 6px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.notify_dropdown a { color: var(--text); border: 0; border-radius: 6px; }
.notify_dropdown a:hover, .notify_dropdown a:focus { background: var(--inset); color: #fff; border: 0; }
.notify_dropdown strong { color: #fff; }

/* Small buttons under each post. */
.quickbuttons > li { background: none; margin: 0 0 0 6px; }
.quickbuttons > li > a, .quickbuttons > li:first-child > a, .quickbuttons > li:last-child > a,
.quickbuttons > li:only-child > a, .inline_mod_check, .inline_mod_check:last-child, .inline_mod_check:only-child {
  height: auto; min-height: 32px; margin: 0; padding: 0 10px;
  border-color: var(--line); border-radius: 8px;
  color: var(--muted); font-size: 13px; line-height: 30px;
}
.quickbuttons > li:hover > a, .quickbuttons > li > a:focus { color: #fff; border-color: var(--muted); background: rgba(173, 205, 234, 0.08); }
.quickbuttons .main_icons::before { opacity: 0.85; }
.post_options ul {
  padding: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.post_options ul a { color: var(--text); border: 0; border-radius: 6px; }
.post_options ul a:hover, .post_options ul a:focus { background: var(--inset); color: #fff; border: 0; }

/* ---------- Page numbers ---------- */

.pages { color: var(--muted); }
.pagesection .pagelinks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pagelinks .nav_page, .pagelinks .current_page, .pagelinks .expand_pages {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px;
}
.pagelinks .nav_page { color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.pagelinks .nav_page:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--muted); }
.current_page { color: var(--accent); font-family: var(--body); }
.pagelinks .current_page { background: var(--accent); color: var(--space); font-weight: 700; }
.current_page::before, .current_page::after { content: none; }
.expand_pages { color: var(--muted); }
.topic_pages { color: var(--muted); }

/* ---------- Boxes ---------- */

.generic_list_wrapper, .windowbg, .approvebg, .approvebg2 {
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: none;
  padding: 14px 18px;
}
.windowbg:nth-of-type(odd), .bg.odd { background: var(--card); }
.windowbg:nth-of-type(even), .bg.even { background: var(--card2); }
.windowbg:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
tr.windowbg:hover { background: var(--hover); }
.windowbg.locked { background: rgba(9, 19, 44, 0.92); }
.windowbg.sticky, .windowbg.sticky.locked { background: rgba(141, 190, 233, 0.09); }
.windowbg.approvetopic, .windowbg.approvepost, .approvebg { background: rgba(229, 103, 92, 0.14); color: var(--text); }
.approvebg2 { background: rgba(229, 103, 92, 0.08); color: var(--text); }

.roundframe {
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: none;
  padding: 16px 18px;
}
.information {
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 0 0 10px 10px;
}
.descbox { border: 1px solid var(--line); border-radius: 8px; background: var(--inset); }

/* Section headings: the site's cards with a 3px accent edge. */
div.cat_bar {
  background: var(--card);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 10px 10px 0 0; box-shadow: none; text-shadow: none;
  display: flow-root; /* keeps the admin quick search inside the bar */
}
.cat_bar.collapsed, .cat_bar.cat_bar_round { border-radius: 10px; }
.cat_bar h3 { padding: 12px 18px 10px; }
h3.catbg { font: 700 19px/1.25 var(--display); }
h3.catbg, h3.catbg a, h3.catbg a:hover { color: #fff; text-shadow: none; }
.cat_bar .desc { margin: -6px 0 10px 18px; color: var(--muted); font-size: 14px; }
.cat_bar .desc a { color: #fff; }
.cat_bar + .windowbg, .cat_bar + .roundframe, .cat_bar + .information { margin-top: 0; border-top: 0; }

.title_bar {
  background: var(--inset); color: #fff;
  border: 1px solid var(--line); border-radius: 8px 8px 0 0;
}
h3.titlebg, h4.titlebg, .titlebg, h3.subbg, h4.subbg, .subbg {
  color: #fff; font-family: var(--display); font-weight: 600; text-shadow: none;
}
h3.titlebg, h4.titlebg, h3.subbg, h4.subbg { padding: 10px 14px 8px; font-size: 16px; }
h3.titlebg.config_hd { padding-left: 45px; }
.titlebg a, .subbg a { color: #fff; }
.title_bar + .windowbg, .title_bar + .roundframe { margin-top: 0; border-top: 0; }
.sub_bar { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }

/* Notices */
.errorbox, .noticebox, .infobox { border-radius: 10px; color: var(--text); }
.errorbox { background: rgba(229, 103, 92, 0.12); border: 1px solid rgba(229, 103, 92, 0.55); }
.noticebox { background: rgba(242, 196, 107, 0.1); border: 1px solid rgba(242, 196, 107, 0.45); }
.infobox { background: rgba(95, 211, 141, 0.1); border: 1px solid rgba(95, 211, 141, 0.45); }
.errorbox h3 { color: #fff; }

.red, .meaction, .error, .alert, .warn_mute { color: var(--error); }
.green, .success, .warn_watch { color: var(--up); }
.blue { color: var(--accent); }
.warn_moderate { color: #F2C46B; }
.highlight { color: var(--accent3) !important; }

.new_posts, a.new_posts, a.new_posts:visited {
  top: -1px; padding: 0 6px; border-radius: 5px; opacity: 1;
  background: var(--accent); color: var(--space);
  font: 700 11px/1.6 var(--body); text-transform: uppercase; letter-spacing: 0.04em;
}

.tooltip { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

#ajax_in_progress { background: var(--panel); color: var(--accent); border-bottom: 3px solid var(--accent); font-size: 1.1em; }
#ajax_in_progress a { color: var(--muted); }

.generic_bar, .progress_bar { background: var(--inset); border-color: var(--line); border-radius: 6px; color: #fff; }
.generic_bar span, .progress_bar span { text-shadow: none; }
.generic_bar .bar { background: var(--accent); box-shadow: none; }

.stripes:nth-of-type(odd) { background-color: transparent; }
.stripes:nth-of-type(even), .alternative { background-color: rgba(255, 255, 255, 0.03); }
.alternative2 { background-color: var(--inset); }

.toggle_up::before, .toggle_down::before { background-color: var(--muted); border-color: var(--line); box-shadow: none; }
.toggle_up:hover::before, .toggle_down:hover::before { background-color: #fff; box-shadow: none; }

/* Popups: help, login and the phone menus. */
.popup_container { background: rgba(5, 11, 31, 0.75); }
.popup_window, #main_menu .popup_window, #genericmenu .popup_window, #adm_submenus .popup_window {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.popup_heading { padding: 12px 14px 10px; color: #fff; font: 700 18px/1.2 var(--display); }
.popup_content { background: var(--inset); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }

/* In-page link trees (the banner has the main one). */
.navigate_section ul { padding: 0; background: none; border: 0; box-shadow: none; }
.navigate_section ul li { color: var(--muted); text-shadow: none; }
.navigate_section ul li .dividers { color: var(--muted); padding: 0 4px; font: inherit; }

/* ---------- Board index and message index ---------- */

.up_contain { background: var(--card); border: 1px solid var(--line); border-top: 0; margin: 0; }
.up_contain:hover { background: var(--card2); }
.boardindex_table > div:last-child .up_contain, .boardindex_table .up_contain:last-child { border-radius: 0 0 10px 10px; }
.boardindex_table:not(:last-child) { margin-bottom: 20px; }

.info .subject, a.subject, a.subject:visited { color: #fff; font: 600 18px/1.3 var(--display); }
.board_description { color: var(--text); }
p.moderators { color: var(--muted); font-weight: 500; }
.board_stats { color: var(--muted); }
.boardindex_table .board_stats p { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.lastpost { color: var(--muted); }
.lastpost a { color: var(--text); }
.children { border-top: 1px solid var(--line); }

/* Board icons, drawn instead of Curve2's light pictures: lit when there are new posts. */
.board_icon a {
  position: relative; width: 44px; height: 44px;
  background: var(--inset); border: 1px solid var(--line); border-radius: 10px;
}
.board_icon a::after {
  content: ""; position: absolute; inset: 15px; border-radius: 4px; background: var(--line);
}
.board_icon a.board_on, .board_icon a.board_on2 { border-color: var(--accent); }
.board_icon a.board_on::after, .board_icon a.board_on2::after { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.board_icon a.board_redirect::after { background: none; border: 2px solid var(--muted); border-radius: 50%; }

#info_center .sub_bar { border-top: 1px solid var(--line); }
#ic_recentposts td { border-top: 1px solid var(--line); }
#ic_recentposts .recenttime strong { color: #fff; }

/* The page title is in the banner. */
.display_title { display: none; }
#display_head { margin: 0 0 14px; padding: 0; background: none; border: 0; }
#display_head p { color: var(--muted); }
#messageindex #display_head, #display_head:empty { margin-bottom: 10px; }

#topic_header { background: var(--inset); color: #fff; border: 1px solid var(--line); border-radius: 10px 10px 0 0; }
#topic_container .windowbg { border: 1px solid var(--line); border-top: 0; }
#topic_container .windowbg:last-child { border-radius: 0 0 10px 10px; }
#topic_container .info .message_index_title a, #topic_container .info span.preview a,
#unread .info a.subject_title, .topic_details h5 a { color: #fff; font-weight: 600; }
#messageindex .information, #topic_icons .information { border: 1px solid var(--line); }

/* ---------- Topics and posts ---------- */

#forumposts .windowbg { padding: 16px 18px; margin-top: 12px; }
#forumposts .cat_bar { margin: 0 0 4px; }
.poster h4, .poster h4 a, .poster li:hover h4 a, .poster h4 a:hover .poster li h4 a, .poster h4 a:focus {
  color: #fff;
}
.poster h4 { font: 700 18px/1.25 var(--display); }
.poster li.membergroup { color: var(--accent); }
.poster li.poster_online a { color: var(--up); }
.poster img.avatar { border-radius: 10px; }
.keyinfo .postinfo a, .keyinfo .postinfo a strong { color: var(--muted); }
.keyinfo .postinfo .modified { color: var(--muted); }
.page_number { color: var(--muted); }
.subject_title a { color: #fff; }
.inner { border-top: 1px solid var(--line); box-shadow: none; }
.post { line-height: 1.6; }
.signature, .attachments, .custom_fields_above_signature, .custom_fields_below_signature {
  border-top: 1px solid var(--line); box-shadow: none; color: var(--muted);
}
.list_posts { border-top: 1px solid var(--line); box-shadow: none; }
.counter { color: var(--accent); }
.topic h4 a { color: #fff; }

blockquote {
  margin: 0 0 10px; padding: 8px 12px; font-size: 0.95em;
  border: 0; border-left: 3px solid var(--accent); border-radius: 8px;
}
.bbc_standard_quote { background-color: var(--inset); }
.bbc_alternate_quote { background-color: var(--hover); }
blockquote cite { border-bottom: 1px solid var(--line); color: var(--muted); }
blockquote cite::before { color: var(--accent); }
.bbc_code {
  background: #071430; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font-size: 0.85rem;
}
.codeheader, .quoteheader { color: var(--muted); }
.bbc_link { border-bottom: 1px solid rgba(173, 205, 234, 0.4); }
.bbc_link:hover { border-bottom-color: #fff; }

#poll_options dl.options .voted { color: #fff; }
.event_title { color: #fff; }

#post_draft_options { background: var(--card); border-color: var(--line); }
#post_draft_options .settings dd, #post_draft_options .settings dt { border-top: 1px solid var(--line); }
#post_header dt { color: #fff; }

/* The post editor: navy toolbar and writing area. SMF's dark icons are inverted, keeping their colours. */
.sceditor-container { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
div.sceditor-toolbar { background: var(--card); border-bottom: 1px solid var(--line); padding: 6px 8px 4px; }
div.sceditor-group { background: var(--inset); border: 1px solid var(--line); border-radius: 6px; }
.sceditor-button div { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {
  background: #17305c; box-shadow: inset 0 0 0 1px var(--accent);
}
.sceditor-button.disabled:hover { background: inherit; box-shadow: none; }
div.sceditor-dropdown, div.sceditor-smileyPopup {
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
div.sceditor-dropdown a, div.sceditor-dropdown a:link, div.sceditor-dropdown label { color: var(--text); }
.sceditor-font-option:hover, .sceditor-fontsize-option:hover { background: #17305c; }
div.sceditor-dropdown .button, div.sceditor-dropdown .button:hover {
  background: var(--accent); color: var(--space); border: 1px solid var(--accent); border-radius: 999px;
  font-weight: 600; padding: 6px 16px; min-height: 0; box-shadow: none;
}
div.sceditor-dropdown .button:hover { filter: brightness(1.12); }
.sceditor-color-option { border-color: var(--card); }
.sceditor-color-option:hover { border-color: #fff; }
.sceditor-container iframe, .sceditor-container textarea { background: var(--inset); color: #fff; font: 15px/1.5 var(--body); }
#quick_edit_body_container textarea, .move_topic textarea, dd textarea { background: var(--inset); }

.atwho-view { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.atwho-view ul li { border-bottom: 1px solid var(--line); }
.atwho-view strong { color: var(--accent); }
.atwho-view .cur { background: var(--hover); }

/* ---------- Profiles, messages, lists ---------- */

#basicinfo h4 { color: #fff; font-family: var(--display); }
#basicinfo img.avatar { border-radius: 12px; }
#detailedinfo dl, #tracking dl { border-bottom: 1px solid var(--line); }
#detailedinfo dt, #tracking dt { color: #fff; }
.activity_stats li span { background: var(--inset); border-color: var(--line); }
#personal_messages .capacity_bar { background: var(--inset); border-color: var(--line); }
.unread_pm { background: rgba(95, 211, 141, 0.1); }
dl.addrules dt.floatleft { color: var(--text); }
#pick_theme .selected { background: var(--inset); }
.tfacode { background: var(--inset); }
.boardslist a { border-bottom-color: var(--line); }
.boardslist a:hover { border-bottom-color: var(--muted); }
#helpmain { background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }

table.table_grid { border-collapse: collapse; }
.table_grid tr.windowbg td { border-top: 1px solid var(--line); }
.generic_list_wrapper table.table_grid { border-bottom: 1px solid var(--line); }
tr.title_bar th, .title_bar th { color: #fff; }
.errorfile_table, .errorfile_table td, .errorfile_table .file_line { background: var(--inset); }
.errorfile_table .current, .errorfile_table .file_line.current { background: rgba(229, 103, 92, 0.25); }

.birthday { color: #C9A0FF; }
.event { color: var(--up); }
.holiday > span { color: var(--accent); }

/* The forum's own calendar. */
#month_grid, #main_grid table { background: var(--card); }
#month_grid th, #main_grid th, #month_grid th.days, #month_grid td.weeks, #month_grid th:first-child, #main_grid th:first-child { background: var(--inset); color: #fff; }
#month_grid td, #month_grid th, #main_grid td, #main_grid th { border-color: var(--line); }
#main_grid td.disabled, #month_grid td.disabled { background: rgba(255, 255, 255, 0.02); }
.calendar_today, td.days:hover { background: var(--hover); }
div.week_month_title a { color: #fff; }
.event_time, .event_location { color: var(--muted); }

/* Admin */
#manage_boards li.windowbg:hover, .windowbg.highlight2, .denyboards_layout .board:hover { background: var(--hover); }
#manage_boards li#recycle_board { background-color: rgba(127, 214, 194, 0.08); }
#manage_boards li.redirect_board, #manage_boards li.redirect_board:hover { background-color: rgba(242, 196, 107, 0.08); }
.perm_groups { background-color: var(--card); }
.perm_read, .perm_writable, .perm_execute, .perm_custom, .perm_no_change { color: var(--space); }

/* ---------- Phones ---------- */

@media (max-width: 720px) {
  .up_contain .lastpost { border-top: 1px solid var(--line); }
  .quickbuttons > li { margin: 4px 0 0 6px; }
}

@media (max-width: 560px) {
  .forum-search { flex: 1 1 100%; }
  #mobile_user_menu .dropmenu li a, .dropmenu li a { border-radius: 0; box-shadow: none; }
  #mobile_user_menu .dropmenu a.active { box-shadow: inset 3px 0 0 var(--accent); }
  .dropmenu li ul { border: 0; box-shadow: none; background: var(--inset); border-radius: 0; }
}

/* ---------- Tablet and up ---------- */

@media (min-width: 561px) {
  /* The forum menu is a plain row of links here, not a popup. */
  #main_menu .popup_window, #genericmenu .popup_window, #adm_submenus .popup_window {
    background: none; border: 0; box-shadow: none;
  }
}

@media (min-width: 761px) {
  :root { --gutter: 20px; }

  .hide-sm, .pill.hide-sm { display: inline-flex; }
  .show-sm { display: none; }

  .header-main { padding-top: 14px; padding-bottom: 14px; }
  .logo { flex: 0 1 210px; min-width: 150px; }

  .banner-inner { padding-top: 20px; padding-bottom: 30px; }
  .banner .crumb-bar { margin-bottom: 22px; }
  .banner-title { font-size: 44px; line-height: 1.05; }
  .banner-lead { font-size: 19px; }

  .site-main { padding-top: 24px; padding-bottom: 56px; }

  .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 18px; padding-bottom: 26px; }
  .footer-links .copyright { margin-left: auto; padding-top: 0; }
  .footer-links .smf-copyright, .footer-links .load-time { flex: 1 1 100%; }
}

@media (min-width: 1101px) {
  .site-nav, .site-header.menu-open .site-nav { display: flex; order: 0; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 0; }
  .menu-btn { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .pill, .nav-link, .button, .dropmenu a { transition: filter 0.15s, background-color 0.15s, color 0.15s; }
}