/*
 * posts-library.css
 *
 * Phase 59 per DECISION_LOG.md decisions 663-671. Owns the visual
 * presentation for the admin Posts Library browse + governance
 * surface:
 *
 *   - Three-pane grid (facet rail / result list / detail pane)
 *   - Bulk-action toolbar (12 bulk_kinds per Admin Bulk Operation Kinds registry)
 *   - Facet rail (18 facets per Posts Library Filter Facets registry)
 *   - Result list (paginated post rows + selection toolbar)
 *   - Detail pane (progressive disclosure: summary / label / tags /
 *     folder / site projection / moderation / audit)
 *   - Modals (Tag Manager, Folder Manager, Bulk Action)
 *   - Toast region (bulk-action summary feedback)
 *   - Color label palette (Admin Post Color Labels: 7 closed values)
 *
 * All class names are prefixed `pl-` (posts-library) so they don't
 * collide with anything in panel.css / placeholder.css /
 * posts-compose.css. The page-shell / ui-button / ui-button--*
 * shapes are inherited from placeholder.css unchanged (the partition
 * lock applies to NEW class shapes; the existing chrome stays
 * shared).
 *
 * The closed registry families surfaced visually here are:
 *   - Admin Post Color Labels: .pl-color--<code> for 7 colors
 *   - Admin Post Star Rating Scale: .pl-star--<n> for 0-5
 *   - Posts Library Filter Facets: data-pl-facet attribute on each
 *     <details> in the facet rail (18 facets)
 *   - Admin Bulk Operation Kinds: data-pl-bulk-kind on each toolbar
 *     button (12 kinds)
 *
 * Adding a new color requires:
 *   1. Add to CONTROLLED_VOCABULARIES.md `Admin Post Color Labels`
 *      registry
 *   2. Add to admin_post_label.color_label_code ENUM (append-only)
 *   3. Add a `.pl-color--<code>` block here AND a matching
 *      `<li class="pl-color pl-color--<code>">` in the facet rail
 *      template
 *   4. Add to PostLabel.pm `%VALID_COLOR_CODES`
 *   5. Add a fixture test to DOC_TESTS.md T-PostsLibrary-Registries
 */

/* ============================================================
   Page shell scoping
   ============================================================ */
.page-shell--posts-library {
    padding: var(--sp-6);
    gap: var(--sp-4);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.page-shell--posts-library .page-shell-header {
    width: 100%;
    margin: 0 0 var(--sp-3);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    position: relative;
    overflow: visible;
}

.pl-page-heading__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.pl-page-heading__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
    z-index: 35;
}

.pl-header-select {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.pl-header-select select {
    min-width: 130px;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font: inherit;
    font-size: var(--fs-sm);
    outline: none;
}

.pl-timeline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
}

.pl-timeline-toggle > span {
    padding: 0 8px;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.pl-timeline-toggle button {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 5px 10px;
}

.pl-timeline-toggle button.is-active {
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.page-shell--posts-library .page-shell-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.page-shell--posts-library.pl-feed-maximized {
    padding: 0 var(--sp-4) var(--sp-4);
    gap: 0;
}

.pl-feed-maximized .page-shell-header,
.pl-feed-maximized .pl-folder-panel,
.pl-feed-maximized .pl-filter-popover,
.pl-feed-maximized .pl-detail,
.pl-feed-maximized .pl-bulk-toolbar {
    display: none !important;
}

/* ============================================================
   Common atoms (pl-pane-title, pl-hint, pl-input, pl-checkbox)
   ============================================================ */
.pl-pane-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
}

.pl-hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: var(--lh);
}

.pl-hint code {
    font-family: var(--ff-mono);
    font-size: 0.875em;
    background: var(--c-hover);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
}

.pl-input {
    width: 100%;
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-family: inherit;
    box-sizing: border-box;
}

.pl-input:focus {
    outline: 2px solid var(--c-accent, #4c8bf5);
    outline-offset: -1px;
    border-color: var(--c-accent, #4c8bf5);
}

.pl-input--narrow { width: 120px; }
.pl-input--textarea {
    height: auto;
    min-height: 64px;
    padding: var(--sp-2) var(--sp-3);
    line-height: var(--lh);
    resize: vertical;
}

.pl-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    user-select: none;
}

.pl-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

/* ============================================================
   Bulk-action toolbar (above the three-pane grid)
   ============================================================ */
.pl-bulk-toolbar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent, #4c8bf5);
    border-radius: var(--radius-md);
}

.pl-bulk-toolbar[hidden] {
    display: none;
}

.pl-bulk-toolbar__count {
    font-size: var(--fs-sm);
    color: var(--c-text);
    margin-right: var(--sp-2);
}

.pl-bulk-toolbar__count strong {
    color: var(--c-accent, #4c8bf5);
    font-weight: 600;
}

.pl-bulk-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.pl-bulk-toolbar__sep {
    width: 1px;
    height: 18px;
    background: var(--c-border);
    margin: 0 var(--sp-1);
}

.pl-bulk-toolbar__clear {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pl-bulk-toolbar__clear:hover {
    color: var(--c-text);
}

.pl-bulk-star-btn {
    min-width: 34px;
    color: var(--amber-600, #d97706);
    font-weight: 800;
}

.pl-bulk-more {
    position: relative;
}

.pl-bulk-more > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-muted);
    cursor: pointer;
    list-style: none;
}

.pl-bulk-more > summary::-webkit-details-marker {
    display: none;
}

.pl-bulk-more__menu {
    position: absolute;
    top: calc(100% + var(--sp-1));
    right: 0;
    z-index: 45;
    min-width: 140px;
    padding: var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
}

/* ============================================================
   Three-pane grid
   ============================================================ */
.pl-grid {
    display: grid;
    grid-template-columns: minmax(450px, 1.025fr) minmax(420px, 0.975fr);
    gap: var(--sp-4);
    align-items: stretch;
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.pl-feed-maximized .pl-grid,
.pl-feed-maximized.pl-has-folder-panel .pl-grid,
.pl-feed-maximized.pl-detail-collapsed .pl-grid,
.pl-feed-maximized.pl-has-folder-panel.pl-detail-collapsed .pl-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.pl-has-folder-panel .pl-grid {
    grid-template-columns: minmax(220px, 0.48fr) minmax(360px, 1.2fr) minmax(340px, 0.9fr);
}

.pl-detail-collapsed .pl-grid {
    grid-template-columns: minmax(0, 1fr) 56px;
}

.pl-has-folder-panel.pl-detail-collapsed .pl-grid {
    grid-template-columns: minmax(220px, 0.48fr) minmax(420px, 1.5fr) 56px;
}

@media (max-width: 1100px) {
    .pl-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .pl-detail {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: min(560px, 100vw);
        max-width: 100vw;
        z-index: 30;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        border-left: 1px solid var(--c-border);
        background: var(--c-surface);
    }
}

.pl-folder-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.pl-folder-panel[hidden] {
    display: none;
}

.pl-folder-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-border);
}

.pl-folder-panel__head .pl-hint {
    margin: var(--sp-1) 0 0;
}

.pl-folder-panel__create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2);
}

.pl-folder-panel__create .pl-hint {
    grid-column: 1 / -1;
    margin: 0;
}

.pl-folder-panel__tree {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    flex-direction: column;
    gap: var(--sp-1);
}

.pl-folder-node {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    padding: var(--sp-2);
    padding-left: calc(var(--sp-2) + (var(--folder-depth, 0) * 16px));
    text-align: left;
}

.pl-folder-node:hover,
.pl-folder-node:focus,
.pl-folder-node.is-drop-target {
    background: var(--c-hover);
    border-color: var(--c-border);
    outline: none;
}

.pl-folder-node.is-active {
    background: rgba(76, 139, 245, 0.12);
    border-color: var(--c-accent, #4c8bf5);
}

.pl-folder-node__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-folder-node__count {
    min-width: 22px;
    padding: 1px 7px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: center;
}

.pl-folder-context-menu {
    position: fixed;
    z-index: 80;
    min-width: 150px;
    padding: var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.pl-folder-context-menu[hidden] {
    display: none;
}

.pl-folder-context-menu button {
    display: block;
    width: 100%;
    padding: var(--sp-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    text-align: left;
}

.pl-folder-context-menu button:hover,
.pl-folder-context-menu button:focus {
    background: var(--c-hover);
    outline: none;
}

.pl-filter-popover {
    position: relative;
    z-index: 20;
    margin-left: auto;
}

.pl-filter-popover__toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.pl-filter-popover__toggle::-webkit-details-marker {
    display: none;
}

.pl-filter-popover__toggle::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--c-text-muted);
    transform: rotate(45deg) translateY(-1px);
    transform-origin: center;
    transition: transform 0.15s ease;
}

.pl-filter-popover[open] .pl-filter-popover__toggle {
    border-color: var(--c-accent, #4c8bf5);
    color: var(--c-accent, #4c8bf5);
}

.pl-filter-popover[open] .pl-filter-popover__toggle::after {
    transform: rotate(225deg) translateY(-1px);
}

@media (max-width: 900px) {
    .pl-grid {
        grid-template-columns: 1fr;
    }
    .pl-facet-rail {
        position: absolute;
        top: calc(100% + var(--sp-2));
        right: 0;
        z-index: 5;
    }
}

/* ============================================================
   Facet rail (left pane)
   ============================================================ */
.pl-facet-rail {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    width: min(380px, calc(100vw - 48px));
    max-height: min(680px, calc(100vh - 180px));
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.pl-facet-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-border);
}

.pl-facet-rail__reset {
    background: none;
    border: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pl-facet-rail__reset:not(:disabled):hover {
    color: var(--c-text);
}

.pl-facet {
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-2) 0;
}

.pl-facet:last-child {
    border-bottom: 0;
}

.pl-facet--search {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
}

.pl-facet__label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-1);
}

.pl-facet__input {
    width: 100%;
    height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-sm);
    box-sizing: border-box;
}

.pl-facet__input--narrow { width: 100%; max-width: 140px; }

.pl-facet__summary {
    cursor: pointer;
    list-style: none;
    padding: var(--sp-1) 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pl-facet__summary::before {
    content: "▶";
    font-size: 0.625em;
    color: var(--c-text-muted);
    margin-right: var(--sp-2);
    transition: transform 0.15s ease;
}

.pl-facet > details[open] .pl-facet__summary::before {
    transform: rotate(90deg);
}

.pl-facet__list {
    list-style: none;
    padding: 0;
    margin: var(--sp-1) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.pl-facet__option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
}

.pl-facet__option:hover {
    background: var(--c-hover);
}

.pl-facet__option input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.pl-facet__group {
    margin-top: var(--sp-2);
}

.pl-facet__placeholder {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-style: italic;
    padding: var(--sp-2);
}

.pl-facet__chip-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-1) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.pl-folder-tree {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text);
}

/* ============================================================
   Color labels (Admin Post Color Labels: 7 closed values)
   ============================================================ */
.pl-color {
    position: relative;
}

.pl-color::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: var(--sp-2);
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: middle;
}

.pl-color--red::before    { background: #e54545; }
.pl-color--orange::before { background: #f39c45; }
.pl-color--yellow::before { background: #f5c842; }
.pl-color--green::before  { background: #4cb377; }
.pl-color--blue::before   { background: #4c8bf5; }
.pl-color--purple::before { background: #9b6ade; }
.pl-color--gray::before   { background: #8a8d92; }

/* ============================================================
   Result list (center pane)
   ============================================================ */
.pl-result-list {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pl-result-list__head {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-3);
}

.pl-result-list__maximize {
    margin-left: var(--sp-2);
}

.pl-icon-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-muted);
    cursor: pointer;
}

.pl-icon-action:hover {
    background: var(--c-hover);
    color: var(--c-text);
}

.pl-feed-maximize-floating {
    display: none;
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 20;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--c-text);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}

.pl-feed-maximize-floating:hover {
    background: var(--c-surface);
}

.pl-feed-maximized .pl-result-list {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-top: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
}

.pl-feed-maximized .pl-result-list__head {
    display: none;
}

.pl-feed-maximized .pl-feed-maximize-floating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pl-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
}

.pl-view-toggle button {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 4px 10px;
}

.pl-view-toggle button.is-active {
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.pl-result-list__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}

.pl-result-list__count {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.pl-result-list__sep {
    color: var(--c-text-muted);
}

.pl-result-list__sort {
    height: 30px;
    min-width: 185px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    background-image: linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%), linear-gradient(135deg, var(--c-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 12px, calc(100% - 10px) 12px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--c-text);
    font-size: var(--fs-sm);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.pl-result-list__select-all {
    margin-left: var(--sp-2);
}

.pl-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--sp-1);
}

.pl-row {
    display: grid;
    grid-template-columns: auto minmax(140px, 168px) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--sp-3);
    min-height: 122px;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    overflow: visible;
    background: var(--c-surface);
    --pl-row-color: transparent;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
}

.pl-has-folder-panel .pl-row {
    grid-template-columns: auto minmax(128px, 148px) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    min-height: 112px;
}

.pl-has-folder-panel .pl-row__title,
.pl-has-folder-panel .pl-row__meta {
    white-space: normal;
}

.pl-has-folder-panel .pl-row__chips {
    gap: 3px;
}

.pl-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--pl-row-color);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.pl-row:hover {
    background: var(--c-hover);
    border-color: var(--c-border-strong, var(--c-border));
}

.pl-row--active {
    border-color: var(--c-accent, #4c8bf5);
    background: rgba(76, 139, 245, 0.08);
    outline: 3px solid var(--c-accent, #4c8bf5);
    outline-offset: -3px;
}

.pl-row--selected {
    background: rgba(76, 139, 245, 0.13);
    box-shadow: inset 0 0 0 2px rgba(76, 139, 245, 0.45);
}

.pl-row--active.pl-row--selected {
    background: rgba(76, 139, 245, 0.18);
    outline-width: 4px;
}

.pl-row--color-red    { --pl-row-color: #e54545; }
.pl-row--color-orange { --pl-row-color: #f39c45; }
.pl-row--color-yellow { --pl-row-color: #d6a800; }
.pl-row--color-green  { --pl-row-color: #4cb377; }
.pl-row--color-blue   { --pl-row-color: #4c8bf5; }
.pl-row--color-purple { --pl-row-color: #9b6ade; }
.pl-row--color-gray   { --pl-row-color: #8a8d92; }

.pl-row--placeholder {
    grid-template-columns: 1fr;
    cursor: default;
}

.pl-rows--previews {
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: #d7e0ec;
    border: 1px solid #bdc9da;
    border-radius: var(--radius-md);
}

.pl-feed-maximized .pl-rows--previews {
    border: 0;
    border-radius: 0;
    padding: var(--sp-5) var(--sp-4);
    background: #d7e0ec;
}

.pl-row--preview {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.pl-has-folder-panel .pl-row--preview {
    display: block;
    padding: 0;
}

.pl-row--preview .pl-row__select--preview {
    position: absolute;
    top: var(--sp-3);
    left: max(var(--sp-3), calc(50% - 390px));
    z-index: 3;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.pl-feed-maximized .pl-row--preview .pl-row__select--preview {
    display: none;
}

.pl-row-preview-card {
    min-width: 0;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    border-left: 5px solid var(--pl-row-color);
    border-radius: var(--radius-lg);
}

.pl-row-preview-card .fp-card {
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.pl-row-preview-card .fp-body {
    white-space: pre-wrap;
}

/* ============================================================
   FB-style media grid (shared markup with composer's pc-mediagrid)
   Required because posts-library page does not load posts-compose.css
   ============================================================ */
.pc-mediagrid {
    display: grid;
    gap: 3px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--c-border);
    margin: 0 var(--sp-3) var(--sp-3);
}

.pc-mediagrid__cell {
    position: relative;
    background: var(--c-bg);
    overflow: hidden;
    min-height: 0;
}

.pc-mediagrid__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-mediagrid__more {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-mediagrid__video-label,
.pc-mediagrid__label {
    position: absolute;
    inset: auto 8px 8px 8px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: var(--fs-xs);
    padding: 3px 8px;
    border-radius: 999px;
    width: fit-content;
}

.pc-mediagrid--1 { grid-template-columns: 1fr; }
.pc-mediagrid--1 .pc-mediagrid__cell { aspect-ratio: 16 / 9; }
.pc-mediagrid--1-portrait { max-width: 65%; margin-left: auto; margin-right: auto; }
.pc-mediagrid--1-portrait .pc-mediagrid__cell { aspect-ratio: 4 / 5; }

.pc-mediagrid--2 { grid-template-columns: 1fr 1fr; }
.pc-mediagrid--2 .pc-mediagrid__cell { aspect-ratio: 1 / 1; }

.pc-mediagrid--3-hero-left {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "a b" "a c";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--3-hero-left .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--3-hero-left .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--3-hero-left .pc-mediagrid__cell--3 { grid-area: c; }

.pc-mediagrid--4-hero-left {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "a b" "a c" "a d";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--4-hero-left .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--4-hero-left .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--4-hero-left .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--4-hero-left .pc-mediagrid__cell--4 { grid-area: d; }

.pc-mediagrid--5-mosaic {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas: "a b c" "a d e";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--5-mosaic .pc-mediagrid__cell--5 { grid-area: e; }

.pc-mediagrid--many-two-top {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a a a b b b" "c c d d e e";
    aspect-ratio: 4 / 3;
}
.pc-mediagrid--many-two-top .pc-mediagrid__cell--1 { grid-area: a; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--2 { grid-area: b; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--3 { grid-area: c; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--4 { grid-area: d; }
.pc-mediagrid--many-two-top .pc-mediagrid__cell--5 { grid-area: e; }

.pl-row-preview-card .pc-mediagrid {
    margin: var(--sp-2) 0 var(--sp-2);
    border-radius: 0;
}

.pl-row--preview::before {
    display: none;
}

.pl-row--preview:hover {
    background: transparent;
    border-color: transparent;
}

.pl-row--preview.pl-row--active,
.pl-row--preview.pl-row--selected,
.pl-row--preview.pl-row--active.pl-row--selected {
    background: transparent;
    outline: 0;
    box-shadow: none;
}

.pl-row--preview.pl-row--active .fp-card {
    box-shadow: 0 0 0 3px rgba(76, 139, 245, 0.4), 0 12px 32px rgba(15, 23, 42, 0.14);
}

.pl-row--preview.pl-row--selected .fp-card {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.18), 0 12px 32px rgba(15, 23, 42, 0.14);
}

.pl-row--preview.pl-row--active.pl-row--selected .fp-card {
    box-shadow: 0 0 0 4px rgba(76, 139, 245, 0.5), 0 12px 32px rgba(15, 23, 42, 0.16);
}

.pl-row__placeholder-message {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-align: center;
    padding: var(--sp-6) var(--sp-3);
    font-style: italic;
}

.pl-row__placeholder-message code {
    font-family: var(--ff-mono);
    font-size: 0.875em;
    background: var(--c-surface);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

.pl-row__color-stripe {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--c-border);
}

.pl-row__select {
    cursor: pointer;
    padding-top: 4px;
}

.pl-row__topline {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-2);
    min-width: 0;
}

.pl-row__title-wrap {
    min-width: 0;
}

.pl-row__media {
    width: 100%;
    min-width: 0;
    height: 96px;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    position: relative;
}

.pl-row__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pl-row__media figcaption {
    display: none;
}

.pl-row__media-count {
    position: absolute;
    top: 6px;
    right: 6px;
    left: auto;
    bottom: auto;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

.pl-detail-media-count {
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.74);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

.pl-row__media--empty {
    display: grid;
    place-items: center;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: center;
    padding: var(--sp-1);
}

.pl-row__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding-top: 0;
}

.pl-row__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.3;
}

.pl-row__meta {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.pl-row__badges {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.pl-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.pl-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.pl-chip--interactive {
    cursor: pointer;
    font-family: inherit;
}

.pl-chip--interactive:hover,
.pl-chip--interactive:focus {
    border-color: var(--c-accent, #4c8bf5);
    box-shadow: 0 0 0 2px rgba(76, 139, 245, 0.14);
    outline: none;
}

.pl-chip--rating {
    background: color-mix(in srgb, var(--amber-400, #fbbf24) 22%, var(--c-surface));
    border-color: color-mix(in srgb, var(--amber-500, #f59e0b) 50%, var(--c-border));
    color: var(--amber-600, #d97706);
    font-weight: 700;
}

/* Pagination */
.pl-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    margin-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}

.pl-pagination__page {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    min-width: 100px;
    text-align: center;
}

/* ============================================================
   Detail pane (right)
   ============================================================ */
.pl-detail {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pl-detail__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}

.pl-detail__head [data-pl-detail-toggle] {
    margin-left: auto;
}

.pl-detail-collapsed .pl-detail {
    padding: var(--sp-2) var(--sp-1);
}

.pl-detail-collapsed .pl-detail__head {
    align-items: center;
    justify-content: center;
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pl-detail-collapsed .pl-detail__head .pl-pane-title {
    display: none;
}

.pl-detail-collapsed .pl-detail__head [data-pl-detail-toggle] {
    margin-left: 0;
    width: 44px;
    height: 30px;
    padding: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.pl-detail-collapsed .pl-detail__body,
.pl-detail-collapsed .pl-detail__close {
    display: none;
}

.pl-detail__close {
    background: none;
    border: 0;
    color: var(--c-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.pl-detail__close:hover {
    background: var(--c-hover);
    color: var(--c-text);
}

.pl-detail__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--sp-1);
}

.pl-detail__empty {
    padding: var(--sp-4) var(--sp-2);
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.pl-detail__empty p {
    margin: 0 0 var(--sp-3);
}

.pl-detail-section {
    border-top: 1px solid var(--c-border);
    padding-top: var(--sp-3);
}

.pl-detail-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.pl-detail-section--live-preview {
    border-top: 0;
    padding-top: 0;
}

.pl-detail-section__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
}

.pl-live-preview {
    background: #d5deeb;
    border: 1px solid #b7c5d8;
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.pl-live-preview .fp-card {
    max-width: 100%;
    margin: 0;
}

.pl-live-preview .fp-footer__actions {
    gap: var(--sp-2);
}

.pl-live-preview .fp-footer {
    flex-wrap: wrap;
}

.pl-live-preview .fp-body {
    white-space: pre-wrap;
}

.pl-live-preview__avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary, #2563eb);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.pl-edit-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.pl-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}

.pl-edit-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
}

.pl-edit-body-field {
    min-height: 96px;
}

.pl-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
}

.pl-edit-status {
    margin-right: auto;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}

.pl-chip--star {
    background: color-mix(in srgb, var(--amber-400, #fbbf24) 22%, var(--c-surface));
    border-color: color-mix(in srgb, var(--amber-500, #f59e0b) 50%, var(--c-border));
    color: var(--amber-600, #d97706);
    font-weight: 700;
}

.pl-chip--feed {
    background: color-mix(in srgb, var(--blue-500, #355f96) 10%, var(--c-surface));
    border-color: color-mix(in srgb, var(--blue-500, #355f96) 34%, var(--c-border));
    color: var(--blue-700, #2a4c78);
    font-weight: 600;
}

.pl-chip--status {
    font-weight: 700;
}

.pl-chip--status-published {
    background: color-mix(in srgb, var(--green-500, #22c55e) 14%, var(--c-surface));
    border-color: color-mix(in srgb, var(--green-500, #22c55e) 36%, var(--c-border));
    color: var(--green-600, #16a34a);
}

.pl-chip--status-pending,
.pl-chip--status-approved {
    background: color-mix(in srgb, var(--amber-400, #fbbf24) 14%, var(--c-surface));
    border-color: color-mix(in srgb, var(--amber-500, #f59e0b) 34%, var(--c-border));
    color: var(--amber-600, #d97706);
}

.pl-chip--status-hidden,
.pl-chip--status-draft,
.pl-chip--status-removed,
.pl-chip--status-rejected {
    background: color-mix(in srgb, var(--slate-500, #64748b) 10%, var(--c-surface));
    border-color: color-mix(in srgb, var(--slate-500, #64748b) 28%, var(--c-border));
    color: var(--c-text-muted);
}

.pl-detail-summary {
    margin: 0;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
}

.pl-detail-summary dt {
    color: var(--c-text-muted);
    font-weight: 500;
}

.pl-detail-summary dd {
    margin: 0;
    color: var(--c-text);
    overflow-wrap: anywhere;
}

.pl-detail-tags,
.pl-detail-site-projection,
.pl-detail-audit {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.pl-detail-tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.pl-detail-tags .pl-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.pl-detail-rating,
.pl-detail-label__meta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.pl-detail-rating__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.pl-detail-label__meta {
    margin-top: var(--sp-3);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}

.pl-rating-picker {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.pl-rating-star {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.pl-rating-star:hover,
.pl-rating-star:focus,
.pl-rating-star.is-filled,
.pl-rating-star.is-preview {
    border-color: color-mix(in srgb, var(--amber-500, #f59e0b) 50%, var(--c-border));
    background: color-mix(in srgb, var(--amber-400, #fbbf24) 18%, var(--c-surface));
    color: var(--amber-600, #d97706);
    outline: none;
}

.pl-rating-star.is-current {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
}

.pl-chip__remove {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    padding: 0 0 0 var(--sp-1);
}

.pl-chip__remove:hover,
.pl-chip__remove:focus {
    color: var(--c-danger, #c92a2a);
}

.pl-detail-tag-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2);
    align-items: center;
}

.pl-feed-section-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-2);
}

.pl-feed-section-source {
    grid-column: 1 / -1;
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pl-feed-section-option {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    cursor: pointer;
}

.pl-feed-section-option:hover {
    border-color: var(--c-border-strong, var(--c-border));
    background: var(--c-hover);
}

.pl-feed-section-option span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pl-feed-section-option small {
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
}

.pl-feed-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.pl-detail-moderation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* ============================================================
   Customer visibility diagnostics (detail pane)
   ============================================================ */
.pl-visibility {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.pl-visibility__verdict {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.pl-visibility__pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
}

.pl-visibility__pill--visible {
    background: color-mix(in srgb, var(--c-success, #10b981) 18%, transparent);
    border-color: color-mix(in srgb, var(--c-success, #10b981) 40%, transparent);
    color: var(--c-success-strong, #047857);
}

.pl-visibility__pill--hidden {
    background: color-mix(in srgb, var(--c-text-muted) 12%, transparent);
    color: var(--c-text);
}

.pl-visibility__pill--pending {
    background: color-mix(in srgb, var(--c-warning, #f59e0b) 18%, transparent);
    border-color: color-mix(in srgb, var(--c-warning, #f59e0b) 40%, transparent);
    color: var(--c-warning-strong, #b45309);
}

.pl-visibility__pill--error {
    background: color-mix(in srgb, var(--c-danger, #ef4444) 18%, transparent);
    border-color: color-mix(in srgb, var(--c-danger, #ef4444) 40%, transparent);
    color: var(--c-danger-strong, #b91c1c);
}

.pl-visibility__reason {
    font-size: var(--fs-sm);
    color: var(--c-text);
}

.pl-visibility__grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--sp-1) var(--sp-3);
    margin: 0;
    font-size: var(--fs-xs);
}

.pl-visibility__grid dt {
    color: var(--c-text-muted);
    font-weight: 500;
}

.pl-visibility__grid dd {
    margin: 0;
    color: var(--c-text);
    overflow-wrap: anywhere;
}

.pl-visibility__sites-title {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pl-visibility__sites {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.pl-visibility__site {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    font-size: var(--fs-xs);
}

.pl-visibility__site--empty {
    border-style: dashed;
    color: var(--c-text-muted);
    justify-content: center;
}

.pl-visibility__site-id {
    font-family: var(--ff-mono);
    color: var(--c-text);
}

.pl-visibility__site-pill {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pl-visibility__site-pill--eligible {
    background: color-mix(in srgb, var(--c-success, #10b981) 18%, transparent);
    color: var(--c-success-strong, #047857);
}

.pl-visibility__site-pill--blocked {
    background: color-mix(in srgb, var(--c-danger, #ef4444) 18%, transparent);
    color: var(--c-danger-strong, #b91c1c);
}

.pl-visibility__site-time {
    margin-left: auto;
    color: var(--c-text-muted);
    font-family: var(--ff-mono);
}

/* ============================================================
   Modals (Tag Manager / Folder Manager / Bulk Action)
   ============================================================ */
.pl-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.pl-modal[hidden] {
    display: none;
}

.pl-modal__panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    width: min(640px, 100%);
    max-height: calc(100vh - var(--sp-8, 64px));
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.pl-modal__head,
.pl-modal__foot {
    display: flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.pl-modal__foot {
    border-bottom: 0;
    border-top: 1px solid var(--c-border);
    justify-content: flex-end;
    gap: var(--sp-2);
}

.pl-modal__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
}

.pl-modal__close {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--c-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.pl-modal__close:hover {
    background: var(--c-hover);
    color: var(--c-text);
}

.pl-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.pl-modal__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.pl-modal__tag-list,
.pl-modal__folder-tree {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg, var(--c-surface));
    max-height: 240px;
    overflow-y: auto;
}

.pl-bulk-modal-pane {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.pl-bulk-modal-pane[hidden] {
    display: none;
}

.pl-row-popover {
    position: fixed;
    z-index: 70;
    width: min(280px, calc(100vw - 24px));
    padding: var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.pl-row-popover[hidden] {
    display: none;
}

.pl-row-popover__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-text);
}

.pl-row-popover__menu {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.pl-row-popover__menu button {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    padding: var(--sp-2);
    text-align: left;
}

.pl-row-popover__menu button:hover,
.pl-row-popover__menu button:focus {
    background: var(--c-hover);
    border-color: var(--c-border);
    outline: none;
}

.pl-feed-option-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.pl-feed-option {
    display: grid;
    gap: 2px;
    padding: var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-bg);
}

.pl-feed-option.is-active {
    border-color: var(--c-accent, #4c8bf5);
    box-shadow: 0 0 0 2px rgba(76, 139, 245, 0.12);
}

.pl-bulk-modal-pane .pl-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-weight: 600;
}

.pl-check--bulk {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-muted, rgba(15, 23, 42, 0.03));
}

.pl-bulk-modal__preflight {
    border-top: 1px solid var(--c-border);
    padding-top: var(--sp-3);
    margin-top: var(--sp-2);
}

.pl-bulk-modal__preflight-skips {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* ============================================================
   Toast region (bulk-action summary feedback)
   ============================================================ */
.pl-toast-region {
    position: fixed;
    bottom: var(--sp-4);
    right: var(--sp-4);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
}

.pl-toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 420px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent, #4c8bf5);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: var(--fs-sm);
    color: var(--c-text);
}

.pl-toast--success { border-left-color: #4cb377; }
.pl-toast--warning { border-left-color: #f39c45; }
.pl-toast--error   { border-left-color: #e54545; }

.pl-toast__title {
    font-weight: 600;
    margin: 0 0 var(--sp-1);
}

.pl-toast__breakdown {
    margin: var(--sp-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}