/* ============================================================
   Medallion XLN — Workspace v2 Styles
   Location: /community/assets/css/workspace.css
   Extends design-system.css, layout.css, components.css.
   ============================================================ */

/* ---------------------------------------------------------------------
   The :root block that used to live here has moved to tokens.css (v3.0).
   It defined a rival palette (#0B1120 blue-black canvas, #D4A843 gold)
   that made the workspace the only page not matching the product.
   Every --ws-* name still works - they are now aliases onto the canonical
   scale. tokens.css MUST be loaded before this file.
   --------------------------------------------------------------------- */


/* ─── PULSE BAR ──────────────────────────────── */
.ws-pulse-bar-wrapper {
    border-bottom: 1px solid var(--ws-border);
    background: linear-gradient(180deg, rgba(212, 168, 67, 0.03) 0%, transparent 100%);
}
.ws-pulse-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.625rem 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.ws-pulse-bar::-webkit-scrollbar { display: none; }
.ws-pulse-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--ws-text-muted);
}
.ws-pulse-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 1rem;
    cursor: pointer;
    transition: background var(--ws-transition);
    border-radius: var(--ws-radius);
    text-decoration: none;
}
.ws-pulse-stat:hover { background: rgba(var(--mx-fg-rgb), 0.04); }
.ws-pulse-stat .stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ws-text);
}
.ws-pulse-stat .stat-value.gold { color: var(--ws-gold-text); }
.ws-pulse-stat .stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ws-text-dim);
}

/* ─── CONTENT AREA ───────────────────────────── */
.ws-content { padding: 1.5rem; }

/* ─── CARDS ──────────────────────────────────── */
.ws-card {
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg);
    overflow: hidden;
}
.ws-card.compact { border-radius: var(--ws-radius); }
.ws-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ws-border);
}
.ws-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ws-text);
}
.ws-card-title .iconify { color: var(--ws-gold-text); font-size: 1rem; }
.ws-card-body { padding: 0; }
.ws-card-action {
    font-size: 0.6875rem;
    color: var(--ws-gold-text);
    cursor: pointer;
    transition: opacity var(--ws-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    background: none;
    border: none;
}
.ws-card-action:hover { opacity: 0.8; }

/* ─── USER STATS STRIP ───────────────────────── */
.ws-user-stats {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}
.ws-user-stat {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    background: var(--ws-surface-2);
    border-radius: var(--ws-radius);
}
.ws-user-stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ws-text);
}
.ws-user-stat-value.gold { color: var(--ws-gold-text); }
.ws-user-stat-label {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ws-text-dim);
    margin-top: 0.125rem;
}

/* ─── ACTIVITY FEED ──────────────────────────── */
.ws-feed { display: flex; flex-direction: column; }
.ws-feed-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ws-border);
    transition: background var(--ws-transition);
}
.ws-feed-item:last-child { border-bottom: none; }
.ws-feed-item:hover { background: rgba(var(--mx-fg-rgb), 0.02); }
.ws-feed-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ws-surface-2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.75rem; color: var(--ws-text-muted);
    overflow: hidden;
}
.ws-feed-body { flex: 1; min-width: 0; }
.ws-feed-title { font-size: 0.8125rem; color: var(--ws-text); line-height: 1.4; }
.ws-feed-title strong { font-weight: 600; }
.ws-feed-meta { font-size: 0.6875rem; color: var(--ws-text-dim); margin-top: 0.125rem; }
.ws-feed-type-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.625rem; padding: 0.125rem 0.375rem;
    border-radius: 100px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ws-feed-type-badge.credit   { background: var(--ws-gold-dim);  color: var(--ws-gold-text); }
.ws-feed-type-badge.task     { background: var(--ws-green-dim); color: var(--ws-green); }
.ws-feed-type-badge.proposal { background: var(--ws-blue-dim);  color: var(--ws-blue); }
.ws-feed-type-badge.member   { background: var(--ws-green-dim); color: var(--ws-green); }
.ws-feed-type-badge.treasury { background: var(--ws-gold-dim);  color: var(--ws-gold-text); }

/* ─── BLOCKED / NEEDS ATTENTION ──────────────── */
.ws-blocked {
    background: var(--ws-red-dim);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: var(--ws-radius-lg);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.ws-blocked-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--ws-red);
    border-bottom: 1px solid rgba(248, 113, 113, 0.15);
}
.ws-blocked-item {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid rgba(248, 113, 113, 0.08);
}
.ws-blocked-item:last-child { border-bottom: none; }
.ws-blocked-item .iconify { color: var(--ws-red); font-size: 1rem; flex-shrink: 0; }
.ws-blocked-text { flex: 1; color: var(--ws-text); }
.ws-blocked-age { font-size: 0.6875rem; color: var(--ws-text-dim); }
.ws-blocked-action {
    background: rgba(248, 113, 113, 0.15); border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--ws-red); font-size: 0.6875rem; padding: 0.25rem 0.625rem;
    border-radius: var(--ws-radius); cursor: pointer;
    transition: all var(--ws-transition);
}
.ws-blocked-action:hover { background: rgba(248, 113, 113, 0.25); }

/* ─── QUEUE ──────────────────────────────────── */
.ws-queue-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ws-border);
}
.ws-queue-item:last-child { border-bottom: none; }
.ws-queue-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    background: var(--ws-surface-2); color: var(--ws-text-muted);
}
.ws-queue-icon.vote { background: var(--ws-blue-dim); color: var(--ws-blue); }
.ws-queue-icon.review { background: var(--ws-purple-dim); color: var(--ws-purple); }
.ws-queue-icon.claim { background: var(--ws-green-dim); color: var(--ws-green); }
.ws-queue-icon.overdue { background: var(--ws-red-dim); color: var(--ws-red); }
.ws-queue-icon.dispute { background: var(--ws-red-dim); color: var(--ws-red); }
.ws-queue-content { flex: 1; min-width: 0; }
.ws-queue-title { font-size: 0.8125rem; font-weight: 500; color: var(--ws-text); }
.ws-queue-meta { font-size: 0.6875rem; color: var(--ws-text-dim); display: flex; align-items: center; gap: 0.375rem; margin-top: 0.125rem; }
.ws-queue-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ws-text-dim); }
.ws-queue-role { color: var(--ws-gold-text); }
.ws-queue-cta {
    background: var(--ws-gold-dim); border: 1px solid rgba(212, 168, 67, 0.3);
    color: var(--ws-gold-text); font-size: 0.6875rem; padding: 0.25rem 0.75rem;
    border-radius: var(--ws-radius); cursor: pointer;
    transition: all var(--ws-transition); flex-shrink: 0;
}
.ws-queue-cta:hover { background: var(--ws-gold-glow); }

/* ─── CONTRIBUTOR PATH (inline) ──────────────── */
.ws-path-step {
    display: flex; gap: 0.75rem; padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--ws-border);
}
.ws-path-step:last-child { border-bottom: none; }
.ws-path-check {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--ws-border); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; color: transparent; margin-top: 0.125rem;
}
.ws-path-check.done { border-color: var(--ws-gold); background: var(--ws-gold-dim); color: var(--ws-gold-text); }
.ws-path-info h4 { font-size: 0.8125rem; font-weight: 500; color: var(--ws-text); margin: 0; }
.ws-path-info p { font-size: 0.6875rem; color: var(--ws-text-dim); margin: 0.125rem 0 0; }
.ws-path-progress { padding: 0.75rem 1rem; border-top: 1px solid var(--ws-border); }
.ws-path-progress-label { font-size: 0.6875rem; color: var(--ws-text-muted); }
.ws-path-progress-bar {
    height: 4px; background: var(--ws-surface-2); border-radius: 2px; margin-top: 0.375rem; overflow: hidden;
}
.ws-path-progress-fill { height: 100%; background: var(--ws-gold); border-radius: 2px; transition: width 0.6s ease; }

/* ─── INITIATIVES (overview widget) ──────────── */
.ws-initiative {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ws-border);
}
.ws-initiative:last-child { border-bottom: none; }
.ws-initiative-info { flex: 1; min-width: 0; }
.ws-initiative-top { display: flex; align-items: center; gap: 0.5rem; }
.ws-initiative-title { font-size: 0.8125rem; font-weight: 500; color: var(--ws-text); }
.ws-initiative-meta { font-size: 0.6875rem; color: var(--ws-text-dim); display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.ws-initiative-meta .iconify { font-size: 0.875rem; vertical-align: -2px; }

/* ─── EVENTS ─────────────────────────────────── */
.ws-event-list { display: flex; flex-direction: column; }
.ws-event-item {
    display: flex; gap: 0.75rem; padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ws-border);
}
.ws-event-item:last-child { border-bottom: none; }
.ws-event-date {
    width: 44px; text-align: center; flex-shrink: 0;
    background: var(--ws-surface-2); border-radius: var(--ws-radius); padding: 0.375rem 0;
}
.ws-event-day { font-family: 'Space Grotesk', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--ws-text); line-height: 1; }
.ws-event-month { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ws-text-dim); }
.ws-event-info { flex: 1; min-width: 0; }
.ws-event-title { font-size: 0.8125rem; font-weight: 500; color: var(--ws-text); }
.ws-event-meta { font-size: 0.6875rem; color: var(--ws-text-dim); display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.ws-event-meta .iconify { font-size: 0.875rem; vertical-align: -2px; }

/* ─── LIST PAGES (initiatives, bounties, proposals, knowledge) ── */
.ws-list-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.ws-list-header h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem; font-weight: 700; color: var(--ws-text); margin: 0;
}
.ws-list-filters { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.ws-filter-btn {
    background: var(--ws-surface); border: 1px solid var(--ws-border);
    color: var(--ws-text-muted); font-size: 0.6875rem; padding: 0.375rem 0.875rem;
    border-radius: 100px; cursor: pointer; transition: all var(--ws-transition);
}
.ws-filter-btn:hover { border-color: var(--ws-border-hover); color: var(--ws-text); }
.ws-filter-btn.active { border-color: var(--ws-gold); color: var(--ws-gold-text); background: var(--ws-gold-dim); }

.ws-list-card {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--ws-surface); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius-lg); padding: 0.875rem 1rem; margin-bottom: 0.5rem;
    transition: border-color var(--ws-transition);
}
.ws-list-card:hover { border-color: var(--ws-border-hover); }
.ws-list-card-body { flex: 1; min-width: 0; }
.ws-list-card-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ws-list-card-title { font-size: 0.875rem; font-weight: 600; color: var(--ws-text); }
.ws-list-card-desc { font-size: 0.75rem; color: var(--ws-text-muted); margin-top: 0.25rem; line-height: 1.4; }
.ws-list-card-meta { font-size: 0.6875rem; color: var(--ws-text-dim); display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.375rem; }

/* ─── BADGES ─────────────────────────────────── */
.ws-badge {
    display: inline-flex; align-items: center;
    font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem; border-radius: 100px;
    background: var(--ws-surface-2); color: var(--ws-text-muted);
}
.ws-badge.active { background: var(--ws-gold-dim); color: var(--ws-gold-text); }
.ws-badge.draft  { background: var(--ws-surface-2); color: var(--ws-text-dim); }
.ws-tag {
    display: inline-flex; font-size: 0.625rem; padding: 0.125rem 0.5rem;
    border-radius: 100px; background: var(--ws-surface-2); color: var(--ws-text-dim);
    cursor: pointer; transition: all var(--ws-transition);
}
.ws-tag:hover, .ws-tag.active { background: var(--ws-gold-dim); color: var(--ws-gold-text); }

/* ─── PROGRESS BAR ───────────────────────────── */
.ws-progress { width: 80px; height: 4px; background: var(--ws-surface-2); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.ws-progress-fill { height: 100%; background: var(--ws-gold); border-radius: 2px; transition: width 0.4s ease; }
.ws-progress-pct { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: var(--ws-text-muted); flex-shrink: 0; }

/* ─── BOUNTY SPECIFICS ───────────────────────── */
.ws-payout {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 0.875rem; color: var(--ws-gold-text); flex-shrink: 0;
}
.ws-bounty-details { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.ws-payout-status {
    font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem; border-radius: 100px;
}
.ws-payout-status.unpaid  { background: var(--ws-surface-2); color: var(--ws-text-dim); }
.ws-payout-status.pending { background: var(--ws-gold-dim); color: var(--ws-gold-text); }
.ws-payout-status.approved { background: var(--ws-blue-dim); color: var(--ws-blue); }
.ws-payout-status.paid    { background: var(--ws-green-dim); color: var(--ws-green); }

/* ─── GOVERNANCE / PROPOSALS ─────────────────── */
.ws-governance-line {
    font-size: 0.6875rem; color: var(--ws-text-dim);
    display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.375rem;
}
.vote-for { color: var(--ws-green); font-weight: 600; }
.vote-against { color: var(--ws-red); font-weight: 600; }
.execution-tag {
    background: var(--ws-surface-2); padding: 0.0625rem 0.375rem;
    border-radius: var(--ws-radius); font-size: 0.625rem;
}

/* ─── KNOWLEDGE BASE ─────────────────────────── */
.ws-search-input {
    width: 100%; padding: 0.625rem 0.875rem; margin-bottom: 0.75rem;
    background: var(--ws-surface); border: 1px solid var(--ws-border);
    border-radius: var(--ws-radius); color: var(--ws-text); font-size: 0.8125rem;
    transition: border-color var(--ws-transition);
}
.ws-search-input:focus { outline: none; border-color: var(--ws-gold); }
.ws-search-input::placeholder { color: var(--ws-text-dim); }
.ws-tag-filters { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ws-pinned-label {
    display: flex; align-items: center; gap: 0.375rem;
    font-size: 0.6875rem; font-weight: 600; color: var(--ws-gold-text);
    padding: 0.5rem 0; margin-bottom: 0.25rem;
}

/* ─── RIGHT RAIL ─────────────────────────────── */
/* .ws-right-rail is retired (2026-08-27).
   It carried Recent Credits and Contributor Path on five pages and took 320px
   of width on every one of them — on a 1280px laptop that is a quarter of the
   content area spent on two cards nobody had asked to see. The rule is kept as
   a no-op guard so any stale markup collapses instead of reserving a column. */
.ws-right-rail { display: none; }
.ws-treasury-balance { text-align: center; padding: 1rem; }
.ws-treasury-amount { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--ws-gold-text); }
.ws-treasury-label { font-size: 0.6875rem; color: var(--ws-text-muted); margin-top: 0.125rem; }
.ws-treasury-row { display: flex; justify-content: space-between; padding: 0.5rem 1rem; border-top: 1px solid var(--ws-border); font-size: 0.75rem; }
.ws-treasury-row-label { color: var(--ws-text-muted); }
.ws-treasury-row-value { color: var(--ws-text); font-weight: 500; font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; }

.ws-tx-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; border-top: 1px solid var(--ws-border); font-size: 0.75rem; }
.ws-tx-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; }
.ws-tx-icon.in  { background: var(--ws-green-dim); color: var(--ws-green); }
.ws-tx-icon.out { background: var(--ws-red-dim); color: var(--ws-red); }
.ws-tx-info { flex: 1; min-width: 0; }
.ws-tx-label { color: var(--ws-text); font-weight: 500; }
.ws-tx-date  { color: var(--ws-text-dim); font-size: 0.625rem; }
.ws-tx-amount { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 500; }
.ws-tx-amount.positive { color: var(--ws-green); }
.ws-tx-amount.negative { color: var(--ws-red); }

.ws-credit-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; border-top: 1px solid var(--ws-border); }
.ws-credit-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--ws-surface-2); display: flex; align-items: center; justify-content: center; font-size: 0.625rem; color: var(--ws-text-muted); overflow: hidden; flex-shrink: 0; }
.ws-credit-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ws-credit-info { flex: 1; min-width: 0; }
.ws-credit-name { font-size: 0.75rem; color: var(--ws-text); font-weight: 500; }
.ws-credit-desc { font-size: 0.625rem; color: var(--ws-text-dim); }
.ws-credit-amount { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: var(--ws-gold-text); font-weight: 600; }

/* ─── PATH (right rail) ──────────────────────── */
.ws-path-progress { padding: 1rem; text-align: center; }
.ws-path-level { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ws-gold-text); font-weight: 600; margin-bottom: 0.25rem; }
.ws-path-credits { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; color: var(--ws-text); }
.ws-path-track { padding: 0 1rem 1rem; }
.ws-milestone { display: flex; gap: 0.625rem; padding: 0.5rem 0; position: relative; }
.ws-milestone + .ws-milestone { border-top: 1px solid var(--ws-border); }
.ws-milestone-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; flex-shrink: 0;
    border: 1.5px solid var(--ws-border); background: var(--ws-surface);
    transition: all var(--ws-transition);
}
.ws-milestone.completed .ws-milestone-icon { background: var(--ws-gold-dim); border-color: var(--ws-gold); color: var(--ws-gold-text); }
.ws-milestone.current .ws-milestone-icon { background: var(--ws-gold-glow); border-color: var(--ws-gold); color: var(--ws-gold-text); box-shadow: 0 0 8px var(--ws-gold-dim); }
.ws-milestone.locked .ws-milestone-icon { color: var(--ws-text-dim); }
.ws-milestone-info { flex: 1; min-width: 0; }
.ws-milestone-title { font-size: 0.75rem; font-weight: 600; color: var(--ws-text); }
.ws-milestone.locked .ws-milestone-title { color: var(--ws-text-muted); }
.ws-milestone-desc { font-size: 0.625rem; color: var(--ws-text-dim); margin-top: 0.125rem; line-height: 1.3; }
.ws-milestone-bar { height: 3px; background: var(--ws-surface-2); border-radius: 2px; margin-top: 0.375rem; overflow: hidden; }
.ws-milestone-bar-fill { height: 100%; background: var(--ws-gold); border-radius: 2px; transition: width 0.6s ease; }

/* ─── EMPTY STATES ───────────────────────────── */
.ws-empty { text-align: center; padding: 2rem 1rem; color: var(--ws-text-muted); }
.ws-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.4; }
.ws-empty-text { font-size: 0.8125rem; line-height: 1.4; }
.ws-empty-sub { font-size: 0.6875rem; color: var(--ws-text-dim); margin-top: 0.25rem; }

/* ─── LOAD MORE ──────────────────────────────── */
.ws-load-more { display: flex; justify-content: center; padding: 0.75rem; border-top: 1px solid var(--ws-border); }
.ws-load-more-btn {
    background: none; border: 1px solid var(--ws-border);
    color: var(--ws-text-muted); font-size: 0.6875rem; padding: 0.375rem 1rem;
    border-radius: 100px; cursor: pointer; transition: all var(--ws-transition);
}
.ws-load-more-btn:hover { border-color: var(--ws-gold); color: var(--ws-gold-text); }

/* ─── ANIMATIONS ─────────────────────────────── */
.ws-animate { animation: wsFadeIn 0.2s ease both; }
@keyframes wsFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1024px) {
    .ws-right-rail { display: none; }
}
@media (max-width: 640px) {
    .ws-content { padding: 1rem; }
    .ws-list-header h1 { font-size: 1rem; }
    .ws-pulse-stat .stat-value { font-size: 0.875rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   APP SHELL LAYOUT  (moved here 2026-08-27)

   WHY THIS IS HERE AND NOT IN A shell.css
   ------------------------------------------------------------------------
   This block used to carry the comment "Medallion XLN — App Shell Layout /
   community/assets/css/shell.css — Shared across all workspace-family pages
   (Workspace, Tasks, Members, Events, etc.)". That file was never created.
   The block was pasted into members.css and events.css instead, so only those
   two pages ever received it.

   Tasks, Votes and Analytics load tokens.css, sections.css, workspace.css and
   their own stylesheet — none of which defined .ws-inner, .ws-center or
   .ws-center-scroll. Without them .ws-center-scroll had no bounded height and
   no overflow, so .tk-board-wrapper's `flex: 1; overflow-y: auto` had nothing
   to scroll inside: the task board simply ran off the bottom of the page and
   the last tasks in a column were unreachable. That is the "cannot scroll to
   the bottom of tasks" bug.

   workspace.css is the one stylesheet EVERY workspace-family page already
   loads — tasks, votes, analytics, events, members, forms, brackets,
   initiatives and graph — so the shell lives here, once, and the copies in
   members.css and events.css and the inline <style> blocks in votes/index.php
   and graph/index.php are gone. One definition, no drift.
   ════════════════════════════════════════════════════════════════════════ */

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

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

.app-shell > .sidebar-wrapper { flex-shrink: 0; }

.ws-outer {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.ws-inner {
    flex: 1;
    display: flex;
    overflow: hidden;
    /* min-height:0 is what actually lets a flex child scroll. Without it a
       flex item's min-height defaults to auto, it grows to fit its content,
       and every overflow:auto below it becomes inert — the page grows instead
       of the panel scrolling. */
    min-height: 0;
}

.ws-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.ws-center-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scroll-behavior: smooth;
}

/* ── Shared keyframes ──────────────────────────────────────────────── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .app-shell > .sidebar-wrapper { display: none; }
}