/* ──────────────────────────────────────────────────────────────────────────
DESIGN SYSTEM — token reference
──────────────────────────────────────────────────────────────────────────
Use the variables below for new UI. They are the single source of truth
for colors, font sizes, spacing, and radii. See DESIGN_SYSTEM.md at the
repo root for the full spec, button modifier table, and usage rules.
Quick reference:
• Font sizes: --fs-micro 10px · --fs-xs 11px · --fs-sm 12px ·
--fs-md 13px · --fs-base 14px · --fs-lg 16px ·
--fs-xl 18px · --fs-2xl 22px
• Section headings (uppercase tracked labels) use --fs-xs + --tracking-wide.
• Body copy uses --fs-sm. Form labels use --fs-xs.
• Semantic colors: --c-good (green) · --c-warn (amber) · --c-bad (red) ·
--c-accent (teal) · --c-link (indigo).
• Surface colors: --c-bg (page) · --c-surface (cards) ·
--c-surface-2 (raised) · --c-border / --c-border-2.
• Text: --c-text (primary) · --c-text-2 (secondary) ·
--c-text-3 (muted/labels) · --c-text-faint.
• Spacing scale: --sp-1 4px ··· --sp-6 24px.
• Radii: --r-sm 3px · --r-md 5px · --r-lg 8px.
Buttons:
• Always start with `.tab-btn` as the base.
• Add modifiers — `.btn-confirm`, `.btn-danger`, `.btn-warning`,
`.btn-info`, `.btn-muted`, `.btn-small`, `.btn-micro`. Do NOT introduce new bases.
*/
:root {
/* Font sizes */
--fs-micro: 10px;
--fs-xs: 11px;
--fs-sm: 12px;
--fs-md: 13px;
--fs-base: 14px;
--fs-lg: 16px;
--fs-xl: 18px;
--fs-2xl: 22px;
--tracking-wide: 0.08em;
--tracking-wider: 0.12em;
/* Surfaces / borders */
--c-bg: #0d1117;
--c-surface: #121a26;
--c-surface-2: #0f1724;
--c-border: #1d2d42;
--c-border-2: #1a2233;
/* Text */
--c-text: #e2e8f0;
--c-text-2: #cfd9e6;
--c-text-3: #8899aa;
--c-text-faint: #6a7d96;
/* Semantic */
--c-accent: #33E4DE;
--c-good: #1D9E75;
--c-warn: #d4aa44;
--c-bad: #e87070;
--c-link: #7289da;
--c-special: #a890d8;
/* Loot bucket colors — used on the wishlist button + the row's
picked-state stroke + the bucket chips across All Reservations
and Raid Mode. MS = green primary, OS = blue secondary, Trophy
reuses --c-special (purple). Kept distinct from --c-warn so
neither bucket clashes with actual warning copy elsewhere. */
--c-ms: var(--c-good);
--c-os: #5b9bd5;
/* Spacing */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 10px;
--sp-4: 14px;
--sp-5: 18px;
--sp-6: 24px;
/* Radii */
--r-sm: 3px;
--r-md: 5px;
--r-lg: 8px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Trebuchet MS', sans-serif;
background: var(--c-bg);
color: #dddddd;
min-height: 100vh;
padding: 0.75rem;
}
/* Scroll-lock the page underneath any open modal. setupModalScrollLock()
toggles .modal-open on BOTH and when any modal overlay is
visible — the [id$="-modal"] HTML modals AND the position:fixed;inset:0 JS
overlays. Locking both elements covers whichever is the real scroll
container; the padding-right reserves the (now-hidden) scrollbar's width so
the page behind the modal doesn't jump. Only the modal's own scrollable
content scrolls. */
html.modal-open, body.modal-open { overflow: hidden; }
body.modal-open { padding-right: calc(0.75rem + var(--modal-sbw, 0px)); }
/* Tight 1px-black 4-corner outline + soft drop. Pulled out into a
variable so the same stroke can be applied opt-in to specific places
(class-colored player labels, roster + attendance table cells) without
reapplying everywhere. Earlier we had this on `body` and opted out a
long list of containers; the result smudged buttons / form inputs /
the white header card. Inverted to opt-in: nothing has the stroke
unless it's explicitly in the list below. */
:root {
--txt-stroke:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
0 1px 2px rgba(0, 0, 0, 0.45);
}
/* Apply the stroke to anything with a class color, nothing else. The
utility class `.cls-color` covers ad-hoc inline-styled cells (roster
name, attendance name, buffs buff name, the class dropdowns); the
semantic selectors below cover the named class-colored elements that
already had a class hook. White-only text (player names on cards),
neutral-gray meta lines, and form chrome stay shadow-free. */
.cls-color,
.player-card .player-meta,
.callout-card .player-meta,
.at-timeoff-name,
.recruit-card li strong,
.recruit-contact-name,
.tt-provider,
.buff-tag {
text-shadow: var(--txt-stroke);
}
/* ── Toast ── */
#toast {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
padding: 7px 14px;
border-radius: 5px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
z-index: 999;
}
#toast.show { opacity: 1; }
#toast.ok { background: #0d2e22; border: 1px solid #1D9E7566; color: var(--c-good); }
#toast.err { background: #2e0d0d; border: 1px solid #c0303066; color: #e24b4a; }
#toast.warn { background: #2e250d; border: 1px solid #d4aa4466; color: var(--c-warn); }
/* ── Brand strip ── */
/* Thin VM-teal horizon line at the very top of the viewport. Same
color family as the .prog-overall-fill progression bar (--c-accent
#33E4DE → #66EDE8), so the brand cue at the top reads as a sibling
of the page's hero progress visual. Gradient fades to transparent
at the edges so it reads as a centered glow rather than a hard bar
across the screen. Position:fixed so the cue persists as the user
scrolls past the header — z-index sits above the sticky header
(z:50) so the strip stays the topmost pixel row of the page.
pointer-events:none so it never intercepts clicks on header chrome
below. The downward box-shadow gives the strip a soft neon glow
that bleeds onto the top of the header card, tying the brand color
to the page chrome below. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(51, 228, 222, 0.45) 5%,
rgba(51, 228, 222, 0.95) 30%,
rgba(102, 237, 232, 0.95) 50%,
rgba(51, 228, 222, 0.95) 70%,
rgba(51, 228, 222, 0.45) 95%,
transparent 100%
);
box-shadow: 0 0 14px 2px rgba(51, 228, 222, 0.42);
z-index: 200;
pointer-events: none;
transition: box-shadow .25s ease;
/* transform-origin pins the scale animation to the left edge so
the loading bar reads as "fill from left" rather than a center-
expanding pulse. */
transform-origin: left center;
}
/* Brand strip plays a single "loading bar fills" animation on every
tab switch — left-edge anchored scaleX from 0 → ~0.75 → 1.0 with
the opacity easing in. JS adds .is-loading on showTab and clears
it after the animation duration; consecutive tab switches force a
reflow + restart so rapid clicks each get a fresh sweep. The
animation inherits the strip's current color (info teal, warn
amber, urgent red) since the body.notice-* tints stack with
.is-loading via the same body::before rule. */
body.is-loading::before {
animation: brand-load-sweep 0.55s ease-out;
}
@keyframes brand-load-sweep {
0% {
opacity: 0.35;
transform: scaleX(0);
}
55% {
opacity: 1;
transform: scaleX(0.75);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
/* ── Site notice banner ── */
/* Global banner above the header. Edited from the Account tab "Site
notice" card. Severity = info | warn | urgent; the corresponding
body class also tints the top brand strip (body::before) so the
severity color carries even after the banner scrolls offscreen.
Hidden by default (display:none in markup); JS toggles display +
className when SITE_NOTICE.enabled flips. */
.site-notice {
/* Edge-to-edge layout that sits flush against the top brand
strip. Body has padding:0.75rem on desktop and padding:4px 0
on mobile, so we use negative margins to neutralize ALL of
that and extend the banner from viewport-top to viewport-edge
(mirrors the same trick .header-wrap uses below us). Earlier
this used margin:-4px 0 8px 0 which only handled the mobile
case — desktop ended up with ~8px of dead space above the
notice that read as "the text isn't vertically centered".
8px bottom margin gives breathing room before the header card. */
margin: -0.75rem -0.75rem 8px -0.75rem;
/* Asymmetric vertical padding (16 top / 10 bottom) shifts the
text ~3px below geometric center to compensate for the
optical weight at the top of the banner — the brand strip
(fixed at y=0) plus its 14px downward glow plus the banner's
severity-tinted gradient (full saturation at top, fading to
transparent at bottom) all stack visual heft on the upper
half of the banner. With symmetric 13/13 padding the text
appears too high; bumping top padding nudges it visually
centered. */
padding: 16px 0.75rem 10px;
/* No solid border — each severity class paints a vertical
linear-gradient background that fades to transparent at the
bottom edge so the banner blends into the page below instead
of reading as a hard panel boundary above the header card. */
}
.site-notice-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
/* Center the cluster as a whole, AND center each row's text when
the banner wraps to multiple lines on narrow viewports — per
user feedback: text on the banner should all be centered. */
justify-content: center;
text-align: center;
gap: 12px;
flex-wrap: wrap;
}
.site-notice-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
flex-shrink: 0;
}
.site-notice-message {
/* No flex-grow — let the message size to its content so the badge
+ message + CTA cluster naturally centers as one unit. (Earlier
flex:1 1 280px stretched the message to fill leftover space,
which pushed the cluster's center off when the message was
short.) Bold weight per design — the notice is the page's hero
attention element and shouldn't read as quiet body copy. */
flex: 0 1 auto;
color: var(--c-text);
font-size: var(--fs-sm);
line-height: 1.45;
font-weight: 700;
}
.site-notice-cta { flex-shrink: 0; }
/* Carousel dots — only shown when there are 2+ messages to rotate
between. Each dot is a click-target to jump to that index.
White stroke + fill (rather than inheriting the severity tint via
currentColor) so the dots read consistently against any severity
gradient. Inactive dots stay hollow + dim; the active one fills
solid white at 1.0 opacity. */
.site-notice-dots { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
.site-notice-dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid #fff;
background: transparent;
padding: 0;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.15s ease, background 0.15s ease;
}
.site-notice-dot:hover { opacity: 0.85; }
.site-notice-dot.is-active {
background: #fff;
opacity: 1;
}
/* Fade-swap when rotating between messages — _scheduleNoticeRotate
adds .notice-fading, swaps innerHTML mid-fade, then removes the
class to fade back in. Only the inner content fades; the banner's
background tint stays steady. */
.site-notice .site-notice-inner { transition: opacity 0.35s ease; }
.site-notice.notice-fading .site-notice-inner { opacity: 0; }
/* Admin form: rotating-messages list. Each row stacks the textarea +
CTA inputs and gets a small remove button at the top. Compact so
3-4 rows still fit in the card without overflowing. */
.notice-msg-list {
display: flex;
flex-direction: column;
gap: 0;
/* Cap the list height so a 5-message Site notice card doesn't
balloon the admin section vertically — paired with overflow-y
auto for scroll. Same idea as the Backups card's .admin-pw-list
(260px / 456px) — sized for ~3 message rows visible at once. */
max-height: 360px;
overflow-y: auto;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
background: var(--c-surface);
}
.notice-msg-row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
/* No outer border — the .notice-msg-list container holds one.
Each row gets a bottom divider line; the last row drops it
so the list doesn't end on a stray line. */
border: none;
border-bottom: 1px solid var(--c-border);
border-radius: 0;
background: var(--c-surface-2);
}
.notice-msg-list > .notice-msg-row:last-child { border-bottom: none; }
/* Disabled message rows dim hard (~35%) so the editor reads as
"staged but not live" at a glance. Button row stays full opacity
(it's the action surface) so the user can clearly see + click
Enable / Remove. */
.notice-msg-row.is-disabled {
opacity: 0.35;
border-style: dashed;
}
.notice-msg-row.is-disabled .notice-msg-row-head,
.notice-msg-row.is-disabled .notice-msg-toggle-btn,
.notice-msg-row.is-disabled .notice-msg-row-head .notice-msg-row-name,
.notice-msg-row.is-disabled .notice-msg-row-head .notice-msg-row-num,
.notice-msg-row.is-disabled .notice-msg-row-head button {
opacity: 1;
}
.notice-msg-row-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.notice-msg-row-num {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--c-text-faint);
font-weight: 600;
}
/* Named row header — replaces "#N" when the admin gives the message
a name. Slightly bolder + brighter so the user-given identity reads
as the primary label instead of the fallback index. */
.notice-msg-row-name {
font-size: var(--fs-sm);
font-weight: 700;
color: var(--c-text);
letter-spacing: 0;
text-transform: none;
}
.notice-msg-name {
width: 100%;
}
/* Audience pill in the row header — at a glance "Public" vs "Members
only" so the admin can scan a list without expanding rows. Live
toggled by the .notice-msg-public checkbox below. */
.notice-msg-audience-pill {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: 999px;
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
margin-left: 8px;
margin-right: auto;
}
.notice-msg-audience-pill.is-public {
background: rgba(51, 228, 222, 0.18);
color: var(--c-accent);
}
.notice-msg-audience-pill.is-members {
background: rgba(120, 130, 145, 0.20);
color: var(--c-text-2);
}
/* Public-toggle row — checkbox + label aligned tight so it doesn't
look like a full second form row. Smaller font for the helper text
so it reads as a subtle option, not a primary control. */
.notice-msg-public-row {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-xs);
color: var(--c-text-2);
cursor: pointer;
}
.notice-msg-public-row input[type="checkbox"] { margin: 0; cursor: pointer; }
/* Severity group panels (admin). Only one is visible at a time —
the radio-change handler toggles display. The wrap holds them
stacked so layout shifts are minimal during the swap. */
.notice-groups-wrap {
display: flex;
flex-direction: column;
}
.notice-group-panel {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
background: var(--c-surface);
}
/* Severity-tinted left border on the active panel — matches the
color the live banner will use, so the admin visually associates
the message list with the brand-strip color it'll produce. */
.notice-group-panel.notice-group-info { border-left: 3px solid var(--c-accent); }
.notice-group-panel.notice-group-warn { border-left: 3px solid var(--c-warn); }
.notice-group-panel.notice-group-urgent { border-left: 3px solid #e24b4a; }
/* Per-severity count chips next to the "Messages" label so the admin
can see at a glance how many messages each severity holds without
flipping the radio. */
.notice-group-counts {
display: inline-flex;
gap: 4px;
margin-left: 6px;
vertical-align: middle;
}
.notice-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
padding: 1px 6px;
border-radius: 999px;
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0;
text-transform: none;
line-height: 1;
}
.notice-group-count-info { background: rgba(51, 228, 222, 0.14); color: var(--c-accent); }
.notice-group-count-warn { background: rgba(232, 140, 77, 0.16); color: var(--c-warn); }
.notice-group-count-urgent { background: rgba(226, 75, 74, 0.18); color: #f06b6a; }
/* Severity-specific palette. Background is a vertical fade — full
tint at the top (where it abuts the brand strip), tapering to
transparent at the bottom so the banner reads as a soft "glow" bleed
under the strip rather than a hard panel above the header. The
badge keeps a fully saturated chip so the urgency still reads at a
glance. */
.site-notice.notice-info {
background: linear-gradient(180deg,
rgba(51, 228, 222, 0.12) 0%,
rgba(51, 228, 222, 0.10) 55%,
rgba(51, 228, 222, 0) 100%);
}
.site-notice.notice-info .site-notice-badge {
background: rgba(51, 228, 222, 0.18);
color: var(--c-accent);
}
.site-notice.notice-warn {
background: linear-gradient(180deg,
rgba(232, 140, 77, 0.16) 0%,
rgba(232, 140, 77, 0.12) 55%,
rgba(232, 140, 77, 0) 100%);
}
.site-notice.notice-warn .site-notice-badge {
background: rgba(232, 140, 77, 0.18);
color: var(--c-warn);
}
.site-notice.notice-urgent {
background: linear-gradient(180deg,
rgba(226, 75, 74, 0.20) 0%,
rgba(226, 75, 74, 0.14) 55%,
rgba(226, 75, 74, 0) 100%);
}
.site-notice.notice-urgent .site-notice-badge {
background: rgba(226, 75, 74, 0.20);
color: #f06b6a;
}
/* Severity tints for the top brand strip. body::before's default rule
ships the teal (--c-accent) gradient; these overrides swap the
gradient stops + glow color when a notice is active. info reuses
the default teal so it visually matches the in-banner badge color. */
body.notice-warn::before {
background: linear-gradient(
90deg,
transparent 0%,
rgba(232, 140, 77, 0.18) 15%,
rgba(232, 140, 77, 0.95) 50%,
rgba(232, 140, 77, 0.18) 85%,
transparent 100%
);
box-shadow: 0 0 16px 2px rgba(232, 140, 77, 0.55);
}
body.notice-urgent::before {
background: linear-gradient(
90deg,
transparent 0%,
rgba(226, 75, 74, 0.20) 12%,
rgba(226, 75, 74, 1.00) 50%,
rgba(226, 75, 74, 0.20) 88%,
transparent 100%
);
box-shadow: 0 0 18px 3px rgba(226, 75, 74, 0.60);
/* Subtle pulse on urgent so the eye catches the strip even when
the user is scrolled past the banner. Keep the period long
(3s) so it doesn't read as anxious / distracting. */
animation: notice-urgent-pulse 2.4s ease-in-out infinite;
}
@keyframes notice-urgent-pulse {
0%, 100% { box-shadow: 0 0 18px 3px rgba(226, 75, 74, 0.60); }
50% { box-shadow: 0 0 26px 5px rgba(226, 75, 74, 0.85); }
}
/* Notice form (admin card) — minimal stacked-row layout with a
severity radio group that mirrors the banner's color treatment so
the admin sees what they're configuring. */
.notice-form {
display: flex;
flex-direction: column;
gap: 10px;
padding: 8px 0 4px;
}
.notice-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.notice-row-stack { flex-direction: column; align-items: stretch; }
.notice-row-label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--c-text-faint);
}
.notice-sev-group {
display: flex;
/* One row on desktop with the three severity options sitting
side-by-side. Each chip takes its natural content width
(flex: 0 0 auto via the default) so the longest label
("Warning · Action requested") doesn't get cut off — earlier
flex:1 1 0 forced equal widths and the middle chip clipped.
Wraps on phones (≤520px) where total natural width > viewport. */
flex-wrap: nowrap;
gap: 8px;
}
.notice-sev-group .notice-sev-opt {
/* Keep natural width — don't grow, don't shrink below content */
flex: 0 0 auto;
}
@media (max-width: 520px) {
.notice-sev-group { flex-wrap: wrap; }
.notice-sev-group .notice-sev-opt { flex: 1 1 auto; }
}
.notice-sev-opt {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
cursor: pointer;
background: var(--c-surface-2);
font-size: var(--fs-sm);
/* Keep "Action requested" / "Time-sensitive" on a single line
within the chip — no wrapping mid-label even if flex sizing
squeezes the chip. The row's flex:1 1 0 / min-width:0 lets
the chip shrink, but white-space:nowrap on the chip + its
children means the label text stays intact (chip just gets
narrower / pushes its hint out if needed). */
white-space: nowrap;
}
.notice-sev-opt .notice-sev-label,
.notice-sev-opt .notice-sev-hint {
white-space: nowrap;
}
.notice-sev-opt:has(input:checked) { border-color: var(--c-accent); }
.notice-sev-opt.notice-sev-warn:has(input:checked) { border-color: var(--c-warn); }
.notice-sev-opt.notice-sev-urgent:has(input:checked) { border-color: #e24b4a; }
.notice-sev-opt input[type="radio"] { margin: 0; cursor: pointer; }
.notice-sev-label { font-weight: 600; }
.notice-sev-hint { color: var(--c-text-faint); font-size: var(--fs-xs); }
.notice-cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.notice-cta-row > input[type="text"] { flex: 1 1 240px; }
.notice-cta-row > .admin-select { flex: 0 1 200px; }
/* ── Header ── */
/* Sticky wrapper carries the page-color strip so the rounded white card
inside can stay rounded without letting content peek above it. */
.header-wrap {
position: sticky;
top: 0;
margin: -0.75rem -0.75rem 0.75rem -0.75rem;
padding: 0.75rem 0.75rem 0 0.75rem;
background: var(--c-bg);
z-index: 50;
}
.header {
display: flex;
align-items: center;
gap: 10px;
background: #ffffff;
border: 1px solid #dde1e7;
border-radius: 8px;
padding: 8px 14px;
}
.logo-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
padding-right: 15px;
}
.logo-img {
height: 72px;
width: auto;
object-fit: contain;
display: block;
cursor: pointer;
}
.logo-wrap { cursor: pointer; }
.subtitle {
font-size: var(--fs-xs);
color: #888;
letter-spacing: 2px;
text-transform: uppercase;
}
.tabs {
margin-left: auto;
display: flex;
gap: 10px;
}
/* "Left the guild" card lives above the roster table (filled by
renderDepartureBanner); empty container collapses to nothing. */
#tab-roster #roster-departure-banner:empty { display: none; }
/* "How fresh is this" note on the Pending list. */
.pending-fresh { color: var(--c-text-3); font-size: var(--fs-xs); margin: 0 0 var(--sp-3); line-height: 1.5; }
/* Count badge on the Raiders / Non-Raiders sub-nav pills — how many
members left from that group. Hidden (inline display:none) at 0. */
.roster-pill-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
margin-left: 4px;
border-radius: 8px;
background: var(--c-warn);
color: var(--c-bg);
font-size: var(--fs-micro);
font-weight: 700;
line-height: 1;
}
#header-auth {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--fs-sm);
color: #555;
flex-shrink: 0;
padding-left: 10px;
padding-right: 3px;
border-left: 1px solid #dde1e7;
margin-left: 4px;
}
/* "View as" impersonation picker — gm/officer only, sits to the LEFT of
the #header-auth divider so it reads as a separate cluster. Empty for
raiders/guests. The right-cluster auto-margin lives on whichever
element actually has content: when impersonation has buttons, it
carries the auto-margin so both it AND header-auth slide right
together; when impersonation is empty (collapsed via :empty), the
adjacent-sibling rule below moves the auto-margin onto header-auth
so the user info still right-aligns. */
#header-impersonation {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--fs-sm);
color: #555;
flex-shrink: 0;
margin-left: auto;
}
#header-impersonation:empty { display: none; }
#header-impersonation:empty + #header-auth { margin-left: auto; }
.ha-imp-label {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: 0.08em;
color: #888;
font-weight: 600;
cursor: default;
}
.ha-imp-select {
font-family: inherit;
font-size: var(--fs-sm);
padding: 3px 26px 3px 8px;
background-color: #f3f4f6;
border: 1px solid #dde1e7;
border-radius: 4px;
color: #444;
max-width: 160px;
cursor: pointer;
/* Custom caret inset from the right edge (native chevron sits flush).
background-color is used everywhere below instead of the `background`
shorthand so this image layer survives the hover / active states. */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
}
.ha-imp-select:hover { background-color: #e8ebef; }
.ha-imp-select.is-active {
background-color: rgba(232, 140, 77, 0.15);
border-color: rgba(232, 140, 77, 0.55);
color: #c46a2a;
font-weight: 600;
}
/* Impersonation indicator: thin amber bar at the top of the page so
the override is impossible to miss while it's active. */
body.impersonating::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #e88c4d, transparent);
z-index: 100;
pointer-events: none;
}
/* Stack the player name on top and the role label underneath, right-aligned
to sit cleanly next to the avatar. The previous side-by-side layout
sometimes wrapped awkwardly with longer names + ranks ("Achtungforever"
+ "Officer" overflowed the header on mid-width displays). 2px gap so the
role doesn't sit flush against the descenders of the name. */
#header-auth .ha-user { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.15; }
#header-auth .ha-name { font-weight: 600; color: #222; }
#header-auth .ha-role {
font-size: var(--fs-micro);
letter-spacing: 0.05em;
color: #888;
text-transform: uppercase;
}
#header-auth .ha-btn {
font-family: inherit;
font-size: var(--fs-sm);
line-height: 1.4;
padding: 5px 13px;
/* 4px extra breathing room between the .ha-user name+role block
and the Logout / Sign in button. The flex container's gap of
4px alone made the button sit too close to the user-info text. */
margin-left: 4px;
background: #f3f4f6;
border: 1px solid #dde1e7;
border-radius: 4px;
color: #444;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
display: inline-flex;
align-items: center;
box-sizing: border-box;
}
#header-auth .ha-btn:hover { background: #e8ebef; }
#header-auth .ha-btn.primary {
background: var(--c-accent);
border-color: var(--c-accent);
color: #0a0f1a;
font-weight: 600;
}
#header-auth .ha-btn.primary:hover { background: #29CCC6; }
.tab-btn {
padding: 5px 13px;
font-size: var(--fs-sm);
line-height: 1.4;
border-radius: 4px;
cursor: pointer;
letter-spacing: 1px;
text-transform: uppercase;
background: transparent;
border: 1px solid #ccd0d8;
color: var(--c-text-2);
font-family: inherit;
transition: all 0.15s;
/* Buttons should never break text across lines — they're short
imperative labels ("+ Add Player", "Process Attendance", etc.).
Without nowrap, narrow flex containers (notably the roster
toolbar on phones, where seg-toggle + button + search compete
for width) squeeze button width below its text's natural size
and the label wraps to two lines. The parent row should use
flex-wrap:wrap so the button itself wraps to the next line
intact instead of being compressed. */
white-space: nowrap;
/* Kill the browser's default dark tap-highlight overlay that flashes over
the button on click/tap — the .active / .is-active teal is the intended
pressed feedback; we don't want a grey-black wash showing through on top. */
-webkit-tap-highlight-color: transparent;
}
.tab-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
/* Same, applied broadly to every interactive control so no button/link/toggle
flashes the default dark tap-highlight on click/tap. */
button, a, [role="button"], .points-link, .player-link { -webkit-tap-highlight-color: transparent; }
/* Size modifiers (compose with .tab-btn) */
.tab-btn.btn-small { font-size: var(--fs-xs); padding: 3px 10px; }
.tab-btn.btn-micro { font-size: var(--fs-micro); padding: 2px 8px; letter-spacing: 0.5px; }
/* Square icon-only button (×, +, etc.) sized to align with .admin-input. */
.tab-btn.btn-icon { padding: 5px 10px; line-height: 1; letter-spacing: 0; min-width: 0; }
/* Color modifiers (compose with .tab-btn) — replace inline color/border-color overrides */
.tab-btn.btn-confirm { color: var(--c-accent); border-color: #33E4DE44; }
.tab-btn.btn-confirm:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
.tab-btn.btn-danger { color: var(--c-bad); border-color: #e8707044; }
.tab-btn.btn-danger:hover { background: var(--c-bad); border-color: var(--c-bad); color: var(--c-bg); }
.tab-btn.btn-warning { color: var(--c-warn); border-color: #d4aa4444; }
.tab-btn.btn-warning:hover { background: var(--c-warn); border-color: var(--c-warn); color: var(--c-bg); }
/* Blue / informational action (e.g. the "Maybe" tentative RSVP) — uses the
indigo --c-link so it reads as a distinct, lower-commitment choice next to
the teal Join and red Call-out, and matches Discord's blurple Maybe button. */
.tab-btn.btn-info { color: var(--c-link); border-color: color-mix(in srgb, var(--c-link) 40%, transparent); }
.tab-btn.btn-info:hover { background: var(--c-link); border-color: var(--c-link); color: var(--c-bg); }
/* Loot-bucket-specific button colors (MS / OS). Used on the wishlist
row buttons; kept distinct from btn-confirm (teal accent, generic
primary action) and btn-warning (yellow, generic warning) so the
loot row's color signal doesn't drift if other parts of the app
re-theme those modifiers. */
.tab-btn.btn-ms { color: var(--c-ms); border-color: color-mix(in srgb, var(--c-ms) 35%, transparent); }
.tab-btn.btn-ms:hover { background: var(--c-ms); border-color: var(--c-ms); color: var(--c-bg); }
.tab-btn.btn-os { color: var(--c-os); border-color: color-mix(in srgb, var(--c-os) 35%, transparent); }
.tab-btn.btn-os:hover { background: var(--c-os); border-color: var(--c-os); color: var(--c-bg); }
/* Hard Reserve copper-amber matches the AR row HR badge (#e88c4d). */
.tab-btn.btn-hr { color: #e88c4d; border-color: rgba(232,140,77,0.35); }
.tab-btn.btn-hr:hover { background: #e88c4d; border-color: #e88c4d; color: var(--c-bg); }
.tab-btn.btn-muted { color: rgba(207, 217, 230, 0.55); border-color: rgba(207, 217, 230, 0.25); }
.tab-btn.btn-muted:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
/* Config dropdown — match tab-btn look/height */
.config-select {
font-family: inherit;
font-size: var(--fs-sm);
line-height: 1.4;
padding: 5px 28px 5px 13px;
border-radius: 4px;
border: 1px solid #ccd0d8;
background: transparent;
color: #444;
cursor: pointer;
min-width: 200px;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
transition: all 0.15s;
}
.config-select:hover { border-color: var(--c-accent); }
.config-select:focus { outline: none; border-color: var(--c-accent); }
.config-select.on-dark:hover, .config-select.on-dark:focus { border-color: var(--c-accent); }
.config-select option { text-transform: none; letter-spacing: normal; color: #333; background: #fff; }
/* Dark-bg variant for pages with dark surfaces (e.g. Attendance) —
matches .admin-select styling so all dark-surface dropdowns are uniform. */
.config-select.on-dark {
background: var(--c-bg);
color: var(--c-text);
border-color: #223049;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.config-select.on-dark option { color: var(--c-text); background: var(--c-bg); }
.tab-btn.active {
background: #33E4DE12;
border-color: var(--c-accent);
color: #2d9aa4;
}
/* ── Missing banner ── */
.missing-banner {
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 0;
font-size: var(--fs-sm);
color: #e24b4a;
}
.missing-banner strong { color: #e24b4a; display: block; margin-bottom: 8px; }
#missing-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 16px;
}
.missing-col-title {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 6px;
padding-bottom: 5px;
border-bottom: 1px solid var(--c-border);
}
.missing-benefit-row {
display: flex;
align-items: flex-start;
gap: 6px;
margin-bottom: 5px;
}
.missing-benefit-label {
font-size: var(--fs-micro);
color: #999;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
width: 130px;
flex-shrink: 0;
padding-top: 3px;
}
.missing-pills-wrap {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.missing-tag {
padding: 3px 9px;
border-radius: 3px;
border: 1px solid;
font-size: var(--fs-sm);
}
/* ── Comp grid ── */
.comp-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
/* ── Group / Bench card ── */
.group-card {
background: var(--c-surface);
border-radius: 8px;
border: 1px solid var(--c-border);
overflow: hidden;
display: flex;
flex-direction: column;
}
.group-header {
background: var(--c-surface-2);
padding: 7px 10px;
font-size: var(--fs-md);
font-weight: 700;
letter-spacing: 2px;
color: var(--c-accent);
text-transform: uppercase;
border-bottom: 1px solid var(--c-border);
flex-shrink: 0;
height: 36px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.group-disabled { opacity: 0.25; pointer-events: none; }
.bench-header { color: #ffffff99; }
.group-slots { padding: 5px; }
.slot {
margin-bottom: 3px;
border-radius: 4px;
min-height: 34px;
border: 1px solid transparent;
transition: all 0.1s;
}
.slot.drag-over {
border-color: #33E4DE44;
background: #33E4DE08;
}
/* "+ Stand by" button lit up while a card is dragged over it (drop target). */
/* Strip-card drag target — a group's callout strip lights up when a dragged
callout/standby/maybe card can be re-homed onto it. */
.group-callouts.drop-hot {
outline: 1px dashed var(--c-accent);
outline-offset: 2px;
border-radius: var(--r-md);
}
.tab-btn.drop-hot {
border-color: var(--c-accent);
color: var(--c-accent);
background: #33E4DE14;
}
.slot-empty {
/* Match the dimensions of a filled .player-card so rows line up */
display: flex;
align-items: center;
gap: 7px;
padding: 5px 8px;
border-radius: 4px;
background: var(--c-surface-2);
border: 1px solid #1a1e2a;
height: 42px;
box-sizing: border-box;
font-size: var(--fs-md);
color: #3d4a66;
font-weight: 700;
}
.slot-empty-actions {
display: flex;
gap: 4px;
justify-content: flex-end;
flex-wrap: nowrap;
margin-left: auto;
}
.pug-btn {
font-size: 9px;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid #33E4DE44;
background: transparent;
color: #33E4DE88;
cursor: pointer;
font-family: inherit;
letter-spacing: 0.5px;
transition: all 0.15s;
white-space: nowrap;
}
.pug-btn:hover { background: #33E4DE14; color: var(--c-accent); border-color: var(--c-accent); }
/* ── Player card ── */
.player-card {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 8px;
border-radius: 4px;
cursor: grab;
user-select: none;
background: var(--c-surface-2);
border: 1px solid #22222e;
transition: opacity 0.15s;
min-height: 42px;
box-sizing: border-box;
}
.player-card:active { cursor: grabbing; opacity: 0.7; }
.player-card.dragging { opacity: 0.4; }
.recruit-edit-row.dragging { opacity: 0.4; }
.recruit-edit-row.drag-over-top { border-top-color: var(--c-accent) !important; }
.recruit-edit-row.drag-over-bot { border-bottom-color: var(--c-accent) !important; }
.player-name {
font-size: var(--fs-md);
font-weight: 600;
color: #eeeeee;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-meta {
font-size: var(--fs-xs);
margin-top: 1px;
}
/* ── Callouts strip (per-group, below .group-slots) ──
When a scheduled raider marks time off, they auto-move out of their
slot into here so the slot opens up for a sub. The original assignment
is preserved so the GM can see (and audit) who called out. */
.group-callouts {
border-top: 1px dashed var(--c-border);
padding: 6px 5px 4px;
display: flex;
flex-direction: column;
gap: 4px;
}
.callout-strip-label {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--c-text-faint);
margin-bottom: 2px;
}
.callout-card {
display: flex;
align-items: center;
gap: 7px;
padding: 4px 8px;
border-radius: 4px;
background: var(--c-surface-2);
border: 1px dashed #d4aa4455;
min-height: 38px;
box-sizing: border-box;
}
/* Dim only the player text + badge — keep the X remove button fully
visible so it's obviously clickable. Previously the whole card was
opacity:0.65 which made the X grey-on-grey-on-dim → effectively
invisible, and users couldn't tell how to uncall someone out. */
.callout-card .player-name,
.callout-card .player-meta,
.callout-card .callout-badge,
.callout-card .callout-slot-note {
opacity: 0.7;
}
/* Remove ✕ button: rendered as an obvious always-visible chip on the
right edge of the callout card. Background + border + bold X so it
reads as a button, not an easy-to-miss decorative character. Earlier
plain-span treatment was too subtle and users were missing it. */
.callout-card-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: #ff8a89;
background: #e24b4a22;
border: 1px solid #e24b4a55;
cursor: pointer;
border-radius: 4px;
flex-shrink: 0;
transition: color 0.1s, background 0.1s, border-color 0.1s;
user-select: none;
}
.callout-card-x:hover {
color: #fff;
background: #e24b4a;
border-color: #e24b4a;
}
/* Callout name keeps its color but no strikethrough — the CALLOUT badge
already says it. Line-through stacked on top of the badge read as
noise. */
.callout-badge {
font-size: 8px;
font-weight: 700;
padding: 1px 4px;
border-radius: 3px;
background: #d4aa44;
color: #1a1a1a;
flex-shrink: 0;
letter-spacing: var(--tracking-wide);
}
/* NO SHOW variant — punitive, escalates to red since it's worse than
a regular callout (callouts cost no points; no-shows cost 15). The
color swap (CALLOUT=amber, NO SHOW=red) was a user call after the
initial pass had them reversed — red reads as "this is bad" and
amber as "heads up." */
.callout-badge-noshow {
background: #e24b4a;
color: #fff;
}
/* No-show card border tints red, replacing the dashed amber of a
regular callout card. The inline class-color border-left stays. */
.callout-card-noshow {
border-color: #e24b4a55 !important;
border-style: dashed;
}
/* STANDBY variant — a volunteer sub for a full raid. Brand teal (reads as
"available / positive", distinct from amber callout + red no-show). */
.callout-badge-standby {
background: #33E4DE;
color: #08211f;
}
.callout-card-standby {
border-color: #33E4DE55 !important;
border-style: dashed;
}
/* MAYBE variant — a tentative RSVP. Blue (matches the Maybe button), distinct
from amber callout / red no-show / teal standby. */
.callout-badge-maybe {
background: var(--c-link);
color: #fff;
}
.callout-card-maybe {
border-color: color-mix(in srgb, var(--c-link) 45%, transparent) !important;
border-style: dashed;
}
/* + Callout / + No Show button row — centered with breathing room
between the two buttons. The strip puts cards on top and this
button row beneath them; the top margin gives the buttons space
to breathe away from the last card so the action bar reads as a
distinct cluster instead of crammed against the entries. The
`:first-child` selector handles the empty-state (no cards above
→ no extra top margin needed). */
.callout-add-btns {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
margin-bottom: 4px;
}
.callout-add-btns:first-child {
margin-top: 0;
}
/* Count line ('1 callout · 2 no-shows') — sits at the TOP of the
strip, above the cards. Subtle, since the cards themselves convey
the same info via their badges. Acts as a quick "N people sitting
this raid out" header before the eye scans the card list. */
.callout-strip-count {
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--c-text-faint);
text-align: center;
margin-bottom: 4px;
}
/* Same counts, but pinned under the roster pool column — sits below the list,
so it needs top spacing + a divider instead of the strip's bottom margin. */
#bench-strip-count {
margin: 8px 0 0;
padding-top: 8px;
border-top: 1px solid var(--c-border);
line-height: 1.9;
}
.callout-slot-note {
font-size: var(--fs-micro);
color: var(--c-text-faint);
font-weight: 400;
text-transform: lowercase;
letter-spacing: 0;
}
/* Variant of the strip label used when no callouts exist but the writer
still gets a "+ Callout" affordance. Different visual weight than the
N-callouts label so an empty strip doesn't shout for attention. */
.callout-strip-label.callout-strip-label-empty {
color: var(--c-text-faint);
opacity: 0.65;
display: flex;
align-items: center;
}
.callout-strip-label { display: flex; align-items: center; }
/* Inline picker for "+ Callout". Lives at the bottom of .group-callouts,
only when the writer clicks the button. Search input + scrollable list
of class-colored roster names. */
.callout-picker {
margin-top: 6px;
padding: 8px;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
display: flex;
flex-direction: column;
gap: 6px;
}
.callout-picker-head {
display: flex; align-items: center; justify-content: space-between;
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--c-text-faint);
}
.callout-picker-search { width: 100%; box-sizing: border-box; }
.callout-pick-list {
display: flex; flex-direction: column; gap: 2px;
max-height: 220px; overflow-y: auto;
}
.callout-pick-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 8px;
background: var(--c-surface-2); border: 1px solid var(--c-border);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
color: inherit;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.1s, border-color 0.1s;
}
.callout-pick-row:hover { border-color: var(--c-accent); background: var(--c-surface); }
.callout-pick-name { font-weight: 600; }
.callout-pick-meta { color: var(--c-text-faint); font-size: var(--fs-xs); flex: 1; }
.callout-pick-alum {
font-size: 8px;
font-weight: 700;
padding: 1px 4px;
border-radius: 3px;
background: #000;
color: #fff;
letter-spacing: var(--tracking-wide);
}
.callout-pick-empty {
font-size: var(--fs-sm);
color: var(--c-text-faint);
font-style: italic;
padding: 8px;
text-align: center;
}
/* ── Buff tags ── */
.buff-tags {
border-top: 1px solid var(--c-border);
padding: 6px 8px;
min-height: 32px;
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: auto;
}
.buff-tag {
font-size: var(--fs-sm);
padding: 3px 9px;
border-radius: 3px;
white-space: nowrap;
cursor: default;
}
/* buff-tag colors set inline by class */
/* ── Buff priority groups ── */
.buff-group { margin-bottom: 5px; }
.buff-group:last-child { margin-bottom: 0; }
.buff-group-label {
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 3px;
opacity: 0.7;
}
.buff-group-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.buff-app-section { margin-top: 18px; margin-bottom: 10px; }
.buff-app-section:first-child { margin-top: 0; }
.buff-app-section:last-child { margin-bottom: 0; }
.buff-app-label {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding-bottom: 2px;
margin-bottom: 6px;
border-bottom: 1px solid;
}
.buff-prio-block { margin-top: 12px; margin-left: 4px; }
.buff-prio-block:first-child { margin-top: 4px; }
.buff-prio-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 2px;
opacity: 0.85;
}
/* ── Buff visibility toggles ── */
.buff-vis-bar {
display: flex;
align-items: center;
gap: 6px;
}
/* .bvb-toolbar wraps the size + Show toggle buttons so they can move as a
single unit on mobile; on desktop it flattens into the parent flex row. */
.bvb-toolbar { display: contents; }
.buff-vis-bar span {
font-size: var(--fs-micro);
color: var(--c-text-3);
letter-spacing: 1px;
text-transform: uppercase;
margin-right: 2px;
}
/* ── Nav dropdown ── */
.main-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.main-nav-btn {
font-family: inherit;
font-size: var(--fs-sm);
line-height: 1.4;
padding: 5px 13px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: #444;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
transition: all 0.15s;
}
.main-nav-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
.main-nav-btn.active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
/* Chat connectivity dot on the Chat nav button — green = relay + in-game
capture both live, amber = relay only (game side stale/dead — attention),
red = relay down. White ring keeps it readable on the teal hover/active
button background. */
.nav-chat-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: 6px;
vertical-align: 1px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.nav-chat-dot.ok { background: var(--c-good); }
.nav-chat-dot.warn { background: var(--c-warn); }
.nav-chat-dot.bad { background: var(--c-bad); }
/* Mobile nav toggle + collapsible panel (≤700px). Desktop keeps inline buttons. */
.mobile-nav-toggle { display: none; }
.mobile-nav-toggle .caret { font-size: var(--fs-micro); margin-left: 6px; }
.subnav {
display: flex;
align-items: center;
gap: 10px;
/* Match .tab-content-wrap below it: same 1280px max-width AND same
var(--sp-6) (24px) side padding so the subnav buttons sit at the
same left/right edges as the page content (comp grid, coverage
groups, etc.). Earlier 14px side padding made the subnav inner
extend ~10px wider on each side than the content below — visible
misalignment on wide viewports. */
margin: 8px auto 0;
max-width: 1280px;
padding: 8px var(--sp-6);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: 8px;
flex-wrap: wrap;
}
/* Scoped overrides so subnav buttons match the dark surface (borders blend instead of looking like stray light-theme chips) */
.subnav .tab-btn { border-color: #223049; color: var(--c-text-2); }
.subnav .config-select { font-size: var(--fs-xs); padding: 3px 26px 3px 10px; min-width: 160px; }
.subnav .tab-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
.subnav .tab-btn.active { background: #33E4DE12; border-color: var(--c-accent); color: var(--c-accent); }
.subnav .tab-btn.btn-danger { color: var(--c-bad); border-color: #e8707044; }
.subnav .tab-btn.btn-danger:hover { background: var(--c-bad); border-color: var(--c-bad); color: var(--c-bg); }
.nav-wrap { position: relative; }
.nav-trigger {
font-size: var(--fs-micro);
color: #666;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 4px;
padding: 2px 0;
transition: color 0.15s;
}
.nav-trigger:hover,
.nav-trigger.open { color: #0f7e7a; }
.nav-trigger .caret { font-size: 8px; }
.nav-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: 6px;
min-width: 220px;
box-shadow: 0 4px 20px #0008;
z-index: 100;
overflow: hidden;
}
.nav-dropdown.open { display: block; }
.nav-dropdown a {
display: block;
padding: 10px 14px;
font-size: var(--fs-md);
color: #ccc;
text-decoration: none;
border-bottom: 1px solid var(--c-border);
transition: background 0.1s, color 0.1s;
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: #33E4DE14; color: var(--c-accent); }
/* ── WoW-style buff tooltip ── */
#buff-tooltip {
position: fixed;
z-index: 9999;
pointer-events: none;
display: none;
min-width: 205px;
max-width: 295px;
background: linear-gradient(160deg, #1c1508 0%, #0d0b07 100%);
border: 1px solid #8b7355;
border-radius: 4px;
padding: 10px 13px;
box-shadow: 0 6px 24px #0009, inset 0 0 0 1px #3a2e1a;
font-family: 'Trebuchet MS', sans-serif;
}
.tt-title {
font-size: var(--fs-base);
font-weight: 700;
color: #ffd100;
margin-bottom: 7px;
line-height: 1.2;
}
.tt-divider {
height: 1px;
background: linear-gradient(to right, transparent, #8b7355aa, transparent);
margin: 6px 0;
}
.tt-row {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: var(--fs-xs);
margin-bottom: 3px;
color: #7a7060;
}
.tt-row span:last-child { color: #d0c8b8; text-align: right; }
.tt-provider { font-size: var(--fs-xs); margin-bottom: 2px; }
.tt-body {
font-size: var(--fs-sm);
color: #c8c0a8;
line-height: 1.5;
margin-bottom: 2px;
}
.tt-notes {
font-size: var(--fs-xs);
color: #7a7060;
font-style: italic;
line-height: 1.4;
margin-bottom: 2px;
}
.tt-section-label {
font-size: 9px;
color: #7a7060;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 4px;
}
.tt-prio {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
border-radius: 3px;
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
/* ── Bench ── */
.bench-scroll {
padding: 5px;
/* ~6 player cards (42px + 3px margin each) before scrolling — keeps the
sit-out counts pinned below the list visible instead of cut off. */
max-height: 277px;
overflow-y: auto;
}
.bench-scroll .player-card { margin-bottom: 3px; }
.bench-empty { font-size: var(--fs-sm); color: #555; font-style: italic; padding: 6px 8px; }
/* ── Coverage tab ── */
.coverage-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.cov-card {
background: var(--c-surface);
border-radius: 8px;
border: 1px solid var(--c-border);
padding: 1rem;
}
.cov-title {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}
.cov-title.critical { color: var(--c-bad); }
.cov-title.raid { color: var(--c-accent); }
.cov-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: var(--fs-md);
}
.cov-row .check { font-size: var(--fs-base); }
.cov-row .check.ok { color: var(--c-good); }
.cov-row .check.bad { color: #c03030; }
.cov-row .buff-name.ok { color: #ddd; }
.cov-row .buff-name.bad { color: var(--c-bad); }
.cov-row .sources { color: #888; font-size: var(--fs-xs); margin-left: auto; }
.coverage-groups {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
/* Loot Balance sub-tab — item-centric tier-token contention. One
.lb-group per tier-token bucket; inside each group a list of
.lb-piece rows (one per token piece — helm / shoulders / chest /
legs / hands). Each .lb-piece shows the item link + boss + the
contesting comp players inline as MS / OS / Owns chips. */
/* Two-column container: column 1 = active raid's contention, column 2
= optional comparison config picked via dropdown. Side-by-side on
desktop so officers can read contention across two raids without
tab-juggling; stacks on mobile so each column gets full width. */
/* The Balance sub nests its own .tab-content-wrap inside the loot tab's
wrapper — zero its padding/width so it doesn't double the top + side gap
(it sat lower than the History sub, which has no nested wrapper). */
#loot-sub-balance > .tab-content-wrap { padding: 0; max-width: none; margin: 0; }
.lb-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-5);
align-items: start;
}
.lb-col {
/* min-width:0 lets grid children honor their content's wrap
behavior (without it, a long item name in either column can
force the column wider than 1fr would permit). */
min-width: 0;
}
@media (max-width: 900px) {
.lb-cols {
grid-template-columns: 1fr;
}
}
/* Per-column header row — sits above each column's rendered
contention. Both columns use the same `.lb-col-head` so column 2's
"Compare with: [dropdown]" row matches column 1's "Loot contention:
" row in height, keeping the section titles below them
vertically aligned across both columns. Min-height matches the
.config-select's natural height (~36px) so the text-only column 1
head doesn't read shorter than the column 2 head with its select. */
.lb-col-head {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
min-height: 36px;
flex-wrap: wrap;
}
.lb-col-head-label {
font-size: var(--fs-sm);
color: var(--c-text-3);
font-weight: 600;
}
.lb-col-head-name {
color: var(--c-text);
font-size: var(--fs-base);
font-weight: 500;
}
.lb-col-head .config-select {
flex: 1;
min-width: 200px;
}
.lb-header {
font-size: var(--fs-base);
color: var(--c-text);
margin-bottom: var(--sp-3);
padding: 4px 0;
}
.lb-header .lb-raid {
color: var(--c-text-3);
font-size: var(--fs-sm);
margin-left: 6px;
}
.lb-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--sp-3);
}
.lb-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-left: 3px solid var(--c-border);
border-radius: 6px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.lb-card.lb-warn { border-left-color: var(--c-warn); }
.lb-card.lb-bad { border-left-color: var(--c-bad); }
.lb-card.lb-ok { border-left-color: var(--c-good); }
.lb-card.lb-empty { border-left-color: var(--c-text-faint); }
.lb-card-head {
display: flex;
flex-direction: column;
gap: 2px;
}
.lb-title {
font-size: var(--fs-base);
font-weight: 600;
color: var(--c-text);
}
.lb-classes {
font-size: var(--fs-xs);
color: var(--c-text-3);
}
/* ── Section dividers (Tier tokens / All other loot) ── */
.lb-section-title {
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--c-text-faint);
text-transform: uppercase;
margin: var(--sp-5) 0 var(--sp-2);
padding-bottom: 4px;
border-bottom: 1px solid var(--c-border);
}
.lb-section-title:first-child { margin-top: 0; }
.lb-empty-section {
font-size: var(--fs-sm);
color: var(--c-text-faint);
font-style: italic;
padding: var(--sp-3);
background: var(--c-surface);
border: 1px dashed var(--c-border);
border-radius: 6px;
}
/* Pieces where every contestant already owns the item — dim them
so officers see at a glance they're 'parked' (not actively
needing more contention). */
.lb-piece-owned-only {
opacity: 0.55;
}
/* ── Item-centric layout (replaces the bucket-summary cards) ── */
.lb-groups {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.lb-group {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 6px;
overflow: hidden;
}
.lb-group-head {
background: var(--c-surface-2);
padding: 10px 14px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--c-border);
flex-wrap: wrap;
}
.lb-group-title {
font-size: var(--fs-base);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--c-accent);
text-transform: uppercase;
}
.lb-group-meta {
display: flex;
align-items: baseline;
gap: 14px;
font-size: var(--fs-xs);
color: var(--c-text-3);
}
.lb-group-classes { color: var(--c-text-3); }
.lb-group-pieces {
color: var(--c-text-faint);
font-weight: 600;
}
.lb-pieces {
display: flex;
flex-direction: column;
}
.lb-piece {
padding: 9px 14px;
border-bottom: 1px solid var(--c-border);
}
.lb-piece:last-child { border-bottom: none; }
.lb-piece-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 6px;
}
.lb-piece-item {
flex: 1;
min-width: 0;
}
/* The .wl-item anchor inside .lb-piece-item already styles itself
with the icon + colored quality name from item-meta. We just need
it to behave inline-flex for vertical alignment with the boss. */
.lb-piece-item .wl-item {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.lb-piece-name-fallback {
color: var(--c-text-2);
font-weight: 500;
}
.lb-piece-boss {
color: var(--c-text-faint);
font-size: var(--fs-sm);
font-style: italic;
flex-shrink: 0;
text-align: right;
}
.lb-piece-contestants {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
}
.lb-contestant {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
font-size: var(--fs-xs);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--c-border);
}
.lb-contestant.lb-c-ms { border-color: rgba(226, 75, 74, 0.4); background: rgba(226, 75, 74, 0.08); }
.lb-contestant.lb-c-os { border-color: rgba(232, 140, 77, 0.4); background: rgba(232, 140, 77, 0.06); }
.lb-contestant.lb-c-owns { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); opacity: 0.55; }
.lb-c-name {
font-weight: 600;
}
.lb-c-tag {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--c-text-3);
}
.lb-contestant.lb-c-ms .lb-c-tag { color: var(--c-bad); }
.lb-contestant.lb-c-os .lb-c-tag { color: var(--c-warn); }
.lb-contestant.lb-c-owns .lb-c-tag { color: var(--c-text-faint); }
/* ── Drag-drop on Loot Balance compare ──
Officers/GM can pick up a pill and drop on another column / pool
strip / different group / different pill to move or swap.
- .lb-c-draggable: grab cursor on hover so the affordance is obvious
- .lb-pill-dragging: ghost the source pill during drag
- .lb-drop-target / .lb-drop-hover on whole zones use a subtle
bg-tint only — no big dashed border around the entire column /
row (per user: "I need to be able to see not the entire border
selected with dashed lines, but I want to see that I am able to
drop a player right in front of another by having a divider").
- The PRECISE drop position is shown by the .lb-drop-before /
.lb-drop-after divider lines on the target pill (.lb-gp-pill),
glowing accent stripe on the cursor-side of that pill. */
.lb-contestant.lb-c-draggable {
cursor: grab;
}
.lb-contestant.lb-c-draggable:active {
cursor: grabbing;
}
.lb-contestant.lb-pill-dragging {
/* Strong cue that the pill is being dragged — opacity drop +
slight scale-down + grayscale so it pops the moment the
browser fires dragstart. No transitions so the change is
instant (per user feedback that the visual was lagging). */
opacity: 0.25;
transform: scale(0.92);
filter: grayscale(0.6);
}
.lb-col.lb-drop-target,
.lb-pool-row.lb-drop-target {
transition: background 0.12s ease;
}
.lb-col.lb-drop-hover,
.lb-pool-row.lb-drop-hover {
background: rgba(70, 200, 195, 0.05);
}
/* ── Available roster "free pool" strip ──
Sits above the two columns in compare mode. Shows roster members
not currently assigned to either compared raid as draggable pills.
Drop a pill here to release a player; drag from here into a column
to assign. Single horizontal flex row that wraps as needed.
Sticky-pinned BELOW the .raid-subnav so it stays in view while
the user scrolls through long Loot Balance contention — the offset
is `--sticky-header-h + --sticky-raid-subnav-h`, where the subnav
height is measured at runtime by a ResizeObserver in
_lbInstallSubnavHeightTracker so wrap-onto-two-rows on mobile or
feature-flag toggles (e.g. Loot System bar showing/hiding) keep
the offset accurate. z-index sits below the subnav's z=5 so the
subnav covers if they ever overlap. */
.lb-pool-row {
/* Stack label-on-top, pills below, optional hint last. Per user
— the inline left-of-pills layout pushed the pill row into a
narrower remaining-width slot and read cluttered when the
roster pool got wide. Vertical stack gives the pills the full
row width and the label a clear header treatment. */
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--sp-1);
padding: var(--sp-2) 0;
margin-bottom: var(--sp-3);
/* Match the .raid-subnav's bg + drop the surrounding card border
so the pool reads as a continuation of the sticky nav rather
than a separate boxed surface. Border-bottom mirrors the
subnav's bottom rule so there's still a clean horizontal
divider separating the unified sticky from the columns below. */
background: var(--c-bg);
border: none;
border-bottom: 1px solid var(--c-border);
border-radius: 0;
font-size: var(--fs-sm);
min-height: 36px;
position: sticky;
/* Pin flush under the page header. On the Loot tab (where this lives now)
the only sticky element above the pool is the header — the loot
sub-tabs nav is NOT sticky — so offset by just --sticky-header-h.
(It used to add --sticky-raid-subnav-h from its old Raid-Builder home,
but that subnav doesn't exist here, which left a see-through gap.) */
top: var(--sticky-header-h, 100px);
z-index: 4;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0), 0 8px 22px rgba(0, 0, 0, 0);
transition: box-shadow 0.18s ease;
}
/* Doubled drop-shadow once pinned (close inner + softer outer) so the strip
clearly lifts off the contention scrolling beneath — same treatment as the
pug-reserve sticky hero. */
.lb-pool-row.is-stuck {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 8px 22px rgba(0, 0, 0, 0.55);
}
/* Pool strip drops its sticky on mobile in lockstep with the
.raid-subnav (the offset calc for top would point at the subnav
height, which itself scrolls away on phones). Static layout on
phones reads cleaner and doesn't fight the subnav for screen
real estate. */
@media (max-width: 700px) {
.lb-pool-row {
position: static;
box-shadow: none;
}
}
.lb-pool-label {
font-weight: 700;
color: var(--c-text-3);
text-transform: uppercase;
font-size: var(--fs-xs);
letter-spacing: 0.05em;
flex-shrink: 0;
}
.lb-pool-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.lb-pool-empty {
color: var(--c-text-faint);
font-style: italic;
font-size: var(--fs-xs);
}
.lb-pool-hint {
color: var(--c-text-faint);
font-style: italic;
font-size: var(--fs-xs);
flex-shrink: 0;
/* Pool layout is column-flex now (label on top, pills below).
The hint sits at the bottom — no margin-left:auto needed
since the column doesn't push siblings horizontally. */
}
@media (max-width: 700px) {
/* On phones, stack the hint below the pills so they get full width. */
.lb-pool-hint { display: none; }
}
/* Pool pill chrome — neutral (no MS/OS/Owns coloring) since pool
players aren't contesting anything yet. Class color carries on
.lb-c-name like the column pills. */
.lb-contestant.lb-c-pool {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.12);
}
/* Partial-availability cue — pill is dimmed slightly + warm border
to signal "available for ONE of the two raids but not both". The
tooltip on hover names the specific raid that's a no-go. Players
unavailable for BOTH raids are filtered out of the pool entirely. */
.lb-contestant.lb-c-pool.lb-c-pool-partial {
opacity: 0.65;
border-color: rgba(232, 140, 77, 0.5);
background: rgba(232, 140, 77, 0.06);
}
/* ── Party preview (10m only) ──
Two rows of 5 pills under each column head showing the full Group 1
+ Group 2 comp. Lets officers see at-a-glance who's in each raid
AND drag any rostered slot — including players with no contested
wishlist items — into the other column or the pool. */
.lb-groups-preview {
display: flex;
flex-direction: column;
gap: var(--sp-1);
margin-bottom: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 6px;
font-size: var(--fs-xs);
}
.lb-gp-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
}
.lb-gp-label {
font-weight: 700;
color: var(--c-text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
min-width: 56px;
}
.lb-gp-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* On mobile, stack the group label above the pill row instead of
having "Group 1: pill pill pill" all on one line. Per user — the
label-on-top layout reads cleaner on phone widths where 5 pills
would otherwise spill into multiple wrapped lines beside the label. */
@media (max-width: 700px) {
.lb-gp-row {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-1);
}
.lb-gp-label {
min-width: 0;
}
.lb-gp-pills {
width: 100%;
}
}
.lb-gp-pill {
padding: 2px 8px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--c-border);
font-weight: 600;
cursor: default;
}
.lb-gp-pill.lb-c-draggable {
cursor: grab;
}
.lb-gp-pill.lb-c-draggable:active {
cursor: grabbing;
}
.lb-gp-pill.lb-pill-dragging {
opacity: 0.4;
}
.lb-gp-empty {
padding: 2px 8px;
color: var(--c-text-faint);
font-style: italic;
}
/* Row-level drop hover — subtle bg-tint only, no dashed outline.
The PRECISE drop position is conveyed by the per-pill divider
indicator (.lb-drop-before / .lb-drop-after below). */
.lb-gp-row.lb-drop-target {
transition: background 0.12s ease;
}
.lb-gp-row.lb-drop-hover {
background: rgba(70, 200, 195, 0.04);
}
/* Per-pill insertion-line indicator. A vertical accent stripe
appears on the cursor-side of the pill being hovered, showing
exactly where the dragged player will land. .lb-drop-before pins
the stripe to the left edge (drop in front of this pill); .lb-drop-
after pins it to the right edge (drop after this pill). The pill
itself doesn't get an outline — the stripe is the only visual cue,
per user feedback. */
.lb-gp-pill {
position: relative;
}
.lb-gp-empty {
position: relative;
}
.lb-gp-pill::before,
.lb-gp-pill::after,
.lb-gp-empty::before,
.lb-gp-empty::after {
content: '';
position: absolute;
top: -3px;
bottom: -3px;
width: 3px;
border-radius: 2px;
background: transparent;
pointer-events: none;
/* No transition — the divider should pop the moment the cursor
crosses into a pill's drop-side zone. Per user: "can it show
up sooner" — fading in via a transition felt laggy. */
}
.lb-gp-pill::before, .lb-gp-empty::before { left: -4px; }
.lb-gp-pill::after, .lb-gp-empty::after { right: -4px; }
.lb-gp-pill.lb-drop-before::before,
.lb-gp-empty.lb-drop-before::before,
.lb-gp-pill.lb-drop-after::after,
.lb-gp-empty.lb-drop-after::after {
background: var(--c-accent);
box-shadow: 0 0 8px rgba(70, 200, 195, 0.7);
}
.lb-piece-empty {
color: var(--c-text-faint);
font-size: var(--fs-xs);
font-style: italic;
}
/* Summary row: MS / OS / Owns counts at the top of each card. Pills
live in a flex strip with the piece-count caption pushed right. */
.lb-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
font-size: var(--fs-sm);
}
.lb-summary-num {
font-weight: 600;
padding: 1px 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.04);
}
.lb-summary-ms { color: var(--c-bad); }
.lb-summary-os { color: var(--c-warn); }
.lb-summary-have { color: var(--c-text-3); }
.lb-summary-pieces {
margin-left: auto;
font-size: var(--fs-xs);
color: var(--c-text-faint);
}
.lb-badge {
font-size: var(--fs-xs);
color: var(--c-text-3);
}
.lb-badge-warn { color: var(--c-warn); }
.lb-badge-bad { color: var(--c-bad); }
.lb-badge-ok { color: var(--c-good); }
/* Per-player rows. Name on the left, MS / OS / ✓ tag pills on the
right. Reads as a mini-table at a glance: who's contesting and how
hard. */
.lb-players {
display: flex;
flex-direction: column;
gap: 3px;
font-size: var(--fs-sm);
border-top: 1px solid var(--c-border);
padding-top: 6px;
}
.lb-player {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.lb-player-name {
font-weight: 500;
flex: 1;
min-width: 0;
}
.lb-player-tags {
display: inline-flex;
gap: 4px;
flex-shrink: 0;
}
.lb-tag {
font-size: var(--fs-xs);
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
letter-spacing: 0.02em;
}
.lb-tag-ms { color: var(--c-bad); background: rgba(226, 75, 74, 0.12); }
.lb-tag-os { color: var(--c-warn); background: rgba(232, 140, 77, 0.12); }
.lb-tag-have { color: var(--c-text-2); background: rgba(255, 255, 255, 0.06); }
.lb-noint {
font-size: var(--fs-xs);
color: var(--c-text-faint);
font-style: italic;
}
.lb-subtitle {
color: var(--c-text-faint);
font-size: var(--fs-xs);
margin-left: 4px;
}
.lb-drops {
font-size: var(--fs-xs);
color: var(--c-text-3);
border-top: 1px solid var(--c-border);
padding-top: 6px;
line-height: 1.5;
}
.lb-drops-label {
color: var(--c-text-faint);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 9px;
margin-bottom: 4px;
}
/* Each drop is a flex row so item names left-align and boss names
right-align — gives a clean two-column read across all drops in
the card without needing a real
. The 8px gap keeps the
columns visually separated when item + boss are short. */
.lb-drops-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.lb-drop {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: baseline;
}
.lb-drop-item {
color: var(--c-text-2);
flex: 1;
min-width: 0;
}
.lb-drop-boss {
color: var(--c-text-faint);
flex-shrink: 0;
text-align: right;
}
.cov-group {
background: var(--c-surface);
border-radius: 8px;
border: 1px solid var(--c-border);
overflow: hidden;
}
.cov-group-header {
background: var(--c-surface-2);
padding: 6px 10px;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 2px;
color: var(--c-accent);
text-transform: uppercase;
border-bottom: 1px solid var(--c-border);
}
.cov-group-body { padding: 9px; }
/* Shrink player rows to content width so empty whitespace doesn't
stretch from the name to the group-card edge. The hover handler
(showPlayerTooltip) now triggers only over the name itself, which
matches the affordance — there was nothing to interact with in
the trailing whitespace anyway. Per user. */
.cov-player { font-size: var(--fs-sm); margin-bottom: 3px; width: fit-content; max-width: 100%; }
.cov-buff-list { border-top: 1px solid var(--c-border); padding-top: 8px; margin-top: 8px; }
.cov-prio-section { margin-top: 8px; }
.cov-prio-section:first-child { margin-top: 0; }
.cov-prio-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-text-faint);
margin-bottom: 4px;
}
.cov-prio-section .buff-group-tags { flex-direction: column; align-items: flex-start; gap: 3px; }
.cov-global-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 10px 12px 12px;
/* No margin — the parent .tab-content-wrap is a flex column with
gap: var(--sp-2), which handles the spacing between this card
and the .coverage-groups grid below. The earlier 18px bottom
margin stacked on top of the flex gap (margin doesn't collapse
inside flex) for ~26px total — read as too much breathing room. */
margin: 0;
}
.cov-global-title {
font-size: var(--fs-md);
font-weight: 700;
letter-spacing: 2px;
color: var(--c-accent);
text-transform: uppercase;
margin-bottom: 10px;
}
.cov-global-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.cov-global-col {
min-width: 0;
background: var(--c-surface-2);
border: 1px solid var(--c-border);
border-radius: 6px;
padding: 10px 12px;
}
.cov-global-coltitle {
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #aab4c2;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--c-border);
}
@media (max-width: 720px) {
.cov-global-cols { grid-template-columns: 1fr; gap: 12px; }
}
.cov-buff-row {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
font-size: var(--fs-xs);
}
.cov-dot {
width: 5px; height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.cov-dot.Critical { background: #E0703A; }
.cov-dot.High { background: #4080c0; }
.cov-dot.Situational { background: #bbb; }
.cov-buff-name { color: #555; }
.cov-scope { font-size: 9px; color: #bbb; margin-left: auto; }
.cov-none { font-size: var(--fs-xs); color: #888; font-style: italic; }
/* ── Tab panels ── */
.tab-panel { display: none; padding-bottom: 12px; }
.tab-panel.active { display: block; }
/* ── Raid Builder subnav ── */
/* Mirrors .loot-subnav structure: subnav row with tab buttons +
per-raid config controls, sitting at the top of the unified
tab-raidbuilder content. Was previously a free-floating element
between the page header and tab content (in header.php); moved
inside the tab-panel so it visually belongs to the content area. */
.raid-tab-wrap {
/* Match .loot-tab-wrap so subnav is aligned with the centered
content + sits with the same top inset (var(--sp-5) above,
var(--sp-6) on each side, max-width 1280 with auto margins).
Earlier this was padding:0 which made the subnav run flush
to the viewport edges and read as detached from the content. */
padding: var(--sp-5) var(--sp-6) 0;
max-width: 1280px;
margin: 0 auto;
}
/* The inner sub-view partials (tab-comp / tab-buffs / tab-coverage)
each contain a `.tab-content-wrap` with its own padding + max-width
+ auto margins — that styling is correct for their original use
(top-level tab-panels), but when nested inside the new
.raid-tab-wrap they'd double-pad horizontally and re-cap width.
Zero out the inner wrapper's offsets so the outer wrap wins. The
inner flex column layout (display:flex; flex-direction:column;
gap:var(--sp-2)) is preserved. */
.raid-tab-wrap .tab-content-wrap {
padding: 0;
max-width: none;
margin: 0;
}
.raid-subnav {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
align-items: center;
margin-bottom: var(--sp-5);
border-bottom: 1px solid var(--c-border);
padding-bottom: var(--sp-3);
/* Sticky pin against the page header — same pattern the wishlist
sticky toolbar (.wl-sticky-toolbar) uses on the Loot page. The
subnav stays in view while the user scrolls through long
sub-views (Group Editor / Loot Balance / Buff Coverage / Buff
Editor) so they never lose access to the sub-tab buttons or the
Select Raid dropdown.
- top: var(--sticky-header-h) anchors below the page header.
- background: var(--c-bg) keeps content from showing through.
- padding-top + negative margin-top neutralize each other so the
unpinned visual position stays where it was; the breathing
room above the buttons only matters once pinned.
- box-shadow gates on .is-stuck (added by IntersectionObserver
once the bar starts pinning) so unpinned scroll position has
no shadow. */
position: sticky;
top: var(--sticky-header-h, 100px);
z-index: 5;
background: var(--c-bg);
/* Padding-top matches the EFFECTIVE breathing room above the
wishlist sticky toolbar's filter buttons (=parent .wl-sticky-
toolbar's padding-top var(--sp-2) + child .wl-armor-filter's
padding-top var(--sp-2) = ~16px combined). The raid subnav is a
single flat row so we collapse that into one var(--sp-4) (14px)
so the buttons don't kiss the page-header bottom when pinned.
Negative margin-top neutralizes the new padding so the unpinned
bar sits at its original Y. */
padding-top: var(--sp-4);
margin-top: calc(-1 * var(--sp-4));
box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0);
transition: box-shadow 0.15s ease;
}
.raid-subnav.is-stuck {
box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.55);
}
/* On mobile, the sticky raid subnav burns precious vertical space —
the page is already short enough that scrolling-as-normal is fine.
Per user "on mobile raid builder loot balance the sticky sub nav
is not needed". position: static drops the sticky behavior; padding
and negative margin reset to default so the bar sits at its natural
Y without the desktop's anti-overlap math. */
@media (max-width: 700px) {
.raid-subnav {
position: static;
padding-top: 0;
margin-top: 0;
box-shadow: none;
}
}
.raid-subnav-divider,
.roster-subnav-divider {
display: inline-block;
flex: 0 0 auto; /* a 1px rule must never shrink in the flex row */
width: 1px;
height: 22px;
background: var(--c-border);
align-self: center;
margin: 0 var(--sp-1);
}
/* Wraps the three sub-tab buttons so they can be reordered as a unit
on mobile (config controls go above them, with the subnav's
border-bottom as the divider between rows). On desktop this is
transparent — inline-flex with the same gap as .raid-subnav so
buttons sit side-by-side with no extra spacing. */
.raid-subnav-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: var(--sp-2);
align-items: center;
}
.raid-subnav-extras {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin-left: auto;
flex-wrap: wrap;
}
/* "Loot System: Vis Maior TMB EXPORT EDIT" cluster on the right of
the Raid Builder subnav. The label+provider ("Loot System: Vis
Maior") is now ONE flex child with a literal space character —
that handles the colon-to-name gap as natural word-spacing
(~1 character). This rule only adds spacing BETWEEN that label
group and the buttons that follow (and between buttons). Margin-
left rather than flex-gap because gap on the inline-flex span
collapses to 0 depending on the surrounding flex context (gap
was 14px before — read as flush). Desktop-scoped (≥701px) so it
doesn't compound with the mobile rule's `gap: 8px 14px`. 8px =
smaller breathing room than the previous 14px, per user. */
@media (min-width: 701px) {
#comp-sr-bar > * + * {
margin-left: 8px !important;
}
}
/* The divider following #comp-sr-bar (visual separator between the
Loot System bar and the config-controls cluster). Hidden when the
bar itself is empty — i.e. no raid config selected — so we don't
leave an orphan vertical line next to a blank slot. Order in the
subnav row was reshuffled per user so the bar now sits BEFORE the
config controls; the divider's adjacent-sibling check flips
accordingly. */
.raid-subnav #comp-sr-bar:empty + .comp-sr-divider {
display: none;
}
/* Site-setting toggle: when lootProviderUiEnabled is false (the
default), hide the Loot System bar AND its surrounding divider on
the Raid Builder subnav. The GM can re-enable from the Admin tab.
Soft hide — the bar itself still renders into the DOM, just gets
display:none, so existing renderers keep working under the hood. */
body.hide-loot-provider-ui #comp-sr-bar,
body.hide-loot-provider-ui .comp-sr-divider {
display: none !important;
}
/* The .config-select dropdown's base size (fs-sm + 5px vertical
padding) is TALLER than .tab-btn.btn-small (fs-xs + 3px vertical),
so a default-sized select stretched the whole subnav row taller
than the loot subnav — visually the raid subnav sat ~4px lower
because the row's vertical center shifted. Scope a btn-small-
matching height override so the row aligns with the loot subnav.
Same trick the .loot-subnav-extras .admin-select rule uses. */
.raid-subnav-extras .config-select {
font-size: var(--fs-xs);
line-height: 1.4;
padding: 3px 26px 3px 10px;
min-width: 160px;
box-sizing: border-box;
/* Pin the dropdown's outer height to .tab-btn.btn-small's
computed height (fs-xs 11px × line-height 1.4 + padding 3+3 +
border 1+1 ≈ 23.4px) so the SELECT RAID dropdown is identical
in height to the +New / Edit / Delete buttons sitting next
to it.