/* A shared, keyboard-accessible switch, including when the mobile menu is closed. */
.colorModeToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--component-radius);
  background: var(--surface-raised);
  color: var(--text-strong);
  font: 600 12px/1.4 Inter, "Segoe UI", sans-serif;
  white-space: nowrap;
  text-transform: none;
  cursor: pointer;
}
.colorModeToggle[hidden] { display: none; }
.colorModeToggle:hover { border-color: var(--cyan); }
.colorModeToggle > .fa { color: #f3d395; }
.colorModeTrack { width: 28px; height: 16px; flex: none; padding: 2px; border-radius: 10px; background: #536278; }
.colorModeTrack::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.colorModeToggle[aria-checked='true'] .colorModeTrack { background: #87613c; }
.colorModeToggle[aria-checked='true'] .colorModeTrack::before { transform: translateX(12px); }

/* Warm parchment surfaces, ink-brown text, and bronze accents. */
html[data-color-mode='beige'] {
  color-scheme: light;
  --primary: #e8dcc5;
  --secondary: #dfd0b7;
  --third: #352b20;
  --border: rgba(112, 83, 47, .25);
  --border-strong: #a58a62;
  --font-color: #493c2e;
  --text-strong: #30271d;
  --text-muted: #62513e;
  --anchor: #775027;
  --anchor-hover: #422b14;
  --cyan: #87613c;
  --focus: 0 0 0 3px rgba(135, 97, 60, .3);
  --surface: #f4ead8;
  --surface-raised: #e4d4b9;
  --panel-fill: #eee2cc;
  --panel-edge: rgba(112, 83, 47, .3);
  --panel-header: linear-gradient(105deg, #d8c4a2, #ebddc4);
  --shadow: 0 18px 45px rgba(28, 19, 10, .22);
  --bg-danger: #f7dfd8;
  --color-danger: #8a3029;
  --border-danger: #b57669;
  --bg-warning: #f3e4bf;
  --color-warning: #705019;
  --border-warning: #ad8b48;
  --bg-info: #e3e9e3;
  --color-info: #37555a;
  --border-info: #8caaa5;
  --bg-success: #e3ead5;
  --color-success: #3c5a2b;
  --border-success: #8ba273;
}
html[data-color-mode='beige'] body {
  background-image: linear-gradient(180deg, rgba(193, 154, 95, .1), rgba(164, 124, 67, .2)), url('../img/althea-world-background-v2.webp');
  background-color: #dfd0b7;
}
html[data-color-mode='beige'] body::before {
  background: linear-gradient(180deg, transparent 0 38rem, rgba(100, 76, 44, .16) 72rem, rgba(79, 58, 32, .35) 100%);
}
html[data-color-mode='beige'] .banner::after { background: rgba(38, 27, 15, .2); }
html[data-color-mode='beige'] :is(.siteNav, .mainContentPanel, footer.well) {
  background: #e8dcc5;
  box-shadow: var(--shadow);
}
html[data-color-mode='beige'] :is(.rightPane > .well, .postHolder > .well, .leftPane > .well, .leftPane > form, .leftPane > .panel, .leftPane .pageIntro, .resourceCard, .leftPane .emptyState) {
  background: var(--surface);
}
html[data-color-mode='beige'] :is(.bannerExploreLinks, .navAccordion details, .navGroupLinks, .newsTickerRow) { background: var(--panel-fill); }
html[data-color-mode='beige'] .siteNav .navAccordion summary { background: var(--panel-header); }
html[data-color-mode='beige'] .navWiki { background: #e0ceb0; }
html[data-color-mode='beige'] :is(.navGroupLinks a, .bannerExploreLinks a) { color: var(--font-color); }
html[data-color-mode='beige'] :is(.navGroupLinks a i, .bannerExploreLinks small, .panelContext, .topPlayerIdentity small, .formHelp, .pageDescription) { color: var(--text-muted); }
html[data-color-mode='beige'] .leftPane :is(.pageIntro p:last-child, .resourceCard p, .emptyState p) { color: var(--text-muted); }
html[data-color-mode='beige'] :is(input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']), select, textarea) {
  color: var(--text-strong);
  background-color: #fff8eb;
  border-color: var(--border-strong);
}
html[data-color-mode='beige'] :is(input, textarea)::placeholder { color: #79664f; }
html[data-color-mode='beige'] .leftPane :is(tr.yellow, thead tr) { background: var(--panel-header); }
html[data-color-mode='beige'] .leftPane :is(thead th, tr.yellow > th, tr.yellow > td) { color: var(--text-strong); }
html[data-color-mode='beige'] :is(.leftPane pre, .leftPane .formRules, .pageFilters a) { background: #eee2cc; color: var(--font-color); }
html[data-color-mode='beige'] :is(.tableScroll, .siteNav) { scrollbar-color: #aa906a #e8dcc5; }

/* Legacy templates use fixed colors; keep shared text legible on parchment. */
html[data-color-mode='beige'] :is(.mainContentPanelHeader, .mainContentPanelHeader h2, .header, .newsTickerPanelHeading, .navAccordion summary, .navAccordion details[open] summary, .navWiki, .navToggle, .colorModeToggle:hover, .leftPane label) {
  color: var(--text-strong);
  text-shadow: none;
}
html[data-color-mode='beige'] :is(.mainContentPanelHeader .panelIcon, .navAccordion summary > i, .navAccordion summary::after, .navWiki i, .bannerExploreLinks a > i, .colorModeToggle > .fa, .sideNavMobileTitle, .footerStat i, .resourceCard > svg, .stateIcon) { color: #805b2e; }
html[data-color-mode='beige'] :is(.navGroupLinks a:hover, .navGroupLinks a[aria-current], .bannerExploreLinks a:hover, .pageFilters a:hover, .pageFilters a[aria-current='page'], .categoryNavigation a[aria-current], .categoryNavigation a:hover, .navWiki:hover, .newsTickerRow:hover) {
  color: #422b14;
  background: #ddc8a5;
  box-shadow: none;
}
html[data-color-mode='beige'] .navGroupLinks a[aria-current] { box-shadow: inset 2px 0 #87613c; }
html[data-color-mode='beige'] :is(.navGroupLinks a[aria-current] i, .newsTickerPanelHeading i, .newsTickerArrow) { color: #805b2e; }
html[data-color-mode='beige'] .newsTickerDetails a { color: var(--anchor); }
html[data-color-mode='beige'] :is(.newsTickerRow, .newsTickerRow time, .newsTickerRow summary, .newsTickerRow summary::after, .newsTickerDetails, .footerLinks a, .topPlayerIdentity strong, .monsterCard, .guildNameLink, .leftPane .pageIntro .eyebrow) { color: var(--font-color); }
html[data-color-mode='beige'] :is(.topPlayerCard, .footerStat, .monsterDetail, .bestiaryPagination a, .bestiaryPagination span, .forumHomeCard, .qf-card, .qf-post, .qf-compose, .qf-rewards, .itemCard, .itemBrowsePanel, .itemResultsPanel, .itemCategoryTile) {
  background: var(--surface);
  border-color: var(--panel-edge);
}
html[data-color-mode='beige'] :is(.topPlayerIdentity > a, .guildMembersLink, .forumHomeCard strong, .forumHomeCard > i, .itemLibrary .itemCard h2, .itemCategoryTile, .monsterVitals strong, .monsterLevelControl label span) { color: var(--anchor); }
html[data-color-mode='beige'] :is(.forumHomeCard small, .qf-card span, .qf-post header span, .qf-badge, .qf-rewards summary, .itemCategoryTile small, .itemCardStats, .itemCardDrops, .itemCardValue, .itemSourceLabel, .itemPanelHeading > span, .monsterComboEstimate, .monsterComboEstimate span, .monsterVitals span, .monsterVitals small, .monsterBossNotice) { color: var(--text-muted); }
html[data-color-mode='beige'] .topPlayerRank { background: #e3d3b5; color: #675333; }
html[data-color-mode='beige'] .topPlayerCard:nth-child(-n+3) .topPlayerRank { background: #dfc99e; color: #60451f; }
html[data-color-mode='beige'] .serverStatus.isOnline { color: #3c5a2b; }
html[data-color-mode='beige'] .serverStatus.isOffline { color: #8a3029; }
html[data-color-mode='beige'] :is(.qf-editor, .newsEditorInput) { background: #fff8eb; color: var(--font-color); }
html[data-color-mode='beige'] :focus-visible { outline-color: #87613c; }
html[data-color-mode='beige'] :is(.heroLoginTitle, .bannerContent > .eyebrow) { color: #f1e3ca; }
html[data-color-mode='beige'] :is(.heroLoginFields button, .bannerActions .btn-primary) { background: linear-gradient(135deg, #87613c, #624329); border-color: #b59a72; }
html[data-color-mode='beige'] .heroLoginFields > div > i { color: #87613c; }
html[data-color-mode='beige'] .leftPane :is(.btn-secondary, .btn-info) { color: var(--anchor); background: var(--surface-raised); }
html[data-color-mode='beige'] .leftPane .eyebrow { color: var(--anchor); text-shadow: none; }
html[data-color-mode='beige'] .pageIntro::after { background: rgba(163, 119, 55, .08); }
html[data-color-mode='beige'] .rankGold { color: #705319; background: #e9d6a7; }
html[data-color-mode='beige'] .rankSilver { color: #5e5b54; background: #e0ded7; }
html[data-color-mode='beige'] .rankBronze { color: #8a4c2c; background: #ecd4bc; }
html[data-color-mode='beige'] .myaccount_widget .linkbuttons li a:hover { color: #422b14; background: #ddc8a5; border-color: #a58a62; }

/* Secondary copy must use theme colors, even in legacy page components. */
html[data-color-mode='beige'] :is(
  .downloadPanelCopy p, .downloadBenefits,
  .itemLibraryHeading p, .itemHelp, .itemDetailHeading p,
  .itemLibrary .itemSearchStatus, .itemSortControls > span, .itemLibrary .itemSortHelp,
  .itemTradeNote, .itemLibrary .itemDropLegend, .bestiaryPagination span,
  .monsterLevelControl label small, .sectionHeading > p,
  .attackDamage small, .attackMeta span, .defenseStat span, .resistanceItem span
) { color: var(--text-muted); }
html[data-color-mode='beige'] :is(
  .downloadPlatform, .itemCategory, .itemSortValue, .itemCount,
  .itemLibrary .itemQuestOnly, .itemValueLine strong, .itemBossIcon,
  .bestiaryStats strong, .monsterComboEstimate strong, .combatHeading .eyebrow,
  .spellLevels > summary, .spell-preview-trigger, .legacyLootItem,
  .legacyLootRarity, .achievementGrade
) { color: var(--anchor); }
html[data-color-mode='beige'] .downloadUnavailable .downloadPlatform { color: var(--color-warning); }
html[data-color-mode='beige'] .downloadPanelCopy p { font-size: 14px; }
html[data-color-mode='beige'] .downloadBenefits { font-size: 12px; }
html[data-color-mode='beige'] .downloadBenefits i { color: var(--color-success); }
html[data-color-mode='beige'] .downloadPanelIcon { color: #775027; background: #e4d4b9; border-color: var(--border-strong); box-shadow: none; }
html[data-color-mode='beige'] .tableScroll.isScrollable::before { color: var(--text-muted); }

/* Pair light text areas with light surfaces; retain the dark media previews. */
html[data-color-mode='beige'] :is(
  .itemCategoryPanel, .attackSection, .resistanceSection, .lootSection,
  .spellLevelList > div, .monsterLevelControl, .monsterVitals > li,
  .attackMeta span, .bestiaryStats span, .itemLook
) { background: var(--panel-fill); border-color: var(--panel-edge); }
html[data-color-mode='beige'] :is(.itemLibrary, .bestiaryStats span, .spellLevelList strong, .chanceValue, .attackName h3, .attackDamage, .defenseStat strong, .resistanceItem strong) { color: var(--font-color); }
html[data-color-mode='beige'] .leftPane .spellLevelList p { color: var(--font-color); }
html[data-color-mode='beige'] .itemLibrary .itemLook p { color: var(--color-success); text-shadow: none; }
html[data-color-mode='beige'] .itemTradeTable th { background: var(--surface-raised); color: var(--text-strong); }
html[data-color-mode='beige'] :is(.spell-preview-trigger:hover, .monsterCard:hover, .lootSortButton:hover, .lootSortButton.active, .lootSortButton.active span) { color: var(--anchor-hover); }
html[data-color-mode='beige'] :is(.rarityBadge.common, .resistanceItem.neutral strong, .lootSortButton span) { color: var(--text-muted); }
html[data-color-mode='beige'] :is(.rarityBadge.uncommon, .resistanceItem.resistant strong, .resistanceItem.resistant i, .defenseStat i, .defenseAbility .attackName i, .legacyLootChance) { color: var(--color-success); }
html[data-color-mode='beige'] .rarityBadge.rare { color: #285e85; }
html[data-color-mode='beige'] .rarityBadge.very-rare { color: #754087; }
html[data-color-mode='beige'] :is(.resistanceItem.weak strong, .resistanceItem.weak i, .attackName i) { color: var(--color-danger); }

/* Status messages keep their meaning without relying on pale red or green. */
html[data-color-mode='beige'] :is(.accountInfoTable .accountStatus, .accountPresence.isOffline) { color: var(--color-danger); }
html[data-color-mode='beige'] .accountPresence.isOnline { color: var(--color-success); }
html[data-color-mode='beige'] .leftPane :is(font[color='red'], [style='color: red;']) { color: var(--color-danger) !important; }
html[data-color-mode='beige'] .leftPane font[color='green'] { color: var(--color-success); }
html[data-color-mode='beige'] .leftPane font[color='orange'] { color: var(--color-warning); }

/* The character board has page-local ID rules, so scope these above their specificity. */
html[data-color-mode='beige'] .page_characterprofile .vocationLabel { color: var(--text-muted); }
html[data-color-mode='beige'] .page_characterprofile .characterPresence.isOnline { color: var(--color-success); }
html[data-color-mode='beige'] .page_characterprofile .characterPresence.isOffline { color: var(--color-danger); }
html[data-color-mode='beige'] #piv { background: var(--panel-fill); color: var(--font-color); }
html[data-color-mode='beige'] #piv_flex { color: var(--font-color); }
html[data-color-mode='beige'] #piv .piv_panel {
  background: var(--surface);
  border-color: var(--panel-edge);
  box-shadow: 0 6px 18px rgba(79, 58, 32, .1);
}
html[data-color-mode='beige'] #piv :is(#piv_i, #piv_o) {
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--panel-edge);
}
html[data-color-mode='beige'] #piv :is(#piv_lifetext, #piv_manatext) span { color: #fff; }
html[data-color-mode='beige'] #piv :is(.equipment_heading, .piv_panel_heading span, #piv_cap > strong, .outfit_row_name, .mount_card) { color: var(--text-strong); }
html[data-color-mode='beige'] #piv :is(.piv_panel_heading small, #piv_cap > span, .outfit_empty, .outfit_legend, .mount_card small) { color: var(--text-muted); }
html[data-color-mode='beige'] #piv .piv_panel_heading span::before,
html[data-color-mode='beige'] #piv #piv_s .profession_divider span::before {
  color: var(--anchor);
  background: var(--surface-raised);
  border-color: var(--border-strong);
}
html[data-color-mode='beige'] #piv .outfit_toggle {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--anchor);
  background: var(--surface-raised);
  border-color: var(--border-strong);
  box-shadow: none;
}
html[data-color-mode='beige'] #piv .outfit_toggle:hover { color: var(--anchor-hover); background: #ddc8a5; }
html[data-color-mode='beige'] #piv #piv_s .txt {
  color: var(--text-strong);
  background: var(--panel-fill);
  border-color: var(--panel-edge);
}
html[data-color-mode='beige'] #piv #piv_s .txt::before,
html[data-color-mode='beige'] #piv #piv_s :is(.profession_stat small, .profession_divider small) { color: var(--text-muted); }
html[data-color-mode='beige'] #piv #piv_s .txt::after { border-color: var(--panel-edge); background-color: var(--surface-raised); }
html[data-color-mode='beige'] #piv #piv_s .profession_divider { border-color: var(--panel-edge); }
html[data-color-mode='beige'] #piv #piv_s .profession_divider span { color: var(--text-strong); }
html[data-color-mode='beige'] #piv #piv_s #s_hp { color: var(--color-danger); }
html[data-color-mode='beige'] #piv #piv_s :is(#s_mp, #s_maglevel, .profession_stat) { color: #285e85; }
/* These glyphs have !important colors in the page; leave their sprite images intact. */
html[data-color-mode='beige'] #piv #s_hp::after { color: var(--color-danger) !important; }
html[data-color-mode='beige'] #piv :is(#s_mp, #s_skill_mining)::after { color: #285e85 !important; }
html[data-color-mode='beige'] #piv #s_skill_alchemy::after { color: #754087 !important; }
html[data-color-mode='beige'] #piv #s_skill_crafting::after { color: var(--anchor) !important; }
html[data-color-mode='beige'] #piv #s_skill_harvesting::after { color: var(--color-success) !important; }
html[data-color-mode='beige'] #piv :is(.outfit_row, .mount_card) { color: var(--font-color); background: var(--panel-fill); border-color: var(--panel-edge); }
html[data-color-mode='beige'] #piv .outfit_row.is_complete { background: #e8ead6; border-color: var(--border-success); }
html[data-color-mode='beige'] #piv .outfit_addon_status { color: var(--text-muted); background: var(--surface-raised); border-color: var(--panel-edge); }
html[data-color-mode='beige'] #piv .outfit_addon_status.is_unlocked { color: var(--color-success); background: var(--bg-success); border-color: var(--border-success); }
html[data-color-mode='beige'] #piv .outfit_addon_status.is_unlocked i { color: var(--color-success); background: var(--bg-success); border-color: var(--border-success); }
html[data-color-mode='beige'] #piv .item_tooltip { color: var(--font-color); background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow); }
html[data-color-mode='beige'] #piv .item_tooltip::after { border-top-color: var(--border-strong); }
html[data-color-mode='beige'] #piv .item_tooltip strong { color: var(--text-strong); }
html[data-color-mode='beige'] #piv .item_tooltip :is(.item_meta, .item_description) { color: var(--text-muted); border-color: var(--panel-edge); }
html[data-color-mode='beige'] #piv .item_tooltip :is(.item_base_stats, .item_rarity_stats) { color: var(--font-color); border-color: var(--panel-edge); }
html[data-color-mode='beige'] #piv .item_tooltip :is(.item_stats_label, .rarity_name) { color: var(--anchor); }
html[data-color-mode='beige'] #piv .item_rarity_1 .rarity_name { color: var(--color-danger); }
html[data-color-mode='beige'] #piv .item_rarity_2 .rarity_name { color: var(--color-success); }
html[data-color-mode='beige'] #piv .item_rarity_3 .rarity_name { color: #285e85; }
html[data-color-mode='beige'] #piv .item_rarity_5 .rarity_name { color: #754087; }

@media (max-width: 430px) {
  html[data-color-mode='beige'] #piv #piv_s { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .colorModeToggle { width: auto; margin: 0 10px 0 auto; }
  .siteNav .navToggle { margin-left: 0; }
}
@media (max-width: 480px) {
  .siteNav .sideNavMobileTitle { display: none; }
  .colorModeToggle { margin-left: 0; margin-right: auto; }
}

/* Clear row divisions on the parchment highscore table. */
html[data-color-mode='beige'] #highscoresTable tr:not(:last-child) > td { border-bottom: 1px solid rgba(112, 83, 47, .3); }