/* Zone table — color-coded chips per row. The first cell of each row
       renders as a tinted "Z1/Z2/..." badge using --zone-color from the
       inline style, and the row gets a left accent bar in the same color. */
    #hr-zones-table tbody tr td:first-child {
        position: relative;
        font-weight: 800;
        color: var(--pk-fg);
        padding-left: 22px;
    }
    #hr-zones-table tbody tr td:first-child::before {
        content: '';
        position: absolute;
        left: 8px; top: 50%;
        transform: translateY(-50%);
        width: 4px; height: 60%;
        border-radius: 2px;
        background: var(--zone-color, var(--pk-teal));
    }
    #hr-zones-table tbody tr td:nth-child(2) {
        color: var(--zone-color, var(--pk-fg));
        font-weight: 700;
    }
    #hr-zones-table tbody tr td:nth-child(4) {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: var(--pk-fg);
    }
    /* Tighten the long "purpose" column on narrow screens */
    @media (max-width: 720px) {
        #hr-zones-table tbody tr td:nth-child(5) { font-size: 0.85rem; }
    }