/* 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="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; } }