/* Watchlist — extracted from page-templates/page-watchlist.php inline <style> (WS-2.6 Phase 1, 1A PR-6). */
/* Byte-identical carryover of the former inline block; legacy :root/hex preserved (cleaned in a separate WS-2.5 slice). */
        /* Watchlist Styles */
        .wl-filters {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
            padding: 16px;
        }
        
        .wl-filter-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .wl-filter-label {
            font-size: 13px;
            color: var(--gp-gray-500, #6b7280);
            font-weight: 500;
        }
        
        .wl-filter-select {
            padding: 8px 12px;
            font-size: 13px;
            border: 1px solid var(--gp-gray-300, #d1d5db);
            border-radius: 6px;
            background: #fff;
        }
        
        .wl-table-wrap {
            overflow-x: auto;
        }

        .wl-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }

        /* Mobile-only field prefix ("Class ", "GPA ", "Added ") - present in the DOM always
           (screen readers get it on every viewport) but only shown at phone widths, where the
           bare value alone would be ambiguous once the column header disappears (see the
           <=768px reflow block below). */
        .wl-field-label {
            display: none;
            font-size: 11px;
            font-weight: 600;
            color: var(--gp-color-text-muted);
        }
        
        .wl-table th {
            padding: 14px 16px;
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            color: var(--gp-gray-500, #6b7280);
            text-transform: uppercase;
            background: var(--gp-gray-50, #f9fafb);
            border-bottom: 1px solid var(--gp-gray-200, #e5e7eb);
        }
        
        .wl-table th:first-child { padding-left: 20px; }
        .wl-table th:last-child { padding-right: 20px; text-align: right; }
        
        .wl-table td {
            padding: 16px;
            border-bottom: 1px solid var(--gp-gray-100, #f3f4f6);
            vertical-align: middle;
        }
        
        .wl-table td:first-child { padding-left: 20px; }
        .wl-table td:last-child { padding-right: 20px; }
        
        .wl-table tr:hover {
            background: var(--gp-gray-50, #f9fafb);
        }
        
        .wl-profile-link {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: inherit;
        }
        
        .wl-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--gp-gray-200, #e5e7eb);
            overflow: hidden;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .wl-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .wl-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--gp-gray-900, #111827);
        }
        
        .wl-club {
            font-size: 12px;
            color: var(--gp-gray-500, #6b7280);
        }
        
        .wl-events {
            display: flex;
            gap: 4px;
        }
        
        .wl-event-badge {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            background: var(--gp-gray-100, #f3f4f6);
            color: var(--gp-gray-600, #4b5563);
            font-weight: 600;
        }
        
        .wl-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }
        
        .wl-action-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--gp-gray-100, #f3f4f6);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gp-gray-500, #6b7280);
            transition: all 0.2s;
            text-decoration: none;
        }
        
        .wl-action-btn:hover {
            background: var(--gp-gray-200, #e5e7eb);
            color: var(--gp-gray-700, #374151);
        }
        
        .wl-action-btn.remove:hover {
            background: #fee2e2;
            color: #dc2626;
        }
        
        .wl-pagination {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: center;
            padding: 16px 20px;
            border-top: 1px solid var(--gp-gray-200, #e5e7eb);
        }
        
        .wl-page-info {
            font-size: 14px;
            color: var(--gp-gray-500, #6b7280);
            padding: 0 16px;
        }
        
        /* Modal styles */
        .wl-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 2000;
            background: rgba(0,0,0,0.5);
            padding: 20px;
            overflow-y: auto;
        }
        
        .wl-modal.active {
            display: block;
        }
        
        .wl-modal-content {
            max-width: 400px;
            margin: 100px auto;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
        }
        
        .wl-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--gp-gray-200, #e5e7eb);
        }
        
        .wl-modal-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        .wl-modal-body {
            padding: 24px;
        }
        
        .wl-form-group {
            margin-bottom: 16px;
        }
        
        .wl-form-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--gp-gray-700, #374151);
            margin-bottom: 6px;
        }
        
        .wl-form-select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--gp-gray-300, #d1d5db);
            border-radius: 8px;
            font-size: 14px;
        }
        
        .wl-modal-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 20px;
        }
        
        /* Promo card */
        .wl-promo-card {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
            padding: 20px 24px;
        }
        
        .wl-promo-content {
            flex: 1;
        }
        
        .wl-promo-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--gp-gray-900, #111827);
            margin: 0 0 4px 0;
        }
        
        .wl-promo-text {
            font-size: 14px;
            color: var(--gp-gray-500, #6b7280);
            margin: 0;
        }
        
        @media (max-width: 768px) {
            .wl-filters {
                flex-direction: column;
                align-items: stretch;
            }
            .wl-filter-group {
                flex-wrap: wrap;
            }
            .wl-promo-card {
                flex-direction: column;
                text-align: center;
            }

            /* ---- WS-2.6 Phase 2: native phone rows, not a squeezed table ----
               Same <tr data-profile-id> the desktop table already renders (js/gp-watchlist.js
               keys off that attribute for remove/add-to-board - zero JS changes needed) reflowed
               via CSS grid, mirroring the Recruiting Board's proven .rb-table--recruits pattern
               (css/gp-recruiting-board.css). No horizontal scroll, no dropped data - every column
               the desktop table shows is still here, just reorganized as a card:
                 Row 1: avatar + name (+ club)                    full width
                 Row 2: Class · Location                          meta line
                 Row 3: Events chips              |  GPA          secondary meta
                 Row 4: Added date                 |  actions     44px tap targets */
            .wl-table-wrap { overflow-x: visible; }
            .wl-table { min-width: unset; width: 100%; }
            .wl-table thead { display: none; }
            .wl-table, .wl-table tbody { display: block; width: 100%; }
            .wl-table tr {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                column-gap: 10px;
                row-gap: 8px;
                align-items: center;
                padding: 14px;
                margin-bottom: 10px;
                border: 1px solid var(--gp-color-border);
                border-radius: var(--gp-card-radius);
                background: var(--gp-card-bg);
                transition: background var(--gp-motion-duration-fast) var(--gp-motion-ease-out);
            }
            .wl-table tr:active { background: var(--gp-color-surface-2); }
            .wl-table td {
                display: block;
                padding: 0 !important;
                border: none !important;
            }
            .wl-field-label { display: inline; }

            .wl-table td:nth-child(1) { grid-column: 1 / 5; grid-row: 1; }
            .wl-table td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; font-size: 13px; }
            .wl-table td:nth-child(3) { grid-column: 3 / 5; grid-row: 2; font-size: 13px; }
            .wl-table td:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
            .wl-table td:nth-child(5) { grid-column: 3 / 5; grid-row: 3; justify-self: end; }
            .wl-table td:nth-child(6) { grid-column: 1 / 3; grid-row: 4; align-self: end; }
            .wl-table td:nth-child(7) { grid-column: 3 / 5; grid-row: 4; justify-self: end; }

            .wl-actions { justify-content: flex-end; gap: 10px; }
            .wl-action-btn { width: 44px; height: 44px; }
        }

/* ============================================================================
   DARK MODE (Podium wave 4, UB) — the Watchlist was still a flat set of light
   Tier-1 grays (raw #fff surfaces, gray-50/100/200/900 fills and inks tuned for
   a white card) so it read almost entirely light-on-dark once the rest of the
   app went Graphite. Repointed onto the Tier-2 --gp-color-* semantics, same
   convention as css/gp-recruiting-board.css's wave-2 pass. LIGHT IS UNTOUCHED —
   every rule below only fires under [data-theme="dark"]; the base declarations
   above keep rendering exactly as before (this file is CI-exempt for raw hex,
   so the pre-existing gray and hex values above were never a lint issue — they
   are simply light-locked without this block). The <select> filters, table
   header row, and inline table-cell inks (page-templates/page-watchlist.php)
   are part of this same pass. */
[data-theme="dark"] .wl-filter-select,
[data-theme="dark"] .wl-form-select {
    background: var(--gp-color-surface);
    border-color: var(--gp-color-border);
    color: var(--gp-color-text);
}

[data-theme="dark"] .wl-filter-label,
[data-theme="dark"] .wl-club,
[data-theme="dark"] .wl-page-info,
[data-theme="dark"] .wl-promo-text,
[data-theme="dark"] .wl-form-label {
    color: var(--gp-color-text-muted);
}

[data-theme="dark"] .wl-table th {
    color: var(--gp-color-text-muted);
    background: var(--gp-color-surface-2);
    border-bottom-color: var(--gp-color-border);
}

[data-theme="dark"] .wl-table td {
    border-bottom-color: var(--gp-color-border);
}

[data-theme="dark"] .wl-table tr:hover {
    background: var(--gp-color-surface-2);
}

[data-theme="dark"] .wl-avatar,
[data-theme="dark"] .wl-event-badge,
[data-theme="dark"] .wl-action-btn {
    background: var(--gp-color-surface-2);
}

[data-theme="dark"] .wl-event-badge,
[data-theme="dark"] .wl-action-btn {
    color: var(--gp-color-text-muted);
}

[data-theme="dark"] .wl-action-btn:hover {
    background: var(--gp-color-border-strong);
    color: var(--gp-color-text);
}

[data-theme="dark"] .wl-name,
[data-theme="dark"] .wl-promo-title {
    color: var(--gp-color-text);
}

[data-theme="dark"] .wl-pagination {
    border-top-color: var(--gp-color-border);
}

[data-theme="dark"] .wl-modal-content {
    background: var(--gp-color-surface);
}

[data-theme="dark"] .wl-modal-header {
    border-bottom-color: var(--gp-color-border);
}