/* =======================================================================
   Medallion XLN - Design Tokens v3.0
   /public_html/community/assets/css/tokens.css

   ONE source of truth. Load this FIRST on every community page.

   v3.0 changes:
   - Merged 02-tokens.css back in (the two files had drifted:
     --xln-purple-light vs --xln-purple-lightest, --role-steward was
     gold in one and purple in the other). 02-tokens.css is now DEAD -
     delete it.
   - Added every variable the rest of the bundle references but nothing
     defined: the whole --space-*, --text-<size>-*, --z-*, --shadow-glow*,
     --transition-*, --ease-* families plus --primary*, --bg-*, --font-sans,
     --radius-full, --border-hover, --text-inverse, --status-live.
     51 of these resolved to nothing before, which silently dropped the
     entire declaration (padding, gap, font-size) in the browser.
   - Absorbed the rival :root from workspace.css. Every --ws-* name is
     kept as an ALIAS onto the canonical scale, so workspace.css needs no
     selector edits but stops rendering on its own blue-black palette.

   NAMING NOTE: --text-primary/secondary/tertiary/quaternary are COLORS.
   --text-xs/sm/base/lg/xl/2xl/3xl are FONT SIZES. Same prefix, two
   meanings - inherited from the old files, kept for compatibility.
   ======================================================================= */

:root {
    /* --- BRAND ---------------------------------------------------- */
    --xln-gold-bright:  #FFD96E;
    --xln-gold:         #F9C94C;
    --xln-gold-deep:    #C9921F;
    --xln-gold-darker:  #9C7117;
    --xln-gold-shadow:  #5E4310;

    --xln-purple-light:  #C4B5FD;
    --xln-purple-bright: #A78BFA;
    --xln-purple:        #7C3AED;
    --xln-purple-deep:   #5B21B6;
    --xln-purple-shadow: #3B1280;

    /* 02-tokens.css spelled this one differently. Keep both. */
    --xln-purple-lightest: var(--xln-purple-light);

    /* --- ACCENT (per-community tweakable) ------------------------- */
    --accent:       var(--xln-gold);
    --accent-deep:  var(--xln-gold-deep);
    --accent-soft:  rgba(249, 201, 76, 0.08);
    --accent-glow:  rgba(249, 201, 76, 0.16);

    /* --- SEMANTIC STATES ------------------------------------------ */
    --success:      #22D396;
    --success-soft: rgba(34, 211, 150, 0.10);
    --warning:      #FFA940;
    --warning-soft: rgba(255, 169, 64, 0.10);
    --danger:       #FF5B5B;
    --danger-soft:  rgba(255, 91, 91, 0.10);
    --info:         #5BB8FF;
    --info-soft:    rgba(91, 184, 255, 0.10);

    /* Happening-right-now red. Matches XLN Stream. Never on a control. */
    --status-live:  #E7563F;

    /* --- SURFACE SCALE -------------------------------------------- */
    --surface-0: #07070B;   /* app canvas */
    --surface-1: #0F0F16;   /* cards, hero */
    --surface-2: #161620;   /* inset panels, composer */
    --surface-3: #1E1E2A;   /* hover, secondary buttons */
    --surface-4: #2A2A38;   /* pressed, dropdowns */

    /* --- TEXT COLOR ----------------------------------------------- */
    --text-primary:    rgba(255, 255, 255, 1.00);
    --text-secondary:  rgba(255, 255, 255, 0.72);
    --text-tertiary:   rgba(255, 255, 255, 0.50);
    --text-quaternary: rgba(255, 255, 255, 0.30);
    --text-inverse:    #07070B;   /* on gold / on light fills */

    /* --- BORDERS -------------------------------------------------- */
    --border-hairline: rgba(255, 255, 255, 0.04);
    --border-subtle:   rgba(255, 255, 255, 0.07);
    --border-default:  rgba(255, 255, 255, 0.11);
    --border-strong:   rgba(255, 255, 255, 0.20);
    --border-hover:    rgba(255, 255, 255, 0.16);

    /* --- ROLES ---------------------------------------------------- */
    --role-operator:    var(--xln-gold);
    --role-steward:     var(--xln-purple-bright);
    --role-verifier:    var(--info);
    --role-builder:     var(--success);
    --role-participant: var(--text-tertiary);
    --role-candidate:   var(--text-quaternary);

    --role-operator-soft:    rgba(249, 201, 76, 0.12);
    --role-steward-soft:     rgba(167, 139, 250, 0.14);
    --role-verifier-soft:    rgba(91, 184, 255, 0.12);
    --role-builder-soft:     rgba(34, 211, 150, 0.12);
    --role-participant-soft: rgba(255, 255, 255, 0.05);
    --role-candidate-soft:   rgba(255, 255, 255, 0.03);

    /* --- SPACING (4px base) --------------------------------------- */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* T-shirt aliases - both naming styles are already in the bundle. */
    --space-xs:  var(--space-1);
    --space-sm:  var(--space-2);
    --space-md:  var(--space-4);
    --space-lg:  var(--space-6);
    --space-xl:  var(--space-8);
    --space-2xl: var(--space-12);

    /* --- TYPE SCALE ----------------------------------------------- */
    --text-xs:   11px;
    --text-sm:   12px;
    --text-base: 14px;
    --text-lg:   16px;
    --text-xl:   20px;
    --text-2xl:  26px;
    --text-3xl:  34px;

    /* --- RADII ---------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 999px;
    --radius-full: var(--radius-pill);

    /* --- ELEVATION ------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 28px 80px rgba(0, 0, 0, 0.55);

    --glow-sm:        0 0 0 1px rgba(249, 201, 76, 0.20), 0 4px 16px rgba(249, 201, 76, 0.08);
    --shadow-glow-sm: var(--glow-sm);
    --shadow-glow:    0 0 0 1px rgba(249, 201, 76, 0.28), 0 8px 32px rgba(249, 201, 76, 0.14);

    /* --- DENSITY (overridable by [data-density]) ------------------ */
    --row-pad-y: 14px;
    --card-pad:  20px;
    --gap-tight: 0.5rem;
    --gap-cozy:  0.75rem;
    --gap-loose: 1rem;

    /* --- TYPOGRAPHY ----------------------------------------------- */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', monospace;
    --font-sans:    var(--font-body);

    /* --- MOTION --------------------------------------------------- */
    --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --t-fast: 150ms var(--ease-out);
    --t-base: 200ms var(--ease-out);
    --t-slow: 320ms var(--ease-out);

    --transition-fast: var(--t-fast);
    --transition-base: var(--t-base);
    --transition-slow: var(--t-slow);

    /* --- Z-INDEX SCALE -------------------------------------------- */
    --z-base:     1;
    --z-sticky:   100;
    --z-dropdown: 500;
    --z-backdrop: 900;
    --z-modal:    1000;
    --z-toast:    1100;
}

/* -----------------------------------------------------------------------
   COMPATIBILITY ALIASES
   Old names still referenced across the bundle. Defined AFTER the
   canonical scale so a find/replace can retire them file by file.
   ----------------------------------------------------------------------- */
:root {
    /* legacy brand names */
    --gold-primary:   var(--xln-gold);
    --gold-secondary: var(--xln-gold-deep);
    --gold-muted:     var(--xln-gold-darker);
    --purple-primary: var(--xln-purple);
    --brand-purple:   var(--xln-purple-bright);

    /* legacy "primary" family (used by creator-os.css / tasks.css) */
    --primary:        var(--xln-gold);
    --primary-light:  var(--xln-gold-bright);
    --primary-border: rgba(249, 201, 76, 0.30);
    --primary-glow:   rgba(249, 201, 76, 0.45);

    /* legacy background names */
    --bg-primary:     var(--surface-0);
    --bg-secondary:   var(--surface-1);
    --bg-tertiary:    var(--surface-2);
    --bg-hover:       var(--surface-3);
    --bg-deep:        var(--surface-0);
    --bg-surface:     var(--surface-1);
    --bg-card:        var(--surface-1);
    --bg-card-hover:  var(--surface-2);
    --bg-elevated:    var(--surface-3);

    --border-color:   var(--border-default);
    --text-muted:     var(--text-tertiary);

    --success-bg:     var(--success-soft);
    --success-border: rgba(34, 211, 150, 0.30);

    /* --- workspace.css aliases -----------------------------------
       workspace.css used to ship its own :root on a #0B1120 blue-black
       palette with a different gold. Its :root has been removed; these
       aliases keep every --ws-* selector working while pulling the
       workspace onto the same surface as the rest of the product. */
    --ws-gold:         var(--xln-gold);
    --ws-gold-dim:     rgba(249, 201, 76, 0.15);
    --ws-gold-glow:    rgba(249, 201, 76, 0.25);
    --ws-green:        var(--success);
    --ws-green-dim:    var(--success-soft);
    --ws-red:          var(--danger);
    --ws-red-dim:      var(--danger-soft);
    --ws-blue:         var(--info);
    --ws-blue-dim:     var(--info-soft);
    --ws-purple:       var(--xln-purple-bright);
    --ws-purple-dim:   rgba(167, 139, 250, 0.12);
    --ws-amber:        var(--warning);
    --ws-amber-dim:    var(--warning-soft);

    --ws-bg:             var(--surface-0);
    --ws-surface:        var(--surface-1);
    --ws-surface-2:      var(--surface-2);
    --ws-surface-raised: var(--surface-3);
    --ws-surface-hover:  var(--surface-3);

    --ws-border:       var(--border-subtle);
    --ws-border-hover: var(--border-hover);

    --ws-text:           var(--text-primary);
    --ws-text-secondary: var(--text-secondary);
    --ws-text-muted:     var(--text-tertiary);
    --ws-text-dim:       var(--text-quaternary);

    --ws-radius-sm: var(--radius-sm);
    --ws-radius:    var(--radius-md);
    --ws-radius-lg: var(--radius-lg);
    --ws-transition: var(--t-fast);
}

/* --- ACCENT VARIANTS --------------------------------------------- */
[data-accent="purple"] {
    --accent:      var(--xln-purple);
    --accent-deep: var(--xln-purple-deep);
    --accent-soft: rgba(124, 58, 237, 0.10);
    --accent-glow: rgba(124, 58, 237, 0.18);
}

[data-accent="teal"] {
    --accent:      #14B8A6;
    --accent-deep: #0F766E;
    --accent-soft: rgba(20, 184, 166, 0.10);
    --accent-glow: rgba(20, 184, 166, 0.18);
}

/* --- DENSITY VARIANTS -------------------------------------------- */
[data-density="compact"] {
    --row-pad-y: 9px;
    --card-pad:  14px;
    --gap-tight: 0.375rem;
    --gap-cozy:  0.5rem;
    --gap-loose: 0.75rem;
}

[data-density="spacious"] {
    --row-pad-y: 18px;
    --card-pad:  28px;
    --gap-tight: 0.75rem;
    --gap-cozy:  1rem;
    --gap-loose: 1.5rem;
}

/* --- BASE RESET --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--surface-0);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    margin: 0;
}

button { font-family: inherit; }
a { color: inherit; }

img, svg, video { max-width: 100%; height: auto; }

/* Machine truth only: XLN amounts, IDs, hashes, timestamps. */
code, kbd, samp, pre, .mono { font-family: var(--font-mono); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
* { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }

*:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Utility used by every skeleton/loading state in the bundle. */
@keyframes xln-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =======================================================================
   COMMUNITY PAGE SHELL
   -----------------------------------------------------------------------
   index.php offsets its content with `margin-left: var(--sidebar-w, 240px)`,
   which means /nav/sidebar.php is position:fixed and therefore occupies ZERO
   width in a flex row.

   The four section pages (events, members, votes, analytics) instead use
   `.app-shell { display:flex }` with `.sidebar-wrapper { flex-shrink: 0 }`
   and no width. A fixed child gives the wrapper an intrinsic width of 0, so
   .ws-outer starts at x=0 and the whole page renders UNDERNEATH the sidebar -
   which is why the community title reads "Lounge Community" instead of
   "The Deal Lounge Community" and the description is cut off mid-word.

   Reserving the sidebar's width on the wrapper fixes all four at once. Both
   layouts now key off the same --sidebar-w, so they can never drift apart.
   ======================================================================= */

:root { --sidebar-w: 240px; }

.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.app-shell > .sidebar-wrapper {
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
}

.app-shell > .ws-outer {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 900px) {
    .app-shell > .sidebar-wrapper {
        display: none;
        flex-basis: 0;
        width: 0;
        min-width: 0;
    }
}

/* =======================================================================
   TOAST
   tasks-board.js (and others) call showToast() which toggles `.show` on
   #toast. Nothing in the bundle styled it, so the toast rendered as
   permanently-visible stray text in the corner. Shared here so every page
   that includes a #toast gets the same behaviour.
   ======================================================================= */
.xln-toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-8);
    transform: translate(-50%, 16px);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: min(90vw, 26rem);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: var(--text-base);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-toast);
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.xln-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.xln-toast .iconify { color: var(--success); flex-shrink: 0; }

/* Screen-reader-only text. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =======================================================================
   SKELETON LOADING
   -----------------------------------------------------------------------
   Replaces the spinner-and-"Loading..." pattern used across the community
   pages. A spinner tells you something is happening; a skeleton tells you
   WHAT is coming and reserves its space, so the page does not jump when the
   data lands. It also degrades honestly - a panel whose request never returns
   keeps pulsing rather than sitting on frozen text that reads like a bug.

   Usage: markup the shape you expect, using .xs-line / .xs-circle / .xs-block
   inside a container with .xs-skeleton (which drives the shimmer and hides
   everything from screen readers).

     <div class="xs-skeleton" aria-hidden="true">
       <div class="xs-row">
         <div class="xs-circle sm"></div>
         <div class="xs-stack">
           <div class="xs-line w-60"></div>
           <div class="xs-line w-40 sm"></div>
         </div>
       </div>
     </div>

   Always pair with aria-busy="true" on the live region and a visually hidden
   "Loading" for screen readers - the shimmer means nothing to them.
   ======================================================================= */

.xs-skeleton {
    --xs-base:  var(--surface-2);
    --xs-sheen: var(--surface-3);
    pointer-events: none;
    user-select: none;
}

.xs-line,
.xs-circle,
.xs-block {
    position: relative;
    overflow: hidden;
    background: var(--xs-base);
    border-radius: var(--radius-sm);
}

.xs-line   { height: 12px; width: 100%; margin: 0 0 8px; }
.xs-line.sm  { height: 9px; }
.xs-line.lg  { height: 18px; border-radius: var(--radius-md); }
.xs-line:last-child { margin-bottom: 0; }

.xs-circle { width: 36px; height: 36px; border-radius: var(--radius-pill); flex-shrink: 0; }
.xs-circle.sm { width: 28px; height: 28px; }
.xs-circle.lg { width: 48px; height: 48px; }

.xs-block  { height: 96px; border-radius: var(--radius-lg); }

/* width helpers so a skeleton reads as text rather than solid bars */
.xs-line.w-25 { width: 25%; }
.xs-line.w-30 { width: 30%; }
.xs-line.w-40 { width: 40%; }
.xs-line.w-50 { width: 50%; }
.xs-line.w-60 { width: 60%; }
.xs-line.w-70 { width: 70%; }
.xs-line.w-80 { width: 80%; }

.xs-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.xs-stack { flex: 1; min-width: 0; }

.xs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

/* The sheen. One animation on a pseudo-element rather than animating
   background-position on every node - cheaper, and it composites on the GPU. */
.xs-line::after,
.xs-circle::after,
.xs-block::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--xs-sheen) 50%,
        transparent 100%
    );
    animation: xs-shimmer 1.4s var(--ease-out) infinite;
}

/* Stagger so rows do not pulse in lockstep - reads as loading, not as a
   broken repeating graphic. */
.xs-row:nth-child(2) .xs-line::after,
.xs-row:nth-child(2) .xs-circle::after { animation-delay: 0.08s; }
.xs-row:nth-child(3) .xs-line::after,
.xs-row:nth-child(3) .xs-circle::after { animation-delay: 0.16s; }
.xs-row:nth-child(4) .xs-line::after,
.xs-row:nth-child(4) .xs-circle::after { animation-delay: 0.24s; }
.xs-row:nth-child(5) .xs-line::after,
.xs-row:nth-child(5) .xs-circle::after { animation-delay: 0.32s; }

@keyframes xs-shimmer {
    100% { transform: translateX(100%); }
}

/* Card-shaped skeletons that match .ws-card so the swap is invisible. */
.xs-card {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--card-pad);
}

.xs-card + .xs-card { margin-top: var(--space-3); }

/* Board column skeleton (tasks). */
.xs-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .xs-board { grid-template-columns: 1fr; }
}

/* Motion-sensitive users get a static block, not a strobe. */
@media (prefers-reduced-motion: reduce) {
    .xs-line::after,
    .xs-circle::after,
    .xs-block::after {
        animation: none;
        opacity: 0.35;
        transform: none;
    }
}