@layer pages {

    /* ── Page header (SEO H1 + intro) ── */
    .cl-page-header {
        padding: 1.1rem 0.65rem 0.4rem;
    }

    .cl-page-h1 {
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--color-text);
        margin-bottom: 0.25rem;
    }

    .cl-page-sub {
        font-size: 0.72rem;
        color: var(--color-sub);
        line-height: 1.5;
    }

    /* ── 3-col split shell with gap/padding ── */
    .cl-split {
        flex: 1;
        display: grid;
        grid-template-columns: 220px 1fr 340px;
        min-height: 0;
        gap: 0.65rem;
        padding: 0.65rem;
        overflow: hidden;
    }

    /* ── Floating glass panel base ── */
    .cl-lpane,
    .cl-mpane,
    .cl-rpane {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border-radius: 18px;
        border: 1.5px solid rgba(255,255,255,0.9);
        box-shadow:
            0 6px 0 rgba(140,165,215,0.55),
            0 14px 36px rgba(70,90,180,0.14);
    }

    .cl-lpane { background: rgba(255,255,255,0.60); backdrop-filter: blur(14px); }
    .cl-mpane { background: rgba(255,255,255,0.55); }
    .cl-rpane { background: rgba(255,255,255,0.60); backdrop-filter: blur(14px); }

    /* ── Pane header ── */
    .cl-ph {
        flex-shrink: 0;
        border-bottom: 1.5px solid rgba(200,212,235,0.45);
        padding: 0.75rem 0.9rem 0.6rem;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        color: var(--color-text);
        text-transform: uppercase;
    }

    .cl-ph span {
        color: var(--color-lbl);
        font-weight: 600;
        font-size: 0.95em;
        text-transform: none;
        letter-spacing: 0.03em;
    }

    /* ── Scrollable list ── */
    .cl-plist {
        flex: 1;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(180,196,230,0.4) transparent;
    }
    .cl-plist::-webkit-scrollbar { width: 3px; }
    .cl-plist::-webkit-scrollbar-thumb { background: rgba(180,196,230,0.5); border-radius: 2px; }

    /* ── Filter sections ── */
    .cl-fsec {
        padding: 0.85rem 0.85rem 0.6rem;
        border-bottom: 1px solid rgba(200,212,238,0.25);
    }
    .cl-fsec:last-child { border-bottom: none; }

    .cl-fsec-lbl {
        font-size: 0.54rem;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--color-lbl);
        text-transform: uppercase;
        margin-bottom: 0.45rem;
    }

    /* Filter options as pill chips (wrapping flex) */
    .cl-fopt-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .cl-fopt {
        font-size: 0.65rem;
        font-weight: 600;
        padding: 0.3em 0.7em;
        border-radius: 8px;
        background: transparent;
        color: var(--color-sub);
        border: 1px solid transparent;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: color 0.12s;
    }
    .cl-fopt:hover { color: var(--color-text); }
    .cl-fopt--on {
        background: rgba(255,255,255,0.9);
        color: var(--color-text);
        border-color: rgba(200,215,240,0.7);
        box-shadow: 0 2px 0 rgba(160,180,220,0.4);
    }

    /* ── Company list (padded, gapped cards) ── */
    .cl-co-list {
        flex: 1;
        overflow-y: auto;
        padding: 0.45rem 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(180,196,230,0.4) transparent;
    }
    .cl-co-list::-webkit-scrollbar { width: 3px; }
    .cl-co-list::-webkit-scrollbar-thumb { background: rgba(180,196,230,0.5); border-radius: 2px; }

    /* ── Company card (clay tile) ── */
    .cl-co-card {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.6rem 0.7rem;
        cursor: pointer;
        text-decoration: none;
        border: 1.5px solid transparent;
        border-radius: 16px 12px 18px 14px / 12px 18px 14px 16px;
        position: relative;
        transition: transform 0.12s, box-shadow 0.12s;
    }
    .cl-co-card:hover { transform: translateY(-2px); }
    .cl-co-card:hover .cl-co-name { color: var(--color-blue); }

    /* Nth-child color variants */
    .cl-co-card:nth-child(8n+1) { background: #daeeff; border-color: #94c4f0; box-shadow: 0 5px 0 #60a0d8; }
    .cl-co-card:nth-child(8n+2) { background: #e8eaf8; border-color: #b8bce8; box-shadow: 0 5px 0 #8890c8; }
    .cl-co-card:nth-child(8n+3) { background: #dff4e8; border-color: #a8d8c0; box-shadow: 0 5px 0 #70b890; }
    .cl-co-card:nth-child(8n+4) { background: #eae6f8; border-color: #c4bce8; box-shadow: 0 5px 0 #9888cc; }
    .cl-co-card:nth-child(8n+5) { background: #fff3e8; border-color: #e8c8a8; box-shadow: 0 5px 0 #c89868; }
    .cl-co-card:nth-child(8n+6) { background: #ffe8f4; border-color: #f0b8d8; box-shadow: 0 5px 0 #d080a8; }
    .cl-co-card:nth-child(8n+7) { background: #e8f8ff; border-color: #a8d8f0; box-shadow: 0 5px 0 #60a8c8; }
    .cl-co-card:nth-child(8n+8) { background: #f8f4e8; border-color: #dfd0a8; box-shadow: 0 5px 0 #b0a070; }

    .cl-co-info { flex: 1; min-width: 0; }

    .cl-co-name-row {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.2em;
    }

    .cl-co-name {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }

    .cl-co-verified {
        font-size: 0.5rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #1a8a40;
        background: #c8f0d8;
        border: 1px solid #88d0a8;
        border-radius: 5px;
        padding: 0.1em 0.45em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .cl-co-tagline {
        font-size: 0.6rem;
        color: var(--color-sub);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.3em;
    }

    .cl-co-chips {
        display: flex;
        gap: 0.28rem;
        flex-wrap: wrap;
    }

    .cl-co-chip {
        font-size: 0.52rem;
        font-weight: 600;
        padding: 0.2em 0.55em;
        border-radius: 6px;
        background: rgba(255,255,255,0.7);
        border: 1px solid rgba(200,215,235,0.7);
        color: var(--color-sub);
        box-shadow: 0 1px 0 rgba(160,180,220,0.25);
        white-space: nowrap;
    }

    .cl-co-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.3rem;
        flex-shrink: 0;
    }

    .cl-co-roles-pill {
        font-size: 0.52rem;
        font-weight: 700;
        padding: 0.22em 0.6em;
        border-radius: var(--radius-pill);
        background: var(--color-blue-bg);
        color: var(--color-blue-d);
        border: 1px solid var(--color-blue-l);
        box-shadow: 0 2px 0 rgba(80,130,220,0.2);
        white-space: nowrap;
    }

    /* ── Legacy: keep cl-co-meta for old cards ── */
    .cl-co-meta {
        display: flex;
        gap: 0.8rem;
        font-size: 0.6rem;
        color: var(--color-lbl);
    }

    /* ── Right pane empty state ── */
    .cl-no-sel {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: var(--color-lbl);
    }
    .cl-no-sel-icon { font-size: 2.5rem; opacity: 0.2; }
    .cl-no-sel-txt  { font-size: 0.65rem; letter-spacing: 0.1em; }

    /* ── Empty state ── */
    .cl-empty {
        padding: 1.5rem;
        font-size: 0.8rem;
        color: var(--color-lbl);
        text-align: center;
    }

    /* ── Right pane: company preview (HTMX loaded) ── */
    .cl-prev-scroll {
        flex: 1;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(180,196,230,0.4) transparent;
    }
    .cl-prev-scroll::-webkit-scrollbar { width: 3px; }
    .cl-prev-scroll::-webkit-scrollbar-thumb { background: rgba(180,196,230,0.5); border-radius: 2px; }

    .cl-prev-sec {
        border-bottom: 1px solid rgba(200,212,238,0.3);
        padding: 0.75rem 1rem;
    }
    .cl-prev-sec:last-child { border-bottom: none; }

    .cl-prev-sec-lbl {
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        color: var(--color-lbl);
        text-transform: uppercase;
        margin-bottom: 0.55rem;
    }
    .cl-prev-sec-lbl span { font-weight: 400; }

    .cl-prev-row {
        display: flex;
        gap: 0.5rem;
        font-size: 0.62rem;
        margin-bottom: 0.3rem;
    }

    .cl-prev-lbl {
        color: var(--color-lbl);
        min-width: 70px;
        font-weight: 700;
        font-size: 0.9em;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        flex-shrink: 0;
    }

    .cl-prev-val { color: var(--color-sub); font-weight: 500; }

    .cl-prev-body {
        font-size: 0.63rem;
        color: var(--color-sub);
        line-height: 1.65;
    }

    /* Tech pills */
    .cl-prev-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .cl-prev-tag {
        font-size: 0.62rem;
        font-weight: 600;
        color: var(--color-blue-d);
        background: var(--color-blue-bg);
        border: 1px solid var(--color-blue-l);
        border-radius: 8px;
        padding: 0.28em 0.75em;
        box-shadow: 0 2px 0 rgba(80,130,220,0.15);
    }

    /* Job role rows in preview */
    .cl-prev-job {
        padding: 0.55rem 0.7rem;
        background: rgba(255,255,255,0.7);
        border: 1.5px solid rgba(210,220,240,0.7);
        border-radius: 12px 8px 12px 10px / 8px 12px 10px 12px;
        box-shadow: 0 3px 0 rgba(160,180,220,0.35), 0 5px 12px rgba(80,100,180,0.08);
        margin-bottom: 0.35rem;
    }
    .cl-prev-job:last-of-type { margin-bottom: 0; }

    .cl-prev-job-title {
        font-size: 0.65rem;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: 0.2em;
    }

    .cl-prev-job-meta {
        font-size: 0.58rem;
        color: var(--color-sub);
        display: flex;
        align-items: center;
        gap: 0.35em;
    }

    .cl-prev-job-salary {
        color: var(--color-green-d);
        font-weight: 600;
    }

    .cl-prev-empty {
        font-size: 0.7rem;
        color: var(--color-lbl);
        padding: 0.3em 0;
    }

    /* CTA */
    .cl-prev-cta { padding: 0.85rem 1rem 1rem; }

    .cl-prev-btn {
        display: block;
        width: 100%;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #fff;
        text-decoration: none;
        text-align: center;
        border-radius: var(--radius-pill);
        background: linear-gradient(to bottom, #60e890, #2ec76b);
        border: 1.5px solid #20a050;
        padding: 0.82em 1em;
        cursor: pointer;
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,0.4),
            0 6px 0 #148038,
            0 10px 22px rgba(46,199,107,0.44);
        transition: transform 0.1s, box-shadow 0.1s;
    }
    .cl-prev-btn:hover  { transform: translateY(-2px); }
    .cl-prev-btn:active {
        transform: translateY(4px);
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 2px 0 #148038, 0 4px 10px rgba(46,199,107,0.3);
    }

    /* ── Quick filter bar (search) ── */
    .cl-fbar {
        flex-shrink: 0;
        border-bottom: 1.5px solid rgba(200,212,235,0.45);
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0 0.9rem;
        min-height: 36px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .cl-fbar::-webkit-scrollbar { display: none; }
    .cl-fbar-lbl { font-size: 0.6rem; color: var(--color-lbl); letter-spacing: 0.1em; flex-shrink: 0; }

    .cl-fchip {
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--color-sub);
        background: rgba(255,255,255,0.6);
        border: 1px solid rgba(200,212,238,0.6);
        border-radius: var(--radius-pill);
        padding: 0.2em 0.7em;
        cursor: pointer;
        white-space: nowrap;
        user-select: none;
        flex-shrink: 0;
        text-decoration: none;
        box-shadow: 0 2px 0 rgba(160,180,220,0.25);
        transition: background 0.1s, color 0.1s;
    }
    .cl-fchip:hover { color: var(--color-text); background: rgba(255,255,255,0.85); }
    .cl-fchip--on   { color: var(--color-blue); border-color: var(--color-blue-l); background: var(--color-blue-bg); box-shadow: 0 2px 0 var(--color-blue-l); }

    /* ── Search box ── */
    .cl-search-box {
        flex-shrink: 0;
        border-bottom: 1.5px solid rgba(200,212,235,0.45);
        padding: 0 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 36px;
    }
    .cl-search-ico   { font-size: 0.82rem; color: var(--color-lbl); flex-shrink: 0; }
    .cl-search-input {
        flex: 1;
        background: transparent;
        border: none;
        color: var(--color-text);
        font-family: inherit;
        font-size: 0.78rem;
        outline: none;
    }
    .cl-search-input::placeholder { color: var(--color-lbl); }

}