/* Deputy Portal themes. Default (Sheriff: pine + brass) needs no overrides.
   Each theme swaps the colour variables; portal.css uses --brass-rgb etc. with the default as fallback. */
:root { --brass-rgb: 193, 137, 63; }
[data-theme] { --line: rgba(var(--brass-rgb), .18); }

[data-theme="patrol"] {
  --night: #060a12; --pine: #0a1220; --pine-2: #0f1a2c; --pine-3: #16243a; --moss: #1d3354;
  --brass: #4f8fe0; --brass-hi: #7fb0f0; --brass-lo: #2f5f9e;
  --brass-rgb: 79, 143, 224; --hi-rgb: 127, 176, 240; --night-rgb: 6, 10, 18; --pine-rgb: 10, 18, 32; --pine2-rgb: 15, 26, 44; --moss-rgb: 29, 51, 84; --pine3-rgb: 22, 36, 58;
  --side-1: #070d18; --side-2: #09111f; --hero-1: #16263f;
}
[data-theme="crimson"] {
  --night: #0d0607; --pine: #160b0d; --pine-2: #1f1013; --pine-3: #2c171b; --moss: #42202a;
  --brass: #d0505a; --brass-hi: #e8838a; --brass-lo: #8e2f37;
  --brass-rgb: 208, 80, 90; --hi-rgb: 232, 131, 138; --night-rgb: 13, 6, 7; --pine-rgb: 22, 11, 13; --pine2-rgb: 31, 16, 19; --moss-rgb: 66, 32, 42; --pine3-rgb: 44, 23, 27;
  --side-1: #100708; --side-2: #140a0c; --hero-1: #301719;
}
[data-theme="emerald"] {
  --night: #04100c; --pine: #071812; --pine-2: #0b2219; --pine-3: #113024; --moss: #17452f;
  --brass: #2fbf86; --brass-hi: #6fd9ab; --brass-lo: #1d7a55;
  --brass-rgb: 47, 191, 134; --hi-rgb: 111, 217, 171; --night-rgb: 4, 16, 12; --pine-rgb: 7, 24, 18; --pine2-rgb: 11, 34, 25; --moss-rgb: 23, 69, 47; --pine3-rgb: 17, 48, 36;
  --side-1: #05120d; --side-2: #071710; --hero-1: #123526;
}
[data-theme="violet"] {
  --night: #0a0712; --pine: #110c1d; --pine-2: #181128; --pine-3: #221837; --moss: #33234f;
  --brass: #9b7be0; --brass-hi: #bba3f0; --brass-lo: #5f4796;
  --brass-rgb: 155, 123, 224; --hi-rgb: 187, 163, 240; --night-rgb: 10, 7, 18; --pine-rgb: 17, 12, 29; --pine2-rgb: 24, 17, 40; --moss-rgb: 51, 35, 79; --pine3-rgb: 34, 24, 55;
  --side-1: #0c0816; --side-2: #100b1c; --hero-1: #251a3c;
}
[data-theme="slate"] {
  --night: #08090b; --pine: #0e1013; --pine-2: #14171b; --pine-3: #1c2026; --moss: #2a3038;
  --brass-rgb: 193, 137, 63; --hi-rgb: 224, 171, 98; --night-rgb: 8, 9, 11; --pine-rgb: 14, 16, 19; --pine2-rgb: 20, 23, 27; --moss-rgb: 42, 48, 56; --pine3-rgb: 28, 32, 38;
  --side-1: #0a0b0d; --side-2: #0c0e11; --hero-1: #20242b;
}
[data-theme="halloween"] {
  --night: #0a0610; --pine: #120a18; --pine-2: #1a0f22; --pine-3: #24152e; --moss: #36203f;
  --brass: #f07a1a; --brass-hi: #ffa154; --brass-lo: #a34e0c;
  --brass-rgb: 240, 122, 26; --hi-rgb: 255, 161, 84; --night-rgb: 10, 6, 16; --pine-rgb: 18, 10, 24; --pine2-rgb: 26, 15, 34; --moss-rgb: 54, 32, 63; --pine3-rgb: 36, 21, 46;
  --side-1: #1a0c26; --side-2: #0d0713; --hero-1: #2e1838;
}
[data-theme="thanksgiving"] {
  --night: #100805; --pine: #1b0f0a; --pine-2: #22140d; --pine-3: #2a1810; --moss: #45281a;
  --brass: #d4532a; --brass-hi: #f0b84e; --brass-lo: #8e3216; --paper: #f3e6d4;
  --brass-rgb: 212, 83, 42; --hi-rgb: 240, 184, 78; --night-rgb: 16, 8, 5; --pine-rgb: 27, 15, 10; --pine2-rgb: 34, 20, 13; --moss-rgb: 69, 40, 26; --pine3-rgb: 42, 24, 16;
  --side-1: #1a120c; --side-2: #100a06; --hero-1: #4a2410;
}
/* Thanksgiving: a tablecloth over the top of the sidebar (logo and countdown), the wood table below it.
   --tg-cloth (set by theme.js) makes the scalloped edge end just above the menu */
:root[data-theme="thanksgiving"] .side {
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22280%22 height=%22128%22 viewBox=%220 0 280 128%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2222%22 height=%2222%22 patternUnits=%22userSpaceOnUse%22%3E%3Crect width=%2222%22 height=%2222%22 fill=%22%234a1d0c%22/%3E%3Crect width=%2211%22 height=%2222%22 fill=%22%239a4a1e%22 opacity=%22.45%22/%3E%3Crect width=%2222%22 height=%2211%22 fill=%22%239a4a1e%22 opacity=%22.45%22/%3E%3Crect width=%2222%22 height=%221.5%22 y=%225%22 fill=%22%23f3d9a8%22 opacity=%22.14%22/%3E%3Crect width=%221.5%22 height=%2222%22 x=%225%22 fill=%22%23f3d9a8%22 opacity=%22.14%22/%3E%3C/pattern%3E%3ClinearGradient id=%22g%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%22.1%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23000%22 stop-opacity=%22.18%22/%3E%3Cstop offset=%221%22 stop-color=%22%23000%22 stop-opacity=%22.4%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M0 0H280V106a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0Z%22 fill=%22%23000%22 opacity=%22.4%22 transform=%22translate%280 4%29%22/%3E%3Cpath d=%22M0 0H280V106a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0Z%22 fill=%22url%28%23p%29%22/%3E%3Cpath d=%22M0 0H280V106a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0a10 10 0 0 1 -20 0Z%22 fill=%22url%28%23g%29%22/%3E%3Cpath d=%22M0 102H280%22 stroke=%22%23f3d9a8%22 stroke-width=%221%22 stroke-dasharray=%224 4%22 opacity=%22.35%22/%3E%3C/svg%3E") top left / 100% var(--tg-cloth, 128px) no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 220, 170, .018) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 19px),
    repeating-linear-gradient(90deg, rgba(120, 70, 30, .05) 0 9px, transparent 9px 31px),
    linear-gradient(180deg, var(--side-1), var(--side-2));
}
[data-theme="thanksgiving"] .side-brand { text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
/* Thanksgiving: a dark wood grain in the sidebar */
[data-theme="thanksgiving"] .side, [data-theme="thanksgiving"] .portal-rail {
  background:
    repeating-linear-gradient(90deg, rgba(255, 220, 170, .018) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 19px),
    repeating-linear-gradient(90deg, rgba(120, 70, 30, .05) 0 9px, transparent 9px 31px),
    linear-gradient(180deg, var(--side-1), var(--side-2));
}
[data-theme="christmas"] {
  --night: #050d09; --pine: #08150f; --pine-2: #0c1e15; --pine-3: #122a1d; --moss: #1b3d2a;
  --brass: #e0484a; --brass-hi: #ff8080; --brass-lo: #9c2629;
  --brass-rgb: 224, 72, 74; --hi-rgb: 255, 128, 128; --night-rgb: 5, 13, 9; --pine-rgb: 8, 21, 15; --pine2-rgb: 12, 30, 21; --moss-rgb: 27, 61, 42; --pine3-rgb: 18, 42, 29;
  --side-1: #0a1d13; --side-2: #06110b; --hero-1: #3a1416;
}
[data-theme="halloween"] .side, [data-theme="halloween"] .portal-rail {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 120L120 0M0 120L60 0M0 120L120 60M0 120L0 0M0 120h120'/%3E%3Cpath d='M0 96q12 -4 18 -18q14 6 24 0M0 72q22 -6 34 -34q24 12 44 0M0 48q30 -8 50 -50'/%3E%3C/svg%3E") no-repeat left bottom / 150px,
    linear-gradient(180deg, var(--side-1), var(--side-2));
}

/* theme picker */
.th-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.th-card { padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--pine-3); color: var(--paper); cursor: pointer; text-align: left; font: inherit; }
.th-card:hover { border-color: var(--line); }
.th-card.on { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
/* the preview: a tiny portal (sidebar with nav lines, two cards, a button) */
.th-sw { position: relative; height: 66px; background: var(--b); overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.th-sw i { position: absolute; display: block; }
.th-m-side { left: 0; top: 0; bottom: 0; width: 24%; background: var(--s); border-right: 1px solid rgba(255, 255, 255, .06); }
.th-m-side::before { content: ''; position: absolute; left: 20%; right: 20%; top: 11px; height: 5px; border-radius: 3px; background: var(--a); }
.th-m-side::after { content: ''; position: absolute; left: 20%; right: 30%; top: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); box-shadow: 0 9px 0 rgba(255, 255, 255, .14), 0 18px 0 rgba(255, 255, 255, .1); }
.th-m-card { left: 31%; right: 7%; top: 9px; height: 22px; border-radius: 5px; background: var(--c); border: 1px solid color-mix(in srgb, var(--a) 40%, transparent); }
.th-m-card2 { left: 31%; width: 30%; top: 38px; height: 18px; border-radius: 5px; background: var(--c); }
.th-m-btn { left: 65%; width: 17%; top: 42px; height: 10px; border-radius: 6px; background: var(--a); }
.th-emb { position: absolute; right: 6px; bottom: 6px; width: 15px; height: 15px; color: #fff; opacity: .85; }
.th-emb svg { width: 100%; height: 100%; display: block; }
.th-card span { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.th-card i { font-style: normal; color: var(--brass-hi); }
.th-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Halloween: moon, bats, ghosts (behind the cards), and a countdown under the logo */
#th-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.th-moon { position: absolute; top: 26px; right: 6vw; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fde3b0, #e9a95c 70%); box-shadow: 0 0 60px 18px rgba(240, 150, 60, .22); opacity: .55; }
.th-bat { position: absolute; width: 22px; color: #000; opacity: .55; animation: th-bat 9s ease-in-out infinite; }
.th-bat svg { width: 100%; animation: th-flap .35s ease-in-out infinite alternate; transform-origin: center; }
.th-ghost { position: absolute; width: 44px; color: #fff; opacity: .06; animation: th-float 7s ease-in-out infinite; }
.th-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: -8px 6px 0; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--brass-hi); background: rgba(var(--brass-rgb), .1); border: 1px solid rgba(var(--brass-rgb), .3); }
.th-chip svg { width: 12px; height: 12px; }
@keyframes th-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -22px); } }
@keyframes th-bat { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-26px, 10px); } 66% { transform: translate(12px, -8px); } }
@keyframes th-flap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
@media (prefers-reduced-motion: reduce) { .th-ghost, .th-bat, .th-bat svg { animation: none; } }
@media (max-width: 900px) { .th-moon { width: 52px; height: 52px; top: 70px; } .th-ghost { display: none; } }

/* the theme button sits in the top corner of the sidebar (Portal and SOP) */
.side-user #theme-btn { position: absolute; top: 22px; right: 12px; width: 38px; height: 38px; transition: box-shadow .2s, color .2s, border-color .2s; }
.side-user #theme-btn svg { width: 18px; height: 18px; }
.side-user #theme-btn::before { content: ''; position: absolute; inset: -6px; } /* a slightly bigger click area */
/* the logo link stops short of the button, so a near miss doesn't open another page */
.side-brand { align-self: flex-start; } /* only as wide as its text */
.side-brand span { white-space: nowrap; }
/* the public home page, for the rare times it's wanted: small and faded above the account box */
.side-home { align-self: flex-start; margin: 0 0 -10px 10px; font-size: 11.5px; color: var(--muted); opacity: .55; text-decoration: none !important; transition: opacity .15s, color .15s; }
.side-home:hover { opacity: 1; color: var(--paper-dim); }
#theme-btn:hover, #theme-btn:focus-visible { color: var(--brass-hi); border-color: rgba(var(--brass-rgb), .55); box-shadow: 0 0 14px rgba(var(--brass-rgb), .45); }
#theme-btn.th-glow { color: var(--brass-hi); border-color: rgba(var(--brass-rgb), .6); animation: th-glow 1.6s ease-in-out infinite; }
@keyframes th-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brass-rgb), 0), 0 0 6px rgba(var(--brass-rgb), .25); } 50% { box-shadow: 0 0 0 5px rgba(var(--brass-rgb), .14), 0 0 20px rgba(var(--brass-rgb), .6); } }

/* first-visit note next to the theme button */
.th-intro { position: fixed; z-index: 70; width: 270px; padding: 14px 16px 12px; border-radius: 14px; background: var(--pine-2); border: 1px solid rgba(var(--brass-rgb), .45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset; animation: th-pop .35s cubic-bezier(.2, .9, .3, 1.2); }
.th-intro::before { content: ''; position: absolute; left: -7px; top: 20px; width: 12px; height: 12px; background: var(--pine-2); border-left: 1px solid rgba(var(--brass-rgb), .45); border-bottom: 1px solid rgba(var(--brass-rgb), .45); transform: rotate(45deg); }
.th-intro b { display: block; font: 700 16px var(--slab); color: var(--brass-hi); }
.th-intro p { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--paper-dim); }
.th-intro-act { display: flex; gap: 8px; }
@keyframes th-pop { from { opacity: 0; transform: translateX(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #theme-btn.th-glow, .th-intro { animation: none; } }

/* name picker (roster rows with two names) */
.th-h { margin: 14px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.th-sub { margin: 2px 0 12px; font-size: 13px; }
.th-names { display: flex; flex-wrap: wrap; gap: 8px; }
.th-name { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--pine-3); color: var(--paper); font: 600 13.5px var(--sans); cursor: pointer; }
.th-name:hover { border-color: var(--line); }
.th-name.on { border-color: var(--brass); color: var(--brass-hi); background: rgba(var(--brass-rgb), .1); }
.th-name small { color: var(--muted); font-weight: 500; margin-left: 4px; }

/* Christmas: falling snow, a snowman and a snow drift (behind the cards) */
.th-snow { position: absolute; top: -10px; border-radius: 50%; background: #fff; animation: th-fall linear infinite; }
.th-drift { position: absolute; left: 0; right: 0; bottom: -30px; height: 60px; background: radial-gradient(60% 100% at 70% 100%, rgba(235, 242, 248, .14), transparent 70%); }
@keyframes th-fall { from { transform: translate(0, 0); } 50% { transform: translate(18px, 52vh); } to { transform: translate(-6px, 106vh); } }
@media (prefers-reduced-motion: reduce) { .th-snow { animation: none; top: auto; } }
@media (max-width: 900px) { .th-snowman { display: none; } }

/* fallbacks for pages without the portal's pop-up and button styles (the SOP page); :where() keeps the portal's own rules in charge */
#theme-btn { display: grid; place-items: center; padding: 0; border-radius: 8px; border: 1px solid var(--line-soft); background: none; color: var(--paper-dim); cursor: pointer; font: inherit; }
:where(.th-modal) { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: max(16px, 5vh) 16px 16px; background: rgba(0, 0, 0, .6); overflow-y: auto; }
:where(.th-modal .modal-card) { width: min(760px, 100%); box-sizing: border-box; background: var(--pine-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
:where(.th-modal .modal-card h3) { margin: 0; font: 700 22px var(--slab); color: var(--paper); }
:where(.th-modal .modal-actions) { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* the snowman (Christmas): click him and he falls over in two pieces, then gets back up */
.th-snowman { position: fixed; right: 3vw; bottom: 6px; z-index: 3; width: 48px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .85; }
.th-snowman svg { width: 100%; display: block; overflow: visible; }
.th-snowman g { transform-box: fill-box; transition: transform .7s cubic-bezier(.3, 1.45, .5, 1); }
.th-snowman .sm-bot { transform-origin: 8% 100%; }
.th-snowman .sm-top { transform-origin: 50% 50%; transition-delay: .25s; }
.th-snowman.down .sm-bot { transform: rotate(-82deg); transition: transform .45s cubic-bezier(.5, 0, .9, .5); }
.th-snowman.down .sm-top { transform: translate(-46px, 27px) rotate(-200deg); transition: transform .55s cubic-bezier(.4, 0, .9, .6); transition-delay: 0s; }
@media (max-width: 1499px) { .th-snowman { z-index: -1; pointer-events: none; } } /* no free corner: stays behind the page */
@media (max-width: 900px) { .th-snowman { display: none; } }

/* profile picture: Discord or character */
.th-av { display: grid; grid-template-columns: 96px 96px 1fr; gap: 10px; } /* Discord and Character tiles the same size */
.th-avopt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--pine-3); color: var(--paper); font: 600 13px var(--sans); cursor: pointer; }
.th-avopt:hover { border-color: var(--line); }
.th-avopt.on { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); color: var(--brass-hi); }
.th-av img, .th-ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }
.th-ph { display: grid; place-items: center; box-sizing: border-box; border: 1px dashed var(--line); background: rgba(255, 255, 255, .04); color: var(--muted); font-style: normal; font-size: 18px; }
.th-slots { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--line-soft); }
.th-slot { display: flex; align-items: center; gap: 10px; }
.th-slot img, .th-slot .th-ph { width: 38px; height: 38px; font-size: 14px; }
.th-slot b { display: block; font-size: 13px; white-space: nowrap; }
.th-slot span { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.th-slot label { cursor: pointer; }
.th-link { padding: 0; border: 0; background: none; color: var(--muted); font: 12.5px var(--sans); text-decoration: underline; cursor: pointer; }
.th-link:hover { color: var(--paper-dim); }
@media (max-width: 700px) { .th-av { grid-template-columns: 96px 96px; } .th-slots { grid-column: 1 / -1; padding-left: 0; border-left: 0; } }

/* Appearance: Save / Cancel row and the little status tags on the picture slots */
.th-actions { align-items: center; }
.th-actions .th-note { margin: 0 auto 0 0; }
.th-actions .btn[disabled] { opacity: .45; cursor: default; }
.th-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font: 600 10.5px var(--sans); font-style: normal; color: var(--muted); border: 1px solid var(--line-soft); vertical-align: 1px; }
.th-tag.wait { color: var(--warn); border-color: rgba(224, 166, 75, .4); }
.th-slot b { display: inline; }

/* Settings → Pictures: character pictures waiting for approval */
.pic-list { display: grid; gap: 10px; margin-top: 12px; }
.pic-req { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 16px; align-items: center; padding: 12px 16px; }
.pic-req > img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.pic-who b { font-size: 15px; }
.pic-who small { display: block; margin-top: 3px; font-size: 12.5px; }
.pic-cur { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.pic-cur img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; opacity: .75; }
.pic-act { display: flex; gap: 8px; }
.pic-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 900px) { .pic-req { grid-template-columns: 56px 1fr; } .pic-req > img { width: 56px; height: 56px; } .pic-cur, .pic-act { grid-column: 1 / -1; } }

/* a soft glow on hover: a lighter take on the Appearance button's glow, in the theme's colour */
.side-nav a, .btn, .seg button, .staff-tabs a, .tool-row, a.staff-tile, .th-card, .th-name, .th-avopt { transition: box-shadow .2s, border-color .2s, background-color .2s, color .2s; }
.side-nav a:hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .32); background: rgba(var(--brass-rgb, 193, 137, 63), .06); box-shadow: 0 0 14px rgba(var(--brass-rgb, 193, 137, 63), .2); }
.side-nav a.on:hover { box-shadow: 0 0 16px rgba(var(--brass-rgb, 193, 137, 63), .28); }
.btn:hover, .btn:focus-visible { box-shadow: 0 0 10px rgba(var(--brass-rgb, 193, 137, 63), .25); }
.btn.danger:hover, .btn.danger:focus-visible { box-shadow: 0 0 10px rgba(217, 103, 92, .22); }
.btn[disabled]:hover { box-shadow: none; }
.seg button:hover:not(.on) { color: var(--paper); background: rgba(var(--brass-rgb, 193, 137, 63), .06); }
.staff-tabs a:hover { color: var(--brass-hi); }
a.staff-tile:hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .4); box-shadow: 0 0 18px rgba(var(--brass-rgb, 193, 137, 63), .2); }
/* every card: a faint glow, clickable ones (above) a little more */
.card { transition: border-color .2s, box-shadow .2s; }
.card:not(.modal-card):hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .26); box-shadow: 0 0 16px rgba(var(--brass-rgb, 193, 137, 63), .1); }
.tool-row:hover { background: rgba(var(--brass-rgb, 193, 137, 63), .05); }
.th-card:hover, .th-name:hover, .th-avopt:hover { box-shadow: 0 0 10px rgba(var(--brass-rgb, 193, 137, 63), .15); }
@media (prefers-reduced-motion: reduce) { .side-nav a, .btn, .seg button, a.staff-tile { transition: none; } }

/* the Appearance button on the public home page (top bar) and the Academy portal (next to the badge) */
.nav #theme-btn { width: 36px; height: 36px; flex: none; margin-right: 6px; }
.brand #theme-btn { width: 34px; height: 34px; flex: none; margin-left: auto; }

/* moving between the Deputy Portal, the SOP and the Academy: the page cross-fades and the sidebar stays put */
@view-transition { navigation: auto; }
.side, .portal-rail { view-transition-name: bcso-rail; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* the default moving background (every theme but Halloween and Christmas, which have their own): three soft lights in the
   theme's colours drifting slowly. Paused with "Still" in Appearance, and by itself while the tab or window isn't in use. */
#th-fx.th-amb i { position: absolute; border-radius: 50%; will-change: transform; }
#th-fx.th-amb i:nth-child(1) { width: 70vmax; height: 70vmax; left: -22vmax; top: -32vmax; background: radial-gradient(circle, rgba(var(--brass-rgb), .11), transparent 62%); animation: th-amb1 46s ease-in-out infinite alternate; }
#th-fx.th-amb i:nth-child(2) { width: 75vmax; height: 75vmax; right: -28vmax; bottom: -38vmax; background: radial-gradient(circle, rgba(var(--hi-rgb, 224, 171, 98), .07), transparent 62%); animation: th-amb2 61s ease-in-out infinite alternate; }
#th-fx.th-amb i:nth-child(3) { width: 42vmax; height: 42vmax; left: 34vw; top: 38vh; background: radial-gradient(circle, rgba(var(--brass-rgb), .05), transparent 60%); animation: th-amb3 53s ease-in-out infinite alternate; }
@keyframes th-amb1 { to { transform: translate(28vw, 22vh) scale(1.15); } }
@keyframes th-amb2 { to { transform: translate(-24vw, -18vh) scale(.9); } }
@keyframes th-amb3 { to { transform: translate(-20vw, 14vh) scale(1.25); } }
.th-still #th-fx, .th-still #th-fx *, .th-idle #th-fx, .th-idle #th-fx *, .th-still .th-snowman, .th-idle .th-snowman { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { #th-fx.th-amb i { animation: none; } }

/* Appearance: your own colours, and the background switch */
.th-cust-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 2px; font-size: 13px; color: var(--paper-dim); }
.th-cust-row > b { color: var(--paper); font-weight: 600; }
.th-cust-row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.th-cust-row input[type=color] { width: 36px; height: 28px; padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.th-cust-row small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.th-motion { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.th-motion button { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--paper-dim); font: 600 13px Inter, sans-serif; cursor: pointer; }
.th-motion button.on { color: var(--brass-hi); border-color: rgba(var(--brass-rgb), .55); background: rgba(var(--brass-rgb), .12); }
.th-motion span { font-size: 12px; color: var(--muted); margin-left: 6px; }

/* Appearance: your own colours (8 of them), started from any theme */
.th-own { margin: 12px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.th-own-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.th-own-head b { color: var(--paper); }
.th-own-head label { display: inline-flex; align-items: center; gap: 8px; color: var(--paper-dim); }
.th-own-head select { padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--pine-2, #10200f); color: var(--paper); font: 500 13px Inter, sans-serif; }
.th-own-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.th-own-grid label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--paper-dim); cursor: pointer; min-width: 0; }
.th-own-grid input[type=color] { flex: none; width: 34px; height: 26px; padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.th-own-grid span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-own small { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .th-own-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* three more colour themes */
[data-theme="ocean"] {
  --night: #040d0f; --pine: #071518; --pine-2: #0b1e22; --pine-3: #10292e; --moss: #173d44;
  --brass: #2cb5c4; --brass-hi: #6fd6e0; --brass-lo: #1b7680;
  --brass-rgb: 44, 181, 196; --hi-rgb: 111, 214, 224; --night-rgb: 4, 13, 15; --pine-rgb: 7, 21, 24; --pine2-rgb: 11, 30, 34; --moss-rgb: 23, 61, 68; --pine3-rgb: 16, 41, 46;
  --side-1: #051012; --side-2: #071417; --hero-1: #123238;
}
[data-theme="ember"] {
  --night: #0d0905; --pine: #17110b; --pine-2: #201810; --pine-3: #2c2116; --moss: #42311f;
  --brass: #e8913a; --brass-hi: #f5b46e; --brass-lo: #9c5a1d;
  --brass-rgb: 232, 145, 58; --hi-rgb: 245, 180, 110; --night-rgb: 13, 9, 5; --pine-rgb: 23, 17, 11; --pine2-rgb: 32, 24, 16; --moss-rgb: 66, 49, 31; --pine3-rgb: 44, 33, 22;
  --side-1: #110c07; --side-2: #150f09; --hero-1: #33251a;
}
[data-theme="rose"] {
  --night: #0c0609; --pine: #170c13; --pine-2: #20111a; --pine-3: #2c1724; --moss: #432236;
  --brass: #e070a8; --brass-hi: #f0a0c8; --brass-lo: #9a3f6c;
  --brass-rgb: 224, 112, 168; --hi-rgb: 240, 160, 200; --night-rgb: 12, 6, 9; --pine-rgb: 23, 12, 19; --pine2-rgb: 32, 17, 26; --moss-rgb: 67, 34, 54; --pine3-rgb: 44, 23, 36;
  --side-1: #10080d; --side-2: #140a10; --hero-1: #321a29;
}

/* the moving background, a little more present: brighter lights, and specks of dust drifting up (paused like the rest) */
#th-fx.th-amb i:nth-child(1) { background: radial-gradient(circle, rgba(var(--brass-rgb), .2), transparent 62%); animation-duration: 34s; }
#th-fx.th-amb i:nth-child(2) { background: radial-gradient(circle, rgba(var(--hi-rgb, 224, 171, 98), .13), transparent 62%); animation-duration: 44s; }
#th-fx.th-amb i:nth-child(3) { background: radial-gradient(circle, rgba(var(--brass-rgb), .12), transparent 60%); animation-duration: 39s; }
#th-fx.th-amb b { position: absolute; bottom: -10px; border-radius: 50%; background: rgba(var(--hi-rgb, 224, 171, 98), .9); box-shadow: 0 0 6px rgba(var(--brass-rgb), .6);
  animation-name: th-mote, th-sway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
@keyframes th-mote { 0% { transform: translateY(0); } 100% { transform: translateY(-110vh); } }
@keyframes th-sway { from { margin-left: -14px; } to { margin-left: 14px; } }
@media (prefers-reduced-motion: reduce) { #th-fx.th-amb b { display: none; } }

/* the moving background, calmer: no glow, just a few faint sheriff stars drifting slowly behind the slightly see-through cards */
#th-fx.th-amb i, #th-fx.th-amb b { display: none; }
#th-fx.th-amb .th-star { position: absolute; color: rgb(var(--hi-rgb, 224, 171, 98)); opacity: .06; animation: th-star 16s ease-in-out infinite; }
#th-fx.th-amb .th-star svg { display: block; width: 100%; height: auto; }
@keyframes th-star { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(12px, -20px) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { #th-fx.th-amb .th-star { animation: none; } }
/* saved custom themes (Appearance → Custom → Saved) */
.th-own-tools { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-sv-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--paper-dim); font: 500 13px Inter, sans-serif; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.th-sv-toggle:hover { color: var(--paper); border-color: rgba(var(--brass-rgb, 201, 162, 75), .5); }
.th-sv-toggle em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 9px; background: rgba(var(--brass-rgb, 201, 162, 75), .18); color: var(--brass-hi, var(--brass)); }
.th-sv-toggle svg { transition: transform .2s; }
.th-sv-toggle.on { color: var(--paper); border-color: rgba(var(--brass-rgb, 201, 162, 75), .6); }
.th-sv-toggle.on svg { transform: rotate(180deg); }
.th-saved { margin: 0 0 12px; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, .16); border: 1px solid var(--line); animation: th-sv-in .18s ease-out; }
@keyframes th-sv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.th-sv-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.th-sv { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color .15s; }
.th-sv:hover { border-color: rgba(var(--brass-rgb, 201, 162, 75), .5); }
.th-sv.on { border-color: var(--brass); }
.th-sv button { border: 0; background: none; color: var(--paper); font: 500 13px Inter, sans-serif; cursor: pointer; }
.th-sv > button:first-child { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 7px; }
.th-sv-dots { display: inline-flex; }
.th-sv-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); margin-left: -4px; }
.th-sv-dots i:first-child { margin-left: 0; }
.th-sv-x { padding: 0 8px; color: var(--muted) !important; border-left: 1px solid var(--line) !important; font-size: 15px !important; transition: color .15s, background .15s; }
.th-sv-x:hover { color: var(--paper) !important; }
.th-sv-x.arm { font-size: 12px !important; color: #fff !important; background: rgba(200, 60, 60, .55); }
.th-sv-none { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.th-sv-add { display: flex; gap: 8px; }
.th-sv-add input { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--pine-2, #10200f); color: var(--paper); font: 500 13px Inter, sans-serif; }
.th-sv-add input:focus { outline: none; border-color: var(--brass); }
/* first time: point out the Saved button */
.th-own-tools { position: relative; }
.th-sv-toggle.th-sv-new { position: relative; color: var(--paper); border-color: rgba(var(--brass-rgb, 201, 162, 75), .75); animation: th-sv-ping 1.8s ease-out 0s 5; }
.th-sv-toggle.th-sv-new::after { content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--brass-hi, var(--brass)); box-shadow: 0 0 0 2px var(--pine-2, #10200f), 0 0 8px rgba(var(--brass-rgb, 201, 162, 75), .8); }
@keyframes th-sv-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--brass-rgb, 201, 162, 75), .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(var(--brass-rgb, 201, 162, 75), 0); } }
.th-sv-tip { position: absolute; top: calc(100% + 9px); left: 0; z-index: 3; white-space: nowrap; padding: 5px 10px; border-radius: 7px; background: var(--brass); color: #17120a; font: 600 12px Inter, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none; animation: th-sv-tip 7s ease forwards; }
.th-sv-tip::before { content: ''; position: absolute; top: -5px; left: 18px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
@keyframes th-sv-tip { 0% { opacity: 0; transform: translateY(-4px); } 6%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .th-sv-toggle.th-sv-new, .th-sv-tip { animation: none; } }
/* your own colours: background effect and More shades */
.th-own-fx { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--paper-dim); }
.th-own-fx .th-motion button { padding: 4px 11px; font-size: 12.5px; }
.th-more-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 12.5px Inter, sans-serif; cursor: pointer; transition: color .15s; }
.th-more-toggle:hover, .th-more-toggle.on { color: var(--paper); }
.th-more-toggle em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 9px; background: rgba(var(--brass-rgb, 201, 162, 75), .18); color: var(--brass-hi, var(--brass)); }
.th-more-toggle svg { transition: transform .2s; }
.th-more-toggle.on svg { transform: rotate(180deg); }
.th-more { margin-top: 10px; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, .16); border: 1px solid var(--line); animation: th-sv-in .18s ease-out; }
.th-more-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
/* the extra background effects for your own theme (Appearance → Your own colours → Background effect) */
#th-fx.th-amb .th-p { position: absolute; display: block; will-change: transform; }
#th-fx.th-fireflies .th-p { width: var(--s); height: var(--s); border-radius: 50%; background: rgb(var(--hi-rgb, 224, 171, 98)); box-shadow: 0 0 10px 3px rgba(var(--hi-rgb, 224, 171, 98), .45); opacity: .5;
  animation-name: th-wander, th-blink; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes th-wander { 0% { transform: translate(0, 0); } 33% { transform: translate(40px, -30px); } 66% { transform: translate(-25px, -60px); } 100% { transform: translate(30px, 20px); } }
@keyframes th-blink { 0%, 40% { opacity: .08; } 70%, 100% { opacity: .55; } }
#th-fx.th-embers .th-p { bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: rgb(var(--hi-rgb, 224, 171, 98)); box-shadow: 0 0 6px 1px rgba(var(--brass-rgb, 193, 137, 63), .7);
  animation: th-rise linear infinite; }
@keyframes th-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .55; } 70% { opacity: .35; } 100% { transform: translate(var(--dx), -105vh); opacity: 0; } }
#th-fx.th-leaves .th-p { top: -30px; width: var(--s); color: rgb(var(--brass-rgb, 193, 137, 63)); opacity: .14; animation: th-leaf linear infinite; }
#th-fx.th-leaves .th-p svg { display: block; width: 100%; height: auto; }
/* Thanksgiving: a warm glow, falling maple leaves, and a turkey you can click */
#th-fx.th-dinner .dn-light { position: absolute; border-radius: 50%; animation: dn-flicker 5s ease-in-out infinite; }
#th-fx.th-dinner .dn-l1 { width: 70vmax; height: 70vmax; right: -26vmax; bottom: -34vmax; background: radial-gradient(circle, rgba(232, 137, 46, .15), transparent 62%); }
#th-fx.th-dinner .dn-l2 { width: 55vmax; height: 55vmax; left: -20vmax; top: -24vmax; background: radial-gradient(circle, rgba(240, 184, 78, .08), transparent 62%); animation-duration: 6.5s; }
#th-fx.th-dinner .dn-leaf { position: absolute; top: -30px; width: var(--s); color: #d4532a; opacity: .3; animation: th-leaf linear infinite; }
#th-fx.th-dinner .dn-leaf:nth-of-type(3n) { color: #f0b84e; } #th-fx.th-dinner .dn-leaf:nth-of-type(3n + 1) { color: #a8401e; }
#th-fx.th-dinner .dn-leaf svg { display: block; width: 100%; height: auto; }
#th-fx.th-dinner .dn-it { opacity: .62; }
@keyframes dn-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .8; } }
.th-turkey { position: fixed; right: 2.5vw; bottom: 2px; z-index: 3; display: flex; align-items: flex-end; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; }
.th-turkey svg { display: block; width: 100%; overflow: visible; }
.tk-bird { width: 120px; }
.tk-pump { width: 50px; margin-bottom: 2px; }
.th-turkey .tk-tail { transform-box: view-box; transform-origin: 50px 64px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.th-turkey .tk-head { transform-box: view-box; transform-origin: 50px 52px; animation: tk-bob 2.6s ease-in-out infinite; }
.th-turkey.gob .tk-tail { transform: scale(1.12); animation: tk-shake .12s 6 alternate .3s; }
.th-turkey.gob .tk-head { animation: tk-gob .1s 10 alternate; }
.tk-say { position: absolute; right: 64px; bottom: 122px; padding: 5px 10px; border-radius: 12px 12px 12px 2px; white-space: nowrap; font: 700 13px var(--sans); color: #2a160b; background: #f6dfb6;
  opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .2s, transform .2s; pointer-events: none; }
.th-turkey.gob .tk-say { opacity: 1; transform: none; }
.th-candles { position: fixed; right: calc(2.5vw + 178px); bottom: 0; z-index: 3; width: 86px; padding: 0; border: 0; background: none; cursor: pointer; }
.th-candles svg { width: 100%; display: block; overflow: visible; }
.th-candles .cd-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: cd-flick 1.4s ease-in-out infinite; animation-delay: var(--d); transition: opacity .25s, transform .25s; }
.th-candles .cd-glow { animation: cd-glow 2.2s ease-in-out infinite; animation-delay: var(--d); transition: opacity .3s; }
.th-candles.out .cd-flame { opacity: 0; transform: scale(.2) translateY(4px); }
.th-candles.out .cd-glow { opacity: 0; animation: none; }
.th-candles.out .cd-c:nth-child(2) .cd-flame, .th-candles.out .cd-c:nth-child(2) .cd-glow { transition-delay: .12s; }
.th-candles.out .cd-c:nth-child(3) .cd-flame, .th-candles.out .cd-c:nth-child(3) .cd-glow { transition-delay: .24s; }
@keyframes cd-flick { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.06, .94) rotate(-3deg); } 50% { transform: scale(.95, 1.07) rotate(2deg); } 75% { transform: scale(1.03, .97) rotate(-1deg); } }
@keyframes cd-glow { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes tk-bob { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg) translateY(1px); } }
@keyframes tk-gob { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes tk-shake { from { transform: scale(1.12) rotate(-2deg); } to { transform: scale(1.12) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .th-candles .cd-flame, .th-candles .cd-glow, #th-fx.th-dinner .dn-light, #th-fx.th-dinner .dn-leaf, .th-turkey .tk-head, .th-turkey.gob .tk-head, .th-turkey.gob .tk-tail { animation: none; } }
@media (max-width: 1499px) { .th-turkey, .th-candles { z-index: -1; pointer-events: none; } } /* no free corner: stays behind the page */
@media (max-width: 900px) { .th-turkey, .th-candles { display: none; } }
/* Custom → Holiday themes: the one that's out of its month in the picker */
.th-hol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; }
.th-hol > span { color: var(--paper-dim); font-weight: 600; }
.th-hol small { color: var(--muted); font-size: 12px; }
.th-holb { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--pine-3); color: var(--paper); font: 600 13px var(--sans); cursor: pointer; }
.th-holb:hover { border-color: var(--line); }
.th-holb.on { border-color: var(--brass); color: var(--brass-hi); background: rgba(var(--brass-rgb), .1); }
@keyframes th-leaf { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(calc(var(--dx) * -.5), 55vh) rotate(calc(var(--r) * .5)); } 100% { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
#th-fx.th-rain .th-p { top: -90px; width: 1px; height: var(--h); background: linear-gradient(180deg, transparent, rgba(var(--hi-rgb, 224, 171, 98), .22)); animation: th-rain linear infinite; }
@keyframes th-rain { from { transform: translate(0, 0); } to { transform: translate(-40px, 110vh); } }
@media (prefers-reduced-motion: reduce) { #th-fx.th-amb .th-p { animation: none; } #th-fx.th-rain, #th-fx.th-embers { display: none; } }
/* Background effect row (every theme except Halloween and Christmas) */
.th-fxrow { margin-bottom: 8px; }
.th-fxrow button { padding: 5px 11px; font-size: 12.5px; }

/* Phones: pop-ups fit the screen and scroll inside, with their buttons (Close, Save) pinned to the bottom so they're always in reach */
@media (max-width: 820px) {
  .modal, .modal.top, .th-modal, .dlg { place-items: center; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .modal-card, .modal-card.wide, .modal-card.file, .th-modal .modal-card, .dlg-card { max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 0; }
  .modal-actions, .dlg-act { position: sticky; bottom: 0; z-index: 3; flex-wrap: wrap; margin: 14px -14px 0; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); background: inherit; border-top: 1px solid var(--line); border-radius: 0; box-shadow: 0 -10px 18px rgba(0, 0, 0, .25); }
  .modal-actions > *, .dlg-act > * { flex: 1 1 auto; min-height: 40px; }
  .modal-card .chip, .dlg-card .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .card-head { flex-wrap: wrap; row-gap: 6px; }
  .card-head > * { min-width: 0; max-width: 100%; }
  .card-head .chip { white-space: normal; }
  .tf-grid, #view.tf-wide .tf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-head { padding: 16px 14px; flex-direction: column; align-items: flex-start; }
  .menu-btn { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  html:has(.modal:not([hidden]), .th-modal, .dlg) .menu-btn { visibility: hidden; }
}
/* the Halloween badge is square: keep its shape inside the badge's spot */
img[src*="badge-halloween"] { object-fit: contain; }
/* Class A reminder before a character picture is uploaded */
.th-ca-hint { margin: -6px 0 12px; font-size: 12.5px; color: var(--muted); }
.th-ca-hint b { color: var(--brass-hi); font-weight: 600; }
.th-classa { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.th-ca-card { width: min(420px, 100%); box-sizing: border-box; padding: 20px 22px; border-radius: 14px; background: var(--pine-2, #161a20); border: 1px solid var(--line); border-top: 3px solid var(--brass); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); color: var(--paper); }
.th-ca-eye { margin: 0 0 4px; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-hi); }
.th-ca-card > b { display: block; font: 700 20px var(--slab); margin-bottom: 8px; }
.th-ca-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--paper-dim, var(--paper)); }
.th-ca-act { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* the Colonel's Discord role icon is a wide, thin eagle with empty space above and below it (and sits a little low):
   shown bigger and nudged up everywhere it appears, so it reads like the other rank icons. Takes no extra room. */
img[src*="/role-icons/1489010732077940897/"] { transform: scale(1.4) translateY(-5%); }

.th-tour { position: fixed; z-index: 75; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(400px, calc(100vw - 32px)); padding: 14px 16px 12px; border-radius: 14px;
  background: var(--pine-2); border: 1px solid rgba(var(--brass-rgb), .45); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: th-tour-in .35s ease-out; }
@keyframes th-tour-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.th-tour small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); }
.th-tour b { display: block; margin-top: 2px; font: 700 19px var(--slab); color: var(--brass-hi); }
.th-tour p { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--paper-dim); }
.th-tour-bar { height: 3px; border-radius: 3px; background: rgba(var(--brass-rgb), .15); overflow: hidden; margin: 10px 0 12px; }
.th-tour-bar i { display: block; height: 100%; width: 0; background: var(--brass-hi); }
.th-tour-act { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .th-tour { animation: none; } }