/*
 * ActivityGuide Website Module (static CSS)
 *
 * IMPORTANT:
 * - This file is served as a module static asset and is referenced by `~/Module.css`.
 * - Keep all rules scoped under `.scm-mod-ActivityGuide`.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1: DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-ActivityGuide {
    /* Colors */
    --ag-accent: var(--scm-accent, #2563eb);
    --ag-bg: var(--scm-surface, #ffffff);
    --ag-text: var(--scm-surface-contrast, #0f172a);
    --ag-text-muted: color-mix(in oklch, var(--ag-text) 55%, var(--ag-bg) 45%);
    --ag-border: var(--scm-border, #e2e8f0);
    --ag-success: #16a34a;
    --ag-warning: #f59e0b;

    /* Typography */
    --ag-font: inherit;
    --ag-text-sm: 0.875rem;
    --ag-text-base: 1rem;

    /* Spacing */
    --ag-space-3: 0.75rem;
    --ag-space-4: 1rem;
    --ag-space-5: 1.25rem;
    --ag-space-6: 1.5rem;

    /* Radius */
    --ag-radius-md: 0.5rem;
    --ag-radius-lg: 0.75rem;
    --ag-radius-xl: 1rem;

    /* Shadows */
    --ag-shadow-card:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.03);

    /* Layout */
    --ag-max-width: 640px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2: BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-ActivityGuide {
    font-family: var(--ag-font);
    font-size: var(--ag-text-base);
    line-height: 1.5;
    color: var(--ag-text);
    -webkit-font-smoothing: antialiased;

    width: 100%;
    max-width: var(--ag-max-width);
    margin: 0 auto;
    padding: var(--ag-space-4);
}

.scm-mod-ActivityGuide *,
.scm-mod-ActivityGuide *::before,
.scm-mod-ActivityGuide *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3: ACTIVITY CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-ActivityGuide .guide-activity-card {
    background: var(--ag-bg);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius-lg);
    padding: var(--ag-space-4);
    margin-bottom: var(--ag-space-3);
    box-shadow: var(--ag-shadow-card);
}

.scm-mod-ActivityGuide .guide-activity-now {
    border-left: 3px solid var(--ag-success);
}

.scm-mod-ActivityGuide .guide-activity-completed {
    opacity: 0.6;
}

.scm-mod-ActivityGuide .activity-header {
    display: flex;
    align-items: center;
    gap: var(--ag-space-3);
}

.scm-mod-ActivityGuide .activity-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.scm-mod-ActivityGuide .activity-info {
    flex: 1;
    min-width: 0;
}

.scm-mod-ActivityGuide .activity-name {
    font-weight: 600;
    font-size: var(--ag-text-base);
}

.scm-mod-ActivityGuide .activity-time {
    font-size: var(--ag-text-sm);
}

.scm-mod-ActivityGuide .activity-assignment {
    font-size: var(--ag-text-sm);
    color: var(--ag-success);
}

.scm-mod-ActivityGuide .activity-directions {
    font-size: var(--ag-text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4: SWAP SCHEDULE
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-ActivityGuide .guide-swap-rotation {
    padding: var(--ag-space-3);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius-md);
    margin-bottom: var(--ag-space-3);
}

.scm-mod-ActivityGuide .guide-swap-rotation--now {
    border-color: var(--ag-success);
    background: color-mix(in oklch, var(--ag-success) 5%, var(--ag-bg) 95%);
}

.scm-mod-ActivityGuide .guide-swap-rotation--next {
    border-color: var(--ag-warning);
    background: color-mix(in oklch, var(--ag-warning) 5%, var(--ag-bg) 95%);
}

/* Personalized guide (?p= participant token): the participant's own rotations get an
   accent edge so "which turns are mine" reads at a glance. Combines with the status
   backgrounds above (border-left wins over the status border on that edge only). */
.scm-mod-ActivityGuide .guide-swap-rotation--mine {
    border-left: 4px solid var(--ag-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: GROUP EVENT STANDINGS
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-ActivityGuide .guide-my-rank {
    background: color-mix(in oklch, var(--ag-warning) 8%, var(--ag-bg) 92%);
    border: 1px solid color-mix(in oklch, var(--ag-warning) 20%, var(--ag-bg) 80%);
    border-radius: var(--ag-radius-md);
    padding: var(--ag-space-3);
    text-align: center;
}

.scm-mod-ActivityGuide .guide-standing-row--me {
    background: color-mix(in oklch, var(--ag-accent) 6%, var(--ag-bg) 94%);
    border-radius: var(--ag-radius-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .scm-mod-ActivityGuide {
        padding: var(--ag-space-3);
    }
}