/* Authenticated application only. Tokens follow docs/RaidSync_Design_Catalog.md.
   Mobile: bottom navigation. Tablet: 80px rail. Desktop: 240px sidebar. */
.cp-shell, .cp-auth-loading, .cp-onboarding-shell {
    --bg-0: #080d0c;
    --bg-1: #0b1211;
    --bg-2: #0f1715;
    --surface-1: #111a18;
    --surface-2: #151f1d;
    --surface-3: #1a2623;
    --border-1: #24302d;
    --border-2: #31413c;
    --text-1: #f3f6f5;
    --text-2: #bbc5c1;
    --text-3: #7f8d88;
    --green-400: #82e69e;
    --green-500: #65d987;
    --green-soft: rgb(101 217 135 / 12%);
    --green-border: rgb(101 217 135 / 40%);
    --danger: #e76e6e;
    --danger-soft: rgb(231 110 110 / 12%);
    --danger-border: rgb(231 110 110 / 35%);
    --warning: #e6b955;
    --warning-soft: rgb(230 185 85 / 12%);
    --warning-border: rgb(230 185 85 / 35%);
    --info: #71a8e8;
    --info-soft: rgb(113 168 232 / 12%);
    --info-border: rgb(113 168 232 / 35%);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    color-scheme: dark;
    color: var(--text-1);
    font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background: radial-gradient(circle at 70% 0%, rgb(48 90 67 / 8%), transparent 36%),
        linear-gradient(180deg, var(--bg-1), var(--bg-0));
    min-height: 100vh;
    min-height: 100dvh;
}
/* .cp-onboarding-shell is a sibling root, not a descendant of .cp-shell -
   ControlPanelShell is deliberately not rendered while onboarding is
   pending (see ProtectedLayout) - so every shell-wide reset below needs to
   apply to both roots explicitly. */
.cp-shell *, .cp-shell *::before, .cp-shell *::after,
.cp-onboarding-shell *, .cp-onboarding-shell *::before, .cp-onboarding-shell *::after { box-sizing: border-box; }
.cp-shell button, .cp-shell input, .cp-shell select, .cp-onboarding-shell button, .cp-onboarding-shell input, .cp-onboarding-shell select { font: inherit; }
.cp-shell button, .cp-shell a, .cp-onboarding-shell button { -webkit-tap-highlight-color: transparent; }
.cp-shell button, .cp-onboarding-shell button { cursor: pointer; }
.cp-shell button:disabled, .cp-onboarding-shell button:disabled { cursor: wait; color: var(--text-3); }
.cp-shell :where(a, button, input, select, [tabindex]):focus-visible,
.cp-onboarding-shell :where(a, button, input, select, [tabindex]):focus-visible {
    outline: 2px solid var(--green-400);
    outline-offset: 4px;
}
.cp-shell :where(a, button) { touch-action: manipulation; }
.cp-auth-loading { display: grid; place-items: center; }
.cp-onboarding-shell { display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); overflow-y: auto; }
/* min-width: 0 overrides the flex/grid default of min-width: auto - without
   it, a wide enough piece of content in .cp-field-static below can refuse to
   shrink and force this panel past its own max-width, off the mobile
   viewport. Same reasoning as the existing .cp-panel/.cp-panel-body rules. */
.cp-onboarding-panel {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 480px;
    margin-top: 18px;
    /* A little depth instead of a flat surface-1 fill. */
    background: radial-gradient(140% 90% at 50% -15%, rgb(101 217 135 / 7%), transparent 60%), var(--surface-1);
    box-shadow: 0 24px 60px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 2%);
}
/* Same accent as the login card - onboarding is explicitly on the design
   catalog's short list of places a fantasy asset is allowed. Straddles the
   panel's top edge the same way EmptyLayout's own divider does. */
.cp-onboarding-ornament { position: absolute; top: 0; left: 50%; width: 220px; max-width: 60%; transform: translate(-50%, -55%); pointer-events: none; filter: drop-shadow(0 6px 14px rgb(0 0 0 / 55%)); }
.cp-onboarding-header { flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding-top: 28px; }
.cp-onboarding-intro { margin: 4px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.cp-onboarding-section-label { margin: 0 0 var(--space-3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cp-onboarding-actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); padding: var(--space-4) 20px 20px; border-top: 1px solid var(--border-1); }
.cp-onboarding-actions .cp-btn { width: 100%; }
@media (min-width: 640px) {
    .cp-onboarding-actions .cp-btn { width: auto; }
}
.cp-onboarding-error { margin: var(--space-2) 0 0; font-size: 13px; color: var(--danger); }

.cp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: var(--space-4); }
.cp-field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.cp-field-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.cp-field-hint { font-size: 12px; color: var(--text-3); }
.cp-field-error { margin: 0; font-size: 12px; color: var(--danger); }
.cp-field-static { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-2); color: var(--text-2); }
.cp-field-static > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-field-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-400); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.cp-input { width: 100%; height: 40px; padding: 0 12px; background: #0e1513; border: 1px solid #2b3834; color: var(--text-1); border-radius: var(--radius-md); }
.cp-input::placeholder { color: #70807a; }
.cp-input:focus-visible { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-soft); }
.cp-input--select { appearance: none; }

/* Leading icon (and, for selects, a trailing chevron) inside the field
   itself - a plain unmarked box for every input read flatter than it needed
   to. */
.cp-input-wrap { position: relative; }
.cp-input-wrap .cp-input { padding-left: 40px; }
.cp-input-wrap .cp-input--select { padding-right: 36px; }
.cp-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; transition: color 140ms ease; }
.cp-input-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.cp-input-wrap:focus-within .cp-input-icon { color: var(--green-400); }

/* The one thing on the page that isn't a form control - reads as a
   confirmed-identity card instead of two boxes that look like disabled
   inputs. */
.cp-identity-strip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--green-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgb(101 217 135 / 10%), transparent 65%), var(--bg-2);
}
.cp-identity-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--green-soft); color: var(--green-400); }
.cp-identity-avatar .cp-icon { width: 20px; height: 20px; }
.cp-identity-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cp-identity-info strong { font-size: 15px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-identity-info span { font-size: 12px; color: var(--text-3); }

.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; }
.cp-btn-primary { background: #173523; border-color: #318754; color: var(--green-400); }
.cp-btn-primary:hover:not(:disabled) { background: #1d432c; border-color: var(--green-500); color: #a2efb6; }
.cp-btn-primary:active:not(:disabled) { background: #153020; transform: translateY(1px); }
.cp-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(101 217 135 / 14%); }
.cp-btn-primary:disabled { background: #151c1a; border-color: #26302d; color: #5e6965; opacity: .72; }
.cp-btn-lg { height: 44px; padding: 0 22px; font-size: 15px; }

@media (min-width: 640px) {
    .cp-field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.cp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cp-skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 16px; border-radius: 8px; z-index: 50; background: var(--green-400); color: var(--bg-0); }
.cp-skip-link:focus { top: 12px; }
.cp-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.cp-sidebar { display: none; }
.cp-workspace { min-width: 0; }
.cp-brand { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cp-brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.cp-mobile-brand { width: 102px; flex: 0 0 auto; }
.cp-topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 10px;
    height: calc(72px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    background: rgb(11 18 17 / 97%);
    border-bottom: 1px solid var(--border-1);
}
.cp-topbar-slot { display: none; }
.cp-account-trigger { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 6px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-2); }
.cp-account-trigger:hover { background: var(--surface-2); border-color: var(--border-1); }
.cp-account-trigger:active { background: var(--surface-3); }
.cp-account-trigger > .cp-icon { width: 16px; }
.cp-account-avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-2); border-radius: 50%; background: var(--surface-2); color: var(--text-2); }
.cp-account-avatar .cp-icon { width: 18px; height: 18px; }
.cp-account-label { display: none; text-align: left; color: var(--text-1); font-weight: 500; }
.cp-account-label small { display: block; color: var(--text-3); font-size: 12px; font-weight: 400; }
.cp-popover { color: var(--text-1); background: var(--surface-1); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: 0 16px 48px rgb(0 0 0 / 40%); padding: 8px; }
.cp-account-popover { position: fixed; inset: calc(80px + env(safe-area-inset-top)) 16px auto auto; width: min(260px, calc(100vw - 32px)); margin: 0; }
.cp-popover-label { margin: 8px 12px 12px; color: var(--text-3); font-size: 12px; }
.cp-menu-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--radius-md); color: var(--text-2); background: transparent; text-align: left; }
.cp-menu-action:hover { background: var(--surface-2); color: var(--text-1); }
.cp-account-error { color: var(--danger); margin: 12px; font-size: 12px; }
.cp-main { outline: none; }
.cp-content-area { padding: 28px max(16px, env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.cp-page-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.cp-page-header h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.cp-page-header p { margin: 10px 0 0; color: var(--text-2); }
.cp-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-page-body { display: grid; gap: 24px; min-width: 0; }
.cp-panel { min-width: 0; border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: inset 0 1px 0 rgb(255 255 255 / 1.5%); }
.cp-panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 16px 20px; border-bottom: 1px solid var(--border-1); }
.cp-panel-header h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.cp-panel-body { padding: 20px; min-width: 0; }
.cp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; padding: 32px 0; text-align: center; }
.cp-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; }
.cp-empty-icon .cp-icon { width: 25px; height: 25px; }
.cp-empty-state h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-2); }
.cp-empty-state p { margin: 8px 0 0; max-width: 320px; font-size: 13px; color: var(--text-3); }
.cp-nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; background: transparent; font-weight: 400; }
.cp-nav-item .cp-icon { color: var(--text-3); }
a.cp-nav-item:hover, button.cp-nav-item:hover { background: var(--surface-2); color: var(--text-1); }
.cp-nav-item.active { background: var(--green-soft); border-color: rgb(101 217 135 / 10%); color: var(--green-400); font-weight: 500; }
.cp-nav-item.active .cp-icon { color: var(--green-400); }
.cp-nav-item--unavailable { color: var(--text-3); cursor: not-allowed; }
.cp-mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--bg-1); border-top: 1px solid var(--border-1); }
/* Extend the same opaque surface into Safari's obscured toolbar area. This
   decorative overdraw adds no spacing and never intercepts a touch. */
.cp-mobile-nav::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: max(160px, env(safe-area-inset-bottom));
    background: var(--bg-1);
    pointer-events: none;
}
/* Let Safari sample the actual navigation, not the global 4px tint strip. */
@media (max-width: 767px) {
    body:has(.cp-mobile-nav)::after { content: none; }
}
.cp-mobile-nav .cp-nav-item { flex-direction: column; justify-content: center; gap: 5px; height: 72px; padding: 8px 0; border: 0; border-radius: 0; font-size: 12px; }
.cp-mobile-nav .cp-nav-item.active { background: linear-gradient(180deg, var(--green-soft), transparent); }
.cp-mobile-nav .cp-nav-item.active::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--green-500); }
.cp-mobile-nav .cp-icon { width: 22px; height: 22px; }
.cp-more-popover { position: fixed; inset: auto 12px calc(84px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - 180px); overflow: auto; margin: 0; padding: 12px; }
.cp-popover-heading { display: flex; align-items: center; justify-content: space-between; padding-left: 12px; }
.cp-popover-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cp-icon-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-2); }
.cp-icon-button:hover { background: var(--surface-2); }
@media (min-width: 768px) {
    .cp-shell { display: grid; grid-template-columns: 80px minmax(0, 1fr); }
    .cp-sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 0 8px; border-right: 1px solid var(--border-1); background: rgb(11 18 17 / 80%); overflow-y: auto; scrollbar-width: thin; }
    .cp-sidebar-brand { min-height: 104px; display: grid; place-items: center; }
    .cp-sidebar-brand .cp-brand { width: 64px; }
    .cp-side-links { display: flex; flex-direction: column; gap: 6px; }
    .cp-sidebar .cp-nav-item { justify-content: center; min-height: 52px; padding: 14px 0; }
    .cp-sidebar .cp-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .cp-nav-caption { margin: 14px 12px 6px; height: 1px; overflow: hidden; font-size: 0; background: var(--border-1); }
    .cp-sidebar .cp-nav-item.active::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--green-500); border-radius: 2px; }
    .cp-sidebar-footer { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: auto; padding: 24px 0; color: var(--text-3); }
    .cp-sidebar-footer span { display: none; }
    .cp-mobile-brand, .cp-mobile-nav { display: none; }
    .cp-more-popover:popover-open { display: none; }
    .cp-topbar { height: 64px; gap: 16px; padding: 0 24px; }
    .cp-topbar-slot { display: block; flex: 1; min-width: 0; }
    .cp-account-label { display: block; }
    .cp-account-popover { top: 72px; right: 24px; }
    .cp-content-area { padding: 32px 24px; }
    .cp-page-header { flex-direction: row; align-items: center; justify-content: space-between; }
    .cp-page-header h1 { font-size: 32px; }
    .cp-empty-state { min-height: 380px; }
}
@media (min-width: 1200px) {
    .cp-shell { grid-template-columns: 240px minmax(0, 1fr); }
    .cp-sidebar { padding: 0 12px; }
    .cp-sidebar-brand { min-height: 136px; }
    .cp-sidebar-brand .cp-brand { width: 172px; }
    .cp-sidebar .cp-nav-item { justify-content: flex-start; padding: 11px 14px; min-height: 46px; }
    .cp-sidebar .cp-nav-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .cp-nav-caption { margin: 26px 14px 8px; height: auto; overflow: visible; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: none; color: var(--text-3); }
    .cp-sidebar-footer { justify-content: flex-start; margin: auto 12px 0; padding: 24px 2px; border-top: 1px solid var(--border-1); }
    .cp-sidebar-footer span { display: block; color: var(--text-2); font-size: 13px; }
    .cp-sidebar-footer small { display: block; color: var(--text-3); font-size: 11px; }
    .cp-topbar { padding-inline: 32px; }
    .cp-content-area { padding: 36px 32px; }
    .cp-account-popover { right: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
    .cp-shell a, .cp-shell button { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
}

/* ==========================================================================
   Gilden- und Community-Verwaltung
   Buttons, badges, alerts, list/table rows, modal dialogs and the guild
   switcher. Tokens and sizes follow docs/RaidSync_Design_Catalog.md; nothing
   here restyles the shell above, it only adds the pieces the guild pages need.
   ========================================================================== */

/* -- Buttons (catalog §20). Primary already exists above. ------------------ */
a.cp-btn { text-decoration: none; }
.cp-btn-icon { width: 16px; height: 16px; }
.cp-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.cp-btn-secondary { background: var(--surface-1); border-color: var(--border-2); color: var(--text-1); }
.cp-btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
.cp-btn-secondary:active:not(:disabled) { background: var(--surface-3); transform: translateY(1px); }
.cp-btn-secondary:disabled { background: #151c1a; border-color: #26302d; color: #5e6965; opacity: .72; }
.cp-btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.cp-btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text-1); }
.cp-btn-ghost:disabled { color: var(--text-3); }
/* Destructive but low emphasis - used for row actions, never as a page's
   primary button. The red danger button below is the deliberate one. */
.cp-btn-ghost--danger { color: var(--danger); }
.cp-btn-ghost--danger:hover:not(:disabled) { background: var(--danger-soft); color: #f2a2a2; }
.cp-btn-danger { background: var(--danger-soft); border-color: var(--danger-border); color: #f0a5a5; }
.cp-btn-danger:hover:not(:disabled) { background: rgb(231 110 110 / 18%); border-color: var(--danger); color: #f7bcbc; }
.cp-btn-danger:active:not(:disabled) { transform: translateY(1px); }
.cp-btn-outline-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.cp-btn-outline-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); color: #f7bcbc; }
.cp-btn-outline-danger:active:not(:disabled) { transform: translateY(1px); }
.cp-icon-button .cp-icon { width: 18px; height: 18px; }
.cp-icon-button:disabled { color: var(--text-3); }
.cp-icon-button--danger { color: var(--danger); }
.cp-icon-button--danger:hover:not(:disabled) { background: var(--danger-soft); }

/* -- Badges (catalog §35/§36) --------------------------------------------- */
.cp-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.cp-badge--neutral { background: var(--surface-3); border-color: var(--border-2); color: var(--text-2); }
.cp-badge--success { background: var(--green-soft); border-color: var(--green-border); color: var(--green-400); }
.cp-badge--info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.cp-badge--warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.cp-badge--danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

/* Count badge on navigation items and buttons, e.g. open join requests. */
.cp-nav-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--green-soft); color: var(--green-400); font-size: 11px; font-weight: 600; }

/* -- Inline feedback (catalog §55/§56) ------------------------------------ */
.cp-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--space-4); padding: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-md); font-size: 13px; line-height: 1.55; }
.cp-alert-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.cp-alert a { color: inherit; }
.cp-alert--danger { background: var(--danger-soft); border-color: var(--danger-border); color: #efb7b7; }
.cp-alert--danger .cp-alert-icon { color: var(--danger); }
.cp-alert--warning { background: var(--warning-soft); border-color: var(--warning-border); color: #e8d3a4; }
.cp-alert--warning .cp-alert-icon { color: var(--warning); }
.cp-alert--info { background: var(--info-soft); border-color: var(--info-border); color: #bfd6f2; }
.cp-alert--info .cp-alert-icon { color: var(--info); }
.cp-alert--success { background: var(--green-soft); border-color: var(--green-border); color: #b6e9c6; }
.cp-alert--success .cp-alert-icon { color: var(--green-400); }

/* -- Guild switcher in the topbar ----------------------------------------- */
.cp-guild-switcher { flex: 1 1 auto; min-width: 0; }
.cp-guild-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-1); }
.cp-guild-trigger:hover { background: var(--surface-2); border-color: var(--border-2); }
.cp-guild-trigger:active { background: var(--surface-3); }
.cp-guild-crest { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--green-border); border-radius: 9px; background: var(--green-soft); color: var(--green-400); }
.cp-guild-crest .cp-icon { width: 18px; height: 18px; }
.cp-guild-label { display: flex; flex-direction: column; flex: 1; min-width: 0; text-align: left; }
.cp-guild-label strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cp-guild-label small { overflow: hidden; color: var(--text-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cp-guild-chevron { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-3); }
.cp-guild-popover { position: fixed; inset: calc(80px + env(safe-area-inset-top)) auto auto max(16px, env(safe-area-inset-left)); width: min(320px, calc(100vw - 32px)); max-height: 70dvh; margin: 0; overflow-y: auto; }
.cp-guild-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-1); text-align: left; }
.cp-guild-option:hover { background: var(--surface-2); }
.cp-guild-option.is-active { background: var(--green-soft); border-color: rgb(101 217 135 / 22%); }
.cp-guild-option-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cp-guild-option-text strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cp-guild-option-text small { overflow: hidden; color: var(--text-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cp-popover-divider { height: 1px; margin: 8px 4px; background: var(--border-1); }

/* -- Rows: mobile list, desktop table (catalog §33/§34/§72) --------------- */
.cp-datalist { display: flex; flex-direction: column; }
.cp-datalist-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 2px; border-bottom: 1px solid var(--border-1); color: var(--text-1); text-decoration: none; }
.cp-datalist-head { display: none; }
.cp-datalist-row:last-child { border-bottom: 0; }
.cp-datalist-row--link:hover { background: var(--surface-2); }
.cp-datalist-primary { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cp-datalist-title { display: flex; flex-direction: column; min-width: 0; }
.cp-datalist-title strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cp-datalist-title small { overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cp-datalist-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; color: var(--text-2); font-size: 13px; }
/* On mobile every value carries its own label, because the header row is not
   shown - the stacked list transformation rather than a horizontal scroller. */
.cp-datalist-cell[data-label]::before { content: attr(data-label) ": "; color: var(--text-3); font-size: 12px; }
.cp-datalist-cell:empty { display: none; }
.cp-datalist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-datalist-actions:empty { display: none; }
.cp-row-chevron { display: none; }
.cp-loading-note { margin: 0; padding: 28px 0; color: var(--text-3); font-size: 13px; text-align: center; }

/* -- Avatars (catalog §38) and the guild crest (§39) ---------------------- */
.cp-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--border-2); border-radius: 50%; background: var(--surface-2); color: var(--text-2); }
.cp-avatar .cp-icon { width: 18px; height: 18px; }
.cp-avatar--crest { border-color: var(--green-border); border-radius: 9px; background: var(--green-soft); color: var(--green-400); }
.cp-avatar--lg { width: 48px; height: 48px; }
.cp-avatar--lg .cp-icon { width: 24px; height: 24px; }

/* -- Statistics row (catalog §19) ----------------------------------------- */
.cp-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cp-stat { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 14px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-2); }
.cp-stat-icon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--surface-2); color: var(--text-3); }
.cp-stat-text { display: flex; flex-direction: column; min-width: 0; }
.cp-stat-text small { color: var(--text-3); font-size: 12px; }
.cp-stat-text strong { overflow: hidden; font-size: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

/* -- Forms: choice cards, actions, notes ---------------------------------- */
.cp-fieldset { min-width: 0; margin: 0 0 var(--space-4); padding: 0; border: 0; }
.cp-fieldset legend { margin-bottom: var(--space-2); padding: 0; }
.cp-choice-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cp-choice { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-2); cursor: pointer; }
.cp-choice:hover { border-color: var(--border-2); background: var(--surface-2); }
.cp-choice.is-selected { border-color: var(--green-border); background: linear-gradient(135deg, rgb(101 217 135 / 8%), transparent 65%), var(--bg-2); }
.cp-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cp-choice:has(input:focus-visible) { outline: 2px solid var(--green-400); outline-offset: 3px; }
.cp-choice-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--surface-2); color: var(--text-3); }
.cp-choice.is-selected .cp-choice-icon { border-color: var(--green-border); background: var(--green-soft); color: var(--green-400); }
.cp-choice-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-choice-text strong { font-size: 14px; font-weight: 600; }
.cp-choice-text small { color: var(--text-3); font-size: 12px; line-height: 1.45; }
.cp-form-note { margin: 0 0 var(--space-4); color: var(--text-3); font-size: 12px; line-height: 1.5; }
.cp-form-actions { display: flex; flex-direction: column-reverse; gap: var(--space-2); margin-top: var(--space-4); }
.cp-form-actions .cp-btn { width: 100%; }
.cp-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }

/* -- Invite code ---------------------------------------------------------- */
.cp-input--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.cp-code-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-3); padding: 12px 14px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-2); }
.cp-code-field code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--green-400); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; letter-spacing: .16em; }
.cp-invite-preview { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-4); padding: 16px; border: 1px solid var(--green-border); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgb(101 217 135 / 10%), transparent 65%), var(--bg-2); }
.cp-invite-preview-text { display: flex; flex-direction: column; min-width: 0; }
.cp-invite-preview-text strong { font-size: 17px; font-weight: 600; }
.cp-invite-preview-text span { color: var(--text-3); font-size: 13px; }

/* -- Danger zone (catalog §64: kept away from everyday controls) ---------- */
.cp-danger-zone { border-color: var(--danger-border); }
.cp-danger-zone .cp-panel-header { border-bottom-color: var(--danger-border); }
.cp-danger-zone .cp-panel-header h2 { color: var(--danger); }
.cp-danger-zone-text { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.cp-danger-zone-text strong { display: block; margin-bottom: 4px; color: var(--text-1); font-size: 14px; }

/* -- Confirmation dialog (catalog §58/§60) --------------------------------
   Genuinely modal, unlike the account and navigation menus: a destructive
   action must not be dismissible by scrolling past it. Mobile is a bottom
   sheet, desktop a centred 480px dialog. */
.cp-modal-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; overflow-y: auto; background: rgb(4 8 7 / 72%); outline: none; }
.cp-modal { width: 100%; max-width: 480px; border: 1px solid var(--border-2); border-radius: 16px 16px 0 0; background: var(--surface-1); box-shadow: 0 24px 60px rgb(0 0 0 / 55%); }
.cp-modal--danger { border-color: var(--danger-border); }
.cp-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 16px 20px; border-bottom: 1px solid var(--border-1); }
.cp-modal-header h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.cp-modal-body { padding: 20px; }
.cp-modal-description { margin: 0 0 var(--space-4); color: var(--text-2); font-size: 13px; line-height: 1.55; }
.cp-modal-body .cp-field:last-child, .cp-modal-body .cp-alert:last-child { margin-bottom: 0; }
.cp-modal-actions { display: flex; flex-direction: column-reverse; gap: var(--space-2); padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-1); }
.cp-modal-actions .cp-btn { width: 100%; }

@media (min-width: 640px) {
    .cp-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-form-actions { flex-direction: row; align-items: center; justify-content: flex-end; }
    .cp-form-actions .cp-btn { width: auto; }
    .cp-modal-backdrop { align-items: center; padding: var(--space-6); }
    .cp-modal { border-radius: var(--radius-lg); }
    .cp-modal-actions { flex-direction: row; justify-content: flex-end; padding-bottom: 20px; }
    .cp-modal-actions .cp-btn { width: auto; }
}

@media (min-width: 768px) {
    .cp-guild-switcher { flex: 0 1 260px; }
    .cp-guild-popover { inset: 72px auto auto 96px; }
    /* The 80px rail hides labels, so a count sits in the item's corner instead
       of after the (invisible) text. */
    .cp-sidebar .cp-nav-badge { position: absolute; top: 6px; right: 8px; margin: 0; }
    .cp-datalist-head { display: grid; padding: 6px 2px 10px; color: var(--text-3); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
    /* Fixed widths, because each row is its own grid here: a content-sized
       track would be wide in a row with actions and zero in one without, and
       the 1fr name column would swallow the difference - so the columns would
       not line up between rows. The subgrid block below replaces this with
       tracks shared by the whole list wherever it is supported. */
    .cp-datalist-row { grid-template-columns: minmax(0, 1fr) minmax(0, 200px) minmax(0, 130px) minmax(0, 180px); align-items: center; gap: 16px; min-height: 56px; padding: 10px 2px; }
    .cp-datalist-cell[data-label]::before { content: none; }
    .cp-datalist-cell:empty { display: block; }
    .cp-datalist-actions { justify-content: flex-end; }
    .cp-datalist-actions:empty { display: block; }
    .cp-row-chevron { display: block; width: 18px; height: 18px; color: var(--text-3); }
}

/* -- Configurable roles ---------------------------------------------------
   Permission checkboxes in the role editor, and the compact role dropdown
   that sits inside a member row. */
.cp-permission-list { display: grid; gap: 10px; }
.cp-permission { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-2); cursor: pointer; }
.cp-permission:hover { border-color: var(--border-2); background: var(--surface-2); }
.cp-permission.is-selected { border-color: var(--green-border); background: linear-gradient(135deg, rgb(101 217 135 / 8%), transparent 65%), var(--bg-2); }
/* The native box is kept in the accessibility tree and focusable; the visible
   tick below is what actually gets styled. */
.cp-permission input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cp-permission:has(input:focus-visible) { outline: 2px solid var(--green-400); outline-offset: 3px; }
.cp-permission-check { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--surface-1); color: transparent; }
.cp-permission.is-selected .cp-permission-check { border-color: var(--green-500); background: var(--green-soft); color: var(--green-400); }
.cp-permission-check .cp-icon { width: 14px; height: 14px; }
.cp-permission-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-permission-text strong { font-size: 14px; font-weight: 600; }
.cp-permission-text small { color: var(--text-3); font-size: 12px; line-height: 1.45; }

.cp-inline-select { position: relative; display: inline-flex; max-width: 100%; min-width: 0; }
.cp-input--compact { width: auto; min-width: 132px; max-width: 100%; height: 32px; padding: 0 30px 0 10px; font-size: 13px; }
.cp-inline-select .cp-input-chevron { right: 8px; }

/* One set of column tracks for the whole list instead of one per row: the
   header, a row with actions and a row without all resolve to the same widths,
   and each column is exactly as wide as its widest content needs. Guarded
   because without subgrid the rule would drop out and leave the rows stacked. */
@supports (grid-template-columns: subgrid) {
    @media (min-width: 768px) {
        .cp-datalist { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 16px; }
        .cp-datalist-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
    }
}

@media (min-width: 1200px) {
    .cp-guild-switcher { flex: 0 1 300px; }
    .cp-guild-popover { inset: 72px auto auto 264px; }
    .cp-sidebar .cp-nav-badge { position: static; margin-left: auto; }
    .cp-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Raid planning: calendar rows and role lanes reuse the ControlPanel tokens. */
.event-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-bottom: 24px; }
.event-toolbar label { display: grid; gap: 8px; flex: 1 1 180px; color: var(--text-2); font-size: 13px; }
.event-list-row { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px 16px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--border-1); text-decoration: none; color: var(--text-2); font-size: 13px; }
.event-list-row:hover { background: var(--surface-2); }
.event-list-row > .cp-icon { display: none; }
.event-date { display: flex; flex-direction: column; align-items: center; color: var(--green-400); font-size: 12px; }
.event-date strong { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.event-list-title { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.event-list-title strong { color: var(--text-1); font-size: 16px; overflow-wrap: anywhere; }
.event-list-title small { color: var(--text-3); line-height: 1.6; }
.event-form-fields { display: grid; gap: 24px; border: 0; margin: 0; padding: 0; min-width: 0; }
.event-form-fields label.cp-field { display: grid; gap: 8px; color: var(--text-2); font-size: 13px; }
.event-form-fields .cp-input, .event-toolbar .cp-input { padding: 10px 12px; width: 100%; min-width: 0; }
.event-form-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.event-description-input { min-height: 112px; resize: vertical; font: inherit; }
.event-description { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); margin: 0 0 24px; }
.event-capacity { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 16px 0; border-block: 1px solid var(--border-1); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.event-capacity > span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.event-capacity > strong { color: var(--green-400); }
.event-capacity .cp-icon { width: 18px; height: 18px; }
.event-comp-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
.event-comp-group { min-width: 0; }
.event-comp-group h3 { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin: 0; border-bottom: 1px solid var(--border-2); font-size: 14px; color: var(--text-1); }
.event-comp-group h3 > span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-3); }
.event-comp-group h3 .cp-icon { width: 18px; height: 18px; color: var(--text-2); }
.event-slot-empty { padding: 20px 0; color: var(--text-3); font-size: 13px; }
.event-player { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-1); }
.event-player-class { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); font-size: 11px; }
.event-player-name { display: flex; flex: 1 1 100px; min-width: 0; flex-direction: column; gap: 3px; }
.event-player-name strong { font-size: 13px; overflow-wrap: anywhere; }
.event-player-name small { font-size: 11px; color: var(--text-3); overflow-wrap: anywhere; }
.event-placement { min-height: 44px; padding-inline: 10px; font-size: 12px; }
@media (min-width: 768px) {
    .event-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .event-list-row { grid-template-columns: 48px minmax(0,1fr) auto auto 20px; }
    .event-list-row > .cp-icon { display: block; }
    .event-comp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1440px) {
    .event-comp-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* Public registration overview and optional composition workspace. */
.event-view-tabs, .event-comp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.event-public-roster .event-player { flex-wrap: nowrap; padding-block: 12px; }
.event-public-roster .event-slot-empty { padding-block: 12px; }
.event-roster-changed { font-size: 12px; color: var(--warning); line-height: 1.5; }
.event-comp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; margin-bottom: 16px; background: var(--surface-1); border: 1px solid var(--border-2); border-radius: var(--radius-lg); }
.event-comp-toolbar strong { color: var(--green-400); font-variant-numeric: tabular-nums; }
.event-comp-toolbar .cp-form-note, .event-comp-toolbar .event-comp-actions { margin-bottom: 0; }
.event-planner { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; align-items: start; }
.event-planner-side { padding: 16px; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); min-width: 0; }
.event-planner-side > h2 { display: flex; justify-content: space-between; font-size: 20px; margin: 0 0 20px; }
.event-planner-side > h2 span { color: var(--text-3); font-variant-numeric: tabular-nums; }
.event-planner-lane { min-height: 100px; padding: 12px; margin-bottom: 16px; border: 1px dashed var(--border-2); border-radius: var(--radius-md); }
.event-planner-lane:last-child { margin-bottom: 0; }
.event-planner-lane > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--text-2); }
.event-planner-lane > h3 span { margin-left: auto; }
.event-planner-lane > h3 .cp-icon { width: 18px; height: 18px; }
.event-planner-lane:hover { border-color: var(--green-border); }
.event-planner-lane .event-slot-empty { margin: 0; font-size: 12px; }
.event-draggable[draggable="true"] { cursor: grab; }
.event-draggable[draggable="true"]:active { cursor: grabbing; }
.event-drag-handle { color: var(--text-3); font-size: 22px; }
.event-move-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.event-move-actions .cp-btn { min-height: 44px; font-size: 12px; padding-inline: 10px; }
@media (min-width: 1000px) {
    .event-planner { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .event-planner-side { padding: 20px; }
}
.event-character-icon { position: relative; display: inline-flex; flex: 0 0 36px; width: 36px; height: 36px; }
.event-character-icon img { object-fit: cover; }
.event-player-spec { position: absolute; right: 0; bottom: 0; border: 1px solid var(--border-2); border-radius: 4px; background: var(--surface-2); }
.event-role-actions, .event-week-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.event-role-actions .cp-btn { min-height: 44px; }
.event-signup-dialog { color: var(--text-1); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow-y: auto; }
.event-signup-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.event-character-choices { display: grid; gap: 8px; margin-block: 16px; }
.event-character-choices .cp-btn { justify-content: flex-start; text-align: left; min-height: 56px; white-space: normal; }
.event-character-choices small { display: block; font-weight: normal; }
/* Shared class colors come from WowClassCatalog; lighter text preserves contrast on dark panels. */
.wow-class-name { color: color-mix(in srgb, var(--class-color) 78%, white); }
.event-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.event-dashboard-grid > .cp-panel { min-width: 0; margin: 0; }
.event-dashboard-grid .cp-panel-header h2 { min-width: 0; overflow-wrap: anywhere; }
.event-dashboard-grid .event-comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .event-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .event-dashboard-grid .event-comp-grid { grid-template-columns: minmax(0, 1fr); } }
.cp-choice input[type="checkbox"] { position: static; width: 18px; height: 18px; opacity: 1; flex-shrink: 0; accent-color: var(--green-500); }
/* Personal and member profiles share the authenticated shell's design tokens. */
.cp-shell .cp-profile-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; border: 1px solid var(--border-2, #31413c); background: var(--surface-2, #151f1d); color: var(--text-1, #f3f6f5); font-weight: 600; }
.cp-shell .cp-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-shell .cp-profile-avatar--large { width: 48px; height: 48px; flex-basis: 48px; }
.cp-shell .cp-profile-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 760px); gap: 32px; align-items: start; }
.cp-shell .cp-profile-overview { display: grid; gap: 20px; min-width: 0; position: sticky; top: 96px; }
.cp-shell .cp-profile-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; min-width: 0; }
.cp-shell .cp-profile-summary h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.cp-shell .cp-profile-summary p { margin: 4px 0 0; }
.cp-shell .cp-profile-overview a { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.cp-shell .cp-profile-form { min-width: 0; }
.cp-shell .cp-profile-form fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.cp-shell .cp-profile-form section { margin-bottom: 24px; scroll-margin-top: 90px; }
.cp-shell .cp-profile-form label { display: block; font-weight: 500; margin: 16px 0 8px; }
.cp-shell .cp-profile-form input[type=file] { width: 100%; min-height: 44px; }
.cp-shell .cp-profile-form input[type=range] { width: 100%; min-height: 44px; accent-color: #65d987; }
.cp-shell .cp-profile-form textarea { resize: vertical; min-height: 120px; padding: 12px; font: inherit; }
.cp-shell .cp-profile-form .cp-profile-choices { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.cp-shell .cp-profile-choices legend { font-weight: 600; margin-bottom: 8px; }
.cp-shell .cp-profile-choices label { display: flex; gap: 10px; align-items: center; min-height: 44px; margin: 0; }
.cp-shell .cp-profile-choices input { width: 18px; height: 18px; accent-color: #65d987; }
.cp-shell .cp-profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cp-shell .cp-profile-crop { display: block; width: min(256px, 100%); height: auto; margin-top: 16px; border-radius: 50%; background: #080d0c; border: 1px solid #31413c; }
.cp-shell .cp-profile-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 0 24px; }
.cp-shell .cp-profile-bio { white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-shell .cp-profile-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-shell .cp-profile-form .validation-message, .cp-shell .cp-profile-form .validation-errors { color: #e76e6e; }
.cp-shell .cp-account-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) {
    .cp-shell .cp-profile-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .cp-shell .cp-profile-overview { position: static; gap: 8px; }
}
@media (max-width: 480px) {
    .cp-shell .cp-profile-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cp-shell .cp-profile-actions > button { width: 100%; }
}

.cp-shell .cp-datalist-title > a { display: inline-flex; align-items: center; min-height: 44px; }

.cp-shell .cp-guild-image { overflow: hidden; flex-shrink: 0; }
.cp-shell .cp-guild-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-shell .cp-guild-image-editor { border: 0; margin: 0; padding: 0; min-width: 0; }
.cp-shell .cp-guild-image-editor label { display: block; font-weight: 500; margin: 16px 0 8px; }
.cp-shell .cp-guild-image-editor input { max-width: 100%; min-height: 44px; }
.cp-shell .cp-guild-image-editor input[type=range] { width: min(100%, 400px); display: block; accent-color: #65d987; }
.cp-shell .cp-guild-image-editor .cp-profile-crop { border-radius: 12px; }
/* Weekly raids: a calendar-led header, readable briefing and compact role lanes. */
.event-week-card { overflow: hidden; }
.event-week-card:only-child { grid-column: 1 / -1; }
@media (min-width: 1400px) {
    .event-dashboard-grid .event-week-card:only-child .event-comp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.event-week-header { display: flex; align-items: center; gap: 20px; padding: 24px; background: linear-gradient(110deg, var(--green-soft), transparent 75%); border-bottom: 1px solid var(--border-1); }
.event-week-date { display: flex; flex: 0 0 64px; flex-direction: column; align-items: center; justify-content: center; min-height: 76px; border: 1px solid var(--green-border); border-radius: 8px; color: var(--green-400); background: var(--bg-2); }
.event-week-date strong { font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.event-week-date span { font-size: 12px; }
.event-week-title { min-width: 0; }
.event-week-title h2 { margin: 6px 0 0; font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; }
.event-week-time { margin: 0; color: var(--text-2); font-size: 12px; }
.event-week-description { padding-left: 16px; border-left: 2px solid var(--border-2); line-height: 1.7; }
.event-week-capacity { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.event-week-capacity .cp-icon { width: 16px; height: 16px; }
.event-week-card .event-comp-grid { gap: 12px; }
.event-week-card .event-comp-group { padding: 12px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2); }
.event-week-card .event-comp-group h3 { padding-bottom: 8px; border-color: var(--border-1); }
.event-week-card .event-comp-group h3 > span { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: 12px; }
.event-week-card .event-slot-empty { margin: 0; padding: 10px 0 0; font-size: 12px; }
.event-week-card .event-player:last-child { border-bottom: 0; padding-bottom: 0; }
.event-week-footer { display: flex; justify-content: flex-end; padding: 16px 20px; background: var(--bg-2); border-top: 1px solid var(--border-1); }

/* Guilds deserve room for their identity and the user's membership. */
.cp-guild-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; }
.cp-guild-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg-2); color: var(--text-1); text-decoration: none; overflow: hidden; transition: border-color 180ms ease, transform 180ms ease; }
.cp-guild-card-heading { display: flex; align-items: center; gap: 20px; padding: 28px; background: linear-gradient(110deg, var(--green-soft), transparent 80%); }
.cp-guild-card-crest { display: grid; place-items: center; flex: 0 0 76px; width: 76px; height: 76px; padding: 6px; border: 1px solid var(--green-border); border-radius: 12px; background: var(--bg-1); }
.cp-guild-card-crest > .cp-icon { width: 40px; height: 40px; color: var(--green-400); }
.cp-guild-card-title { min-width: 0; }
.cp-guild-card-title > span { color: var(--text-3); font-size: 12px; }
.cp-guild-card-title h3 { margin: 6px 0 0; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-guild-card-details { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 24px 28px; }
.cp-guild-card-details > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--text-2); font-size: 13px; }
.cp-guild-detail-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.cp-guild-detail-label .cp-icon { width: 16px; height: 16px; }
.cp-guild-card-details strong { color: var(--text-1); font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cp-guild-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 28px; margin-top: auto; border-top: 1px solid var(--border-1); }
.cp-guild-card-open { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; color: var(--green-400); font-size: 13px; }
.cp-guild-card-open .cp-icon { width: 18px; height: 18px; transition: transform 180ms ease; }
.cp-guild-card:hover { border-color: var(--green-border); transform: translateY(-1px); }
.cp-guild-card:hover .cp-guild-card-open .cp-icon { transform: translateX(3px); }
.cp-guild-requests .cp-empty-state { min-height: 0; align-items: flex-start; padding: 8px 0 8px 68px; position: relative; text-align: left; }
.cp-guild-requests .cp-empty-icon { position: absolute; top: 8px; left: 0; margin: 0; }
.cp-guild-requests .cp-empty-state p { max-width: 560px; }

/* A native stretched link keeps the complete member row keyboard-accessible.
   Management controls sit above it, without nesting controls inside an anchor. */
.cp-member-row { position: relative; isolation: isolate; padding: 16px 12px; }
.cp-member-row::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px; border-left: 2px solid var(--green-500); background: linear-gradient(90deg, var(--green-soft), transparent 80%); opacity: 0; transform: translateX(-6px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.cp-member-row:hover::before, .cp-member-row:focus-within::before { opacity: 1; transform: translateX(0); }
.cp-shell .cp-member-link { color: var(--text-1); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.cp-member-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 6px; }
.cp-shell .cp-member-link:focus-visible { outline: none; }
.cp-member-link:focus-visible::after { outline: 2px solid var(--green-400); outline-offset: 2px; }
.cp-member-control { position: relative; z-index: 2; }
.cp-member-chevron { width: 18px; height: 18px; color: var(--text-3); margin-left: auto; transition: color 180ms ease, transform 180ms ease; }
.cp-member-row:hover .cp-member-chevron { color: var(--green-400); transform: translateX(3px); }
.cp-icon-button { transition: background 160ms ease, color 160ms ease; }
.cp-icon-button:hover:not(:disabled):not(.cp-icon-button--danger) { color: var(--green-400); background: var(--green-soft); }
.event-list-row { border-radius: 6px; transition: background 180ms ease; }
.event-list-row .event-date { padding-block: 8px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2); }
@media (max-width: 599px) {
    .event-week-header { gap: 12px; padding: 16px; }
    .event-week-title h2 { font-size: 18px; }
    .event-week-date { flex-basis: 52px; min-height: 68px; }
    .event-week-footer .cp-btn { width: 100%; }
    .cp-guild-card-heading, .cp-guild-card-details, .cp-guild-card-footer { padding: 20px; }
    .cp-guild-card-heading { gap: 16px; }
    .cp-guild-card-crest { flex-basis: 60px; width: 60px; height: 60px; }
    .cp-guild-card-title h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-guild-card, .cp-guild-card-open .cp-icon, .cp-member-row::before, .cp-member-chevron, .cp-icon-button, .event-list-row { transition: none; transform: none; }
    .cp-guild-card:hover, .cp-guild-card:hover .cp-guild-card-open .cp-icon, .cp-member-row:hover .cp-member-chevron { transform: none; }
}
/* Guild overview: identity first, then a quiet strip of facts. */
.cp-guild-banner { min-width: 0; overflow: hidden; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface-1); }
.cp-guild-banner-identity { display: flex; align-items: center; gap: 24px; padding: 32px; background: radial-gradient(ellipse at top left, var(--green-soft), transparent 70%); }
.cp-guild-banner-identity > div { min-width: 0; }
.cp-guild-banner-identity h2 { margin: 6px 0 12px; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cp-guild-banner-type { color: var(--text-3); font-size: 12px; }
.cp-guild-banner-crest { display: grid; place-items: center; flex: 0 0 96px; width: 96px; height: 96px; padding: 8px; border: 1px solid var(--green-border); border-radius: 12px; background: var(--bg-1); }
.cp-guild-banner-crest .cp-icon { width: 48px; height: 48px; color: var(--green-400); }
.cp-guild-banner .cp-stat-grid { gap: 0; border-top: 1px solid var(--border-1); }
.cp-guild-banner .cp-stat { min-width: 0; border: 0; border-radius: 0; padding: 20px; background: transparent; }
.cp-guild-banner .cp-stat-icon { border: 0; background: transparent; width: 24px; height: 24px; border-radius: 0; }
.cp-guild-banner .cp-stat-text strong { white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cp-guild-overview-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cp-guild-overview-details .cp-datalist { display: block; }
.cp-guild-overview-details .cp-datalist-row { display: flex; flex-wrap: wrap; gap: 12px 20px; padding-top: 0; }
.cp-guild-overview-details .cp-datalist-cell:empty, .cp-guild-overview-details .cp-datalist-actions:empty { display: none; }
.cp-guild-overview-details .cp-datalist-actions { margin-left: auto; }
.cp-invite-panel .cp-code-field { border-style: dashed; padding: 20px 16px; background: var(--bg-1); }
.cp-invite-panel .cp-code-field code { font-size: 18px; }

/* Settings read as labeled sections, with explanations beside the controls. */
.cp-panel-description { flex-basis: 100%; margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.65; }
.cp-settings-section { width: 100%; max-width: 1320px; }
.cp-settings-section > .cp-panel-header { justify-content: flex-start; align-content: flex-start; background: var(--bg-2); border-radius: 10px 10px 0 0; gap: 12px; }
.cp-settings-section .cp-form-actions { justify-content: flex-start; }
.cp-settings-artwork .cp-profile-summary { align-items: center; gap: 20px; }
.cp-settings-artwork .cp-guild-image { width: 80px; height: 80px; flex: 0 0 80px; border-radius: 12px; }
.cp-settings-artwork .cp-guild-image > .cp-icon { width: 36px; height: 36px; }
.cp-settings-artwork input[type=file] { width: 100%; padding: 12px; border: 1px dashed var(--border-2); border-radius: 8px; background: var(--bg-2); color: var(--text-2); }
.cp-settings-artwork input[type=file]::file-selector-button { min-height: 44px; padding: 8px 16px; margin-right: 12px; border: 1px solid var(--green-border); border-radius: 6px; background: var(--green-soft); color: var(--green-400); font: inherit; cursor: pointer; }
.cp-danger-zone { max-width: 1320px; background: var(--bg-2); }
.cp-danger-zone .cp-panel-header { min-height: 48px; }

/* Agenda: month dividers and readable event summaries establish a timeline. */
.cp-agenda-panel .event-toolbar { padding-bottom: 20px; border-bottom: 1px solid var(--border-1); }
.event-agenda-month { margin-bottom: 24px; }
.event-agenda-month > h3 { display: flex; align-items: center; gap: 16px; margin: 24px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.event-agenda-month > h3::after { content: ''; flex: 1; height: 1px; background: var(--border-1); }
.cp-agenda-panel .event-list-row { padding: 20px 12px; gap: 12px 20px; }
.event-list-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.6; color: var(--text-2); margin-top: 6px; }
.event-list-recurrence { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }
.event-list-recurrence .cp-icon { width: 16px; height: 16px; }
.event-list-row--cancelled .event-date { color: var(--text-3); }
.event-list-row--cancelled .event-list-title strong { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }

/* Requests and roles: compact states and meaningful emphasis. */
.cp-request-panel .cp-empty-state { min-height: 180px; align-items: flex-start; padding: 20px 16px 20px 88px; position: relative; text-align: left; }
.cp-request-panel .cp-empty-icon { position: absolute; left: 12px; top: 20px; margin: 0; color: var(--text-2); }
.cp-request-panel .cp-empty-state p { max-width: 520px; }
.cp-request-panel .cp-empty-actions { justify-content: flex-start; margin-top: 16px; }
.cp-request-row { padding: 20px 12px; }
.cp-role-row { padding: 16px 12px; }
.cp-role-row--default { background: var(--bg-2); border-left: 2px solid var(--green-border); }
.cp-role-row--default .cp-avatar { border-color: var(--green-border); color: var(--green-400); background: var(--green-soft); }

/* Member profiles retain their personal, readable scale. */
.cp-member-profile-panel { max-width: 960px; }
.cp-shell .cp-member-profile-panel .cp-profile-summary { padding: 8px 0 24px; border-bottom: 1px solid var(--border-1); margin-bottom: 24px; gap: 20px; }
.cp-shell .cp-member-profile-panel .cp-profile-avatar { width: 72px; height: 72px; flex-basis: 72px; }
.cp-member-profile-panel h3 { margin: 24px 0 8px; color: var(--text-3); font-size: 12px; font-weight: 500; }
.cp-member-profile-panel .cp-profile-bio { max-width: 65ch; line-height: 1.75; }
.cp-shell .cp-profile-overview > a { display: flex; align-items: center; min-height: 44px; padding: 12px 16px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2); color: var(--text-2); text-decoration: none; }
.cp-shell .cp-profile-overview > a:hover { color: var(--green-400); border-color: var(--green-border); }
@media (min-width: 1100px) {
    .cp-settings-section { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); }
    .cp-settings-section > .cp-panel-header { display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; padding: 24px; border-bottom: 0; border-right: 1px solid var(--border-1); border-radius: 10px 0 0 10px; }
    .cp-settings-section .cp-panel-description { flex-basis: auto; }
    .cp-settings-section > .cp-panel-body { padding: 24px; }
}
@media (min-width: 1400px) {
    .cp-guild-overview-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .cp-guild-overview-details > :only-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
    .cp-guild-banner-identity { gap: 16px; padding: 20px; }
    .cp-guild-banner-identity h2 { font-size: 22px; }
    .cp-guild-banner-crest { flex-basis: 64px; width: 64px; height: 64px; }
    .cp-guild-banner .cp-stat { align-items: flex-start; padding: 16px 12px; gap: 8px; }
    .cp-guild-banner .cp-stat-text strong { font-size: 15px; }
    .cp-guild-banner .cp-stat-icon { width: 18px; height: 18px; }
    .cp-guild-banner .cp-stat-icon .cp-icon { width: 18px; height: 18px; }
    .cp-request-panel .cp-empty-state { padding: 12px 0; }
    .cp-request-panel .cp-empty-icon { position: static; margin-bottom: 16px; }
    .cp-agenda-panel .event-list-row > .event-list-recurrence, .cp-agenda-panel .event-list-row > .cp-badge { grid-column: 2; }
}
/* Event detail: briefing and personal response precede the shared roster. */
.event-detail-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.event-briefing-date { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.event-briefing-date > div:nth-child(2) { display: flex; flex: 1; min-width: 150px; flex-direction: column; gap: 4px; }
.event-briefing-date > div:nth-child(2) > strong { font-size: 16px; }
.event-briefing-date > div:nth-child(2) > span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.event-briefing-date small { color: var(--text-3); font-size: 12px; }
.event-briefing .event-description { line-height: 1.75; max-width: 75ch; }
.event-briefing .event-capacity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px 0 0; border-bottom: 0; }
.event-briefing .event-capacity > strong { grid-column: 1 / -1; font-size: 16px; margin-bottom: 4px; }
.event-briefing .event-capacity > span { flex-wrap: wrap; align-content: center; padding: 12px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2); font-size: 13px; }
.event-personal-signup { border-color: var(--green-border); }
.event-personal-signup > .cp-panel-header { background: var(--green-soft); border-bottom-color: var(--green-border); border-radius: 10px 10px 0 0; }
.event-personal-signup .event-role-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.event-personal-signup .event-role-actions .cp-btn { min-height: 56px; justify-content: flex-start; padding: 12px; white-space: normal; }
.event-personal-signup .event-role-actions .cp-btn-ghost { grid-column: 1 / -1; min-height: 44px; justify-content: center; }
.event-personal-signup .cp-form-note { line-height: 1.65; }
.event-my-character { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 20px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--border-1); }
.event-my-character p { margin: 0; line-height: 1.8; color: var(--text-2); overflow-wrap: anywhere; }
.event-my-character strong { display: block; font-size: 16px; }
.event-detail-roster .event-comp-grid { gap: 16px; }
.event-detail-roster .event-comp-group { padding: 16px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 8px; }
.event-detail-roster .event-comp-group h3 { border-bottom-color: var(--border-1); }
.event-detail-roster .event-comp-group h3 > span { display: grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 6px; background: var(--surface-3); font-size: 12px; color: var(--text-2); }
.event-detail-roster .event-slot-empty { margin: 0; padding-bottom: 0; font-size: 12px; }
.event-detail-roster .event-player:last-child { border-bottom: 0; padding-bottom: 0; }
.event-detail-roster .event-view-tabs { display: inline-flex; padding: 4px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-2); }
.event-detail-roster .event-view-tabs .cp-btn { white-space: normal; }

/* Member directory: substantial profile cards, with controls above the row link. */
.cp-member-directory .cp-datalist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cp-member-directory .cp-member-row { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 12px; padding: 20px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-2); }
.cp-member-directory .cp-member-row::before { inset: 0; border-radius: 9px; transform: none; }
.cp-member-directory .cp-member-row--leader { border-top-color: var(--green-border); }
.cp-member-directory .cp-datalist-primary { grid-column: 1 / -1; gap: 16px; }
.cp-shell .cp-member-directory .cp-profile-avatar { width: 56px; height: 56px; flex-basis: 56px; }
.cp-shell .cp-member-directory .cp-member-link { min-height: 32px; font-size: 18px; }
.cp-member-directory .cp-datalist-title small { white-space: normal; }
.cp-member-directory .cp-datalist-cell { align-self: center; }
.cp-member-directory .cp-datalist-cell::before { content: none; }
.cp-member-directory .cp-datalist-actions { flex-wrap: nowrap; gap: 8px; }
.cp-member-profile-hint { font-size: 12px; color: var(--text-3); }
.cp-member-directory .cp-member-chevron { margin-left: 0; width: 16px; height: 16px; }
.cp-member-directory .cp-member-row:focus-within, .cp-member-directory .cp-member-row:hover { border-color: var(--green-border); }
.cp-member-directory .cp-member-link::after { border-radius: 10px; }
.cp-member-directory > .cp-panel-body > .cp-form-note { padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--border-1); }

/* The next raid is the agenda's visual anchor, with quieter subsequent dates. */
.cp-agenda-panel .event-list-row { margin-bottom: 12px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-2); transition: border-color 180ms ease, background 180ms ease; }
.cp-agenda-panel .event-list-row:hover { border-color: var(--green-border); background: var(--surface-2); }
.cp-agenda-panel .event-list-row--next { border-left: 3px solid var(--green-500); background: linear-gradient(100deg, var(--green-soft), var(--bg-2) 65%); padding-block: 24px; }
.event-next-label { color: var(--green-400); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.cp-agenda-panel .event-list-row--next .event-list-title > strong { font-size: 20px; }
.cp-agenda-panel .event-list-row--next .event-date { border-color: var(--green-border); }
@media (min-width: 1100px) {
    .event-detail-intro { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
    .cp-member-directory .cp-datalist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
    .event-briefing .event-capacity { grid-template-columns: minmax(0, 1fr); }
    .event-briefing .event-capacity > span { padding: 10px 12px; }
    .cp-member-directory .cp-member-row { padding: 16px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cp-member-directory .cp-datalist-actions { justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--border-1); }
    .cp-member-profile-hint { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-agenda-panel .event-list-row { transition: none; }
}
/* Composition workspace: source pool beside six paired raid groups. */
.event-preview-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px dashed var(--warning-border); border-radius: 10px; background: var(--warning-soft); }
.event-preview-note strong { color: var(--warning); }
.event-preview-note p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; max-width: 75ch; }
.event-group-tools { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; padding: 20px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg-2); }
.event-group-tools > div { flex: 1 1 280px; }
.event-group-tools h2 { font-size: 16px; margin: 0 0 6px; }
.event-group-tools p { margin: 0; color: var(--text-3); font-size: 12px; }
.event-group-tools > .cp-form-note { flex-basis: 100%; }
.event-group-tools label { display: grid; gap: 6px; color: var(--text-2); font-size: 12px; }
.event-group-tools .cp-input { padding: 10px 12px; }
.event-group-planner { grid-template-columns: minmax(0, 1fr); }
.event-group-planner .event-planner-side { min-width: 0; }
.event-group-destination { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.event-group-destination > h2 { grid-column: 1 / -1; margin-bottom: 4px; }
.event-group-destination .event-planner-lane { margin: 0; border-style: solid; background: var(--bg-2); min-height: 132px; }
.event-group-destination .event-planner-lane:nth-child(even) { border-top: 2px solid var(--green-border); }
.event-group-destination .event-planner-lane:nth-child(odd) { border-top: 2px solid var(--info-border); }
.event-group-destination .event-planner-lane:last-child { grid-column: 1 / -1; border-top: 1px solid var(--border-2); }
.event-group-planner .event-player { gap: 8px; padding-block: 12px; }
.event-group-planner .event-player:last-child { border-bottom: 0; }
.event-group-planner .event-move-actions { width: 100%; gap: 6px; }
.event-group-select { width: auto; flex: 1; min-width: 110px; padding: 8px 10px; font-size: 12px; }
.event-group-pool .event-planner-lane { border: 0; border-bottom: 1px solid var(--border-1); padding: 0 0 16px; border-radius: 0; min-height: 0; }
.event-group-pool .event-slot-empty { padding: 8px 0 0; }
.event-group-pool .event-player-name { flex-basis: 120px; }
.event-group-pool > h2 { font-size: 18px; }
@media (min-width: 768px) {
    .event-group-destination { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .event-group-planner { grid-template-columns: minmax(280px, .75fr) minmax(0, 2fr); gap: 20px; }
}
/* Keep the paired group order in the final dashboard, independent of role-view columns. */
@media (min-width: 768px) {
    .event-dashboard-grid .event-week-card:only-child .event-final-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.event-group-split { margin: 6px 0 10px; font-size: 11px; color: var(--text-3); }
@media (min-width: 768px) {
    .event-detail-roster .event-final-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Only the composition workspace is dense; public rosters retain their spacing. */
.event-composition-workspace .cp-page-body { gap: 12px; }
.event-composition-workspace .cp-page-header { margin-bottom: 20px; }
.event-composition-workspace .event-comp-toolbar { padding: 12px 16px; margin-bottom: 0; }
.event-composition-workspace .event-comp-actions { margin-bottom: 0; }
.event-composition-workspace .event-group-tools { padding: 12px 16px; gap: 10px; }
.event-composition-workspace .event-preview-note { padding: 10px 16px; }
.event-planner-help { color: var(--text-3); font-size: 12px; }
.event-planner-help summary { cursor: pointer; min-height: 32px; display: list-item; align-content: center; }
.event-composition-workspace .event-planner-side { padding: 12px; }
.event-composition-workspace .event-group-destination { gap: 8px; }
.event-composition-workspace .event-raid-lane { padding: 8px; min-height: 64px; }
.event-composition-workspace .event-group-split { margin: 2px 0 4px; font-size: 10px; }
.event-composition-workspace .event-planner-lane > h3 { margin-bottom: 4px; font-size: 13px; }
.event-composition-workspace .event-player { flex-wrap: nowrap; gap: 6px; padding: 4px 0; min-height: 44px; }
.event-composition-workspace .event-player-name { flex: 1; min-width: 0; }
.event-composition-workspace .event-player-name strong { font-size: 12px; }
.event-composition-workspace .event-player-name small { font-size: 10px; }
.event-composition-workspace .event-drag-handle { font-size: 16px; }
.event-composition-workspace .event-character-icon { flex-basis: 24px; width: 24px; height: 24px; }
.event-composition-workspace .event-character-icon > img:first-child { width: 24px; height: 24px; }
.event-composition-workspace .event-player-spec { width: 14px; height: 14px; }
.event-composition-workspace .event-move-actions { width: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; }
.event-composition-workspace .event-move-actions .cp-btn { font-size: 10px; padding: 4px 6px; }
.event-composition-workspace .event-group-select { width: 68px; min-width: 0; padding: 4px; font-size: 11px; }
.event-composition-workspace .event-slot-empty { font-size: 11px; padding: 4px 0; }
.event-composition-workspace .event-group-pool .event-planner-lane { margin-bottom: 8px; padding-bottom: 8px; }
.event-auto-dialog .cp-field { display: grid; gap: 8px; margin-block: 16px; }
.event-auto-dialog .cp-input { padding: 10px 12px; width: 100%; }
.event-target-inputs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.event-target-inputs label { display: grid; gap: 6px; color: var(--text-2); font-size: 13px; }
.event-option-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.event-option-check input { width: 18px; height: 18px; accent-color: var(--green-500); }
@media (min-width: 1200px) {
    .event-composition-workspace .event-group-planner { grid-template-columns: minmax(250px,.65fr) minmax(0,2fr); gap: 12px; }
    .event-composition-workspace .event-group-pool { max-height: max(400px,calc(100dvh - 330px)); overflow-y: auto; scrollbar-gutter: stable; }
    .event-composition-workspace .event-group-pool > h2 { position: sticky; top: -12px; background: var(--surface-1); z-index: 1; padding-block: 8px; font-size: 15px; margin-bottom: 8px; }
}
@media (min-width: 1600px) {
    .event-composition-workspace .event-group-destination { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .event-composition-workspace .event-player { flex-wrap: wrap; }
    .event-composition-workspace .event-move-actions { width: 100%; justify-content: flex-end; }
    .event-composition-workspace .event-group-select { flex: 1; }
}
.event-composition-workspace .event-player-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-composition-workspace .event-move-actions .cp-btn { min-width: 44px; }
/* A small logo-inspired signature; venom lime is confined to this brand mark. */
@media (min-width: 768px) {
    .cp-sidebar-footer {
        --brand-venom: #b4ee35;
        position: relative;
        flex-shrink: 0;
        gap: 12px;
        padding-block: 22px;
        border-top: 0;
        background: radial-gradient(ellipse at 20% 50%, rgb(151 214 30 / 5%), transparent 75%);
    }
    .cp-sidebar-footer::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgb(180 238 53 / 32%) 22%, var(--border-1) 70%, transparent);
    }
    .cp-sidebar-seal {
        display: grid;
        place-items: center;
        flex: 0 0 36px;
        width: 36px;
        height: 40px;
        border: 1px solid rgb(180 238 53 / 20%);
        border-radius: 10px 10px 14px 14px;
        color: var(--brand-venom);
        background: linear-gradient(145deg, rgb(180 238 53 / 10%), rgb(180 238 53 / 2%));
        box-shadow: inset 0 1px 0 rgb(213 255 133 / 7%);
    }
    .cp-sidebar-seal .cp-icon { width: 22px; height: 22px; filter: drop-shadow(0 0 5px rgb(151 214 30 / 18%)); }
}
@media (min-width: 1200px) {
    .cp-sidebar-signature {
        display: block;
        color: var(--brand-venom);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .025em;
        line-height: 1.35;
        text-shadow: 0 0 14px rgb(151 214 30 / 20%);
    }
    .cp-sidebar-footer small { margin-top: 4px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
}

/* Route headings receive programmatic focus; interactive controls retain their rings. */
.cp-shell .cp-page-header h1:focus { outline: none; }
.cp-membership-panel .cp-datalist + .cp-alert { margin-top: 24px; }
.cp-mobile-nav .cp-nav-label { white-space: nowrap; }

@media (max-width: 767px) {
    .cp-role-row { gap: 12px; margin-bottom: 12px; padding: 16px; border: 1px solid var(--border-1); border-radius: var(--radius-md); }
    .cp-role-row--default { border-left: 2px solid var(--green-border); }
    .cp-role-row .cp-datalist-title small { white-space: normal; }
    .cp-role-row .cp-datalist-cell[data-label="Berechtigungen"] { align-items: flex-start; }
    .cp-role-row .cp-datalist-cell[data-label="Berechtigungen"]::before { flex-basis: 100%; }
    .cp-role-row .cp-badge { white-space: normal; overflow-wrap: anywhere; }
    .cp-role-row .cp-datalist-actions { justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border-1); }
    .cp-role-row .cp-icon-button { min-width: 44px; min-height: 44px; }
}