/**
 * Profile Sync Directory — front-end styles.
 * Loaded on any page that renders the [profile_sync_directory] shortcode.
 * Kept minimal and theme-agnostic: inherits font + colour from the host theme.
 */
.ps-directory { max-width: 100%; margin: 1em 0; }
.ps-directory-gate { padding: 1em; background: #f6f7f7; border-left: 4px solid #2271b1; border-radius: 3px; }

/* 3.5.5: explicit styling for content INSIDE the gate containers — the
 * tag-gating "access denied" message on a directory, the selector's
 * default-message message, and per-rule message rules. All three use
 * wp_editor on the admin side so admins type bold/italic/links and see
 * them rendered in the editor. On the front-end the HTML round-trips
 * through wp_kses_post() (which keeps the markup intact) — but most
 * themes only style anchor links inside content scopes like
 * .entry-content, so arbitrary <a> tags in our gate <div> rendered as
 * black undecorated text. Anchor rules below match the same blue family
 * used by the directory's in-cell text links (3.5.2). Paragraph spacing
 * is normalised here too so wp_editor's <p> tags don't get crushed by
 * theme margins. */
.ps-directory-gate p,
.ps-directory-gate--rule-message p {
    margin: 0 0 0.8em 0;
    line-height: 1.5;
}
.ps-directory-gate p:last-child,
.ps-directory-gate--rule-message p:last-child {
    margin-bottom: 0;
}
/* 3.5.7: bump anchor selector specificity to beat common theme rules
 * like `.entry-content p a { color: ... }` (specificity 0,1,2). The
 * [href] attribute + :link/:visited pseudo-class stack brings us to
 * 0,3,1 = 31 — high enough that any non-!important theme rule loses,
 * without us having to reach for !important ourselves (which would make
 * future admin overrides harder). Also covers the :visited path so links
 * the viewer has already clicked don't fall back to the theme's purple. */
.ps-directory-gate a[href]:link,
.ps-directory-gate a[href]:visited,
.ps-directory-gate--rule-message a[href]:link,
.ps-directory-gate--rule-message a[href]:visited {
    color: #2271b1;
    text-decoration: none;
    border-bottom: 1px dotted #c3d4e5;
}
.ps-directory-gate a[href]:hover,
.ps-directory-gate a[href]:focus,
.ps-directory-gate--rule-message a[href]:hover,
.ps-directory-gate--rule-message a[href]:focus {
    color: #135e96;
    border-bottom: 1px solid #135e96;
}
/* Bold / italic / strikethrough — also commonly stripped by aggressive
 * theme resets when they appear outside .entry-content. Reassert them
 * here so what the admin sees in the editor matches the front-end. */
.ps-directory-gate strong,
.ps-directory-gate b,
.ps-directory-gate--rule-message strong,
.ps-directory-gate--rule-message b { font-weight: 700; }
.ps-directory-gate em,
.ps-directory-gate i,
.ps-directory-gate--rule-message em,
.ps-directory-gate--rule-message i { font-style: italic; }
.ps-directory-gate del,
.ps-directory-gate s,
.ps-directory-gate--rule-message del,
.ps-directory-gate--rule-message s { text-decoration: line-through; }
.ps-directory-gate u,
.ps-directory-gate--rule-message u { text-decoration: underline; }
.ps-directory-gate ul,
.ps-directory-gate ol,
.ps-directory-gate--rule-message ul,
.ps-directory-gate--rule-message ol {
    margin: 0 0 0.8em 1.4em;
    padding: 0;
}
.ps-directory-gate li,
.ps-directory-gate--rule-message li { margin: 0 0 4px 0; }
.ps-directory-notice { color: #646970; font-style: italic; }
.ps-directory-table-wrap { margin-bottom: 2em; }
.ps-directory-shared-search { margin-bottom: 14px; }

.ps-directory-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.ps-directory-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 320px;
}
.ps-directory-search {
    width: 100%;
    padding: 6px 52px 6px 10px;  /* right pad leaves room for × + ? */
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
}
.ps-directory-search-clear,
.ps-directory-search-help {
    position: absolute;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #646970;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
}
.ps-directory-search-clear { right: 26px; }
.ps-directory-search-help  { right: 4px; }
.ps-directory-search-clear:hover,
.ps-directory-search-help:hover { color: #2271b1; }
.ps-directory-count { color: #646970; font-size: 13px; }

.ps-directory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ps-directory-table thead th {
    text-align: left;
    padding: 8px 10px;
    background: #f6f7f7;
    border-bottom: 2px solid #dcdcde;
    font-weight: 600;
    cursor: default;
    user-select: none;
}
.ps-directory-table th.ps-sortable { cursor: pointer; }
.ps-directory-table th.ps-sortable::after { content: ' ↕'; color: #b0b0b0; font-size: 11px; }
.ps-directory-table th.ps-sorted-asc::after  { content: ' ↑'; color: #2271b1; }
.ps-directory-table th.ps-sorted-desc::after { content: ' ↓'; color: #2271b1; }
.ps-directory-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f1;
    vertical-align: top;
}
.ps-directory-table tbody tr:hover { background: #fafafa; }
/* Row visibility: search hides (ps-filtered-out), pagination hides
 * (ps-pageout). Either is enough to suppress the row. The old
 * .ps-hidden class is kept as a courtesy in case any third-party CSS
 * references it. */
.ps-directory-table tr.ps-hidden,
.ps-directory-table tr.ps-filtered-out,
.ps-directory-table tr.ps-pageout { display: none; }

/* Pagination */
.ps-directory-pagination {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 0;
    font-size: 13px;
}
.ps-directory-pagination button {
    background: #fff;
    border: 1px solid #c3c4c7;
    color: #2c3338;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.ps-directory-pagination button:hover:not(:disabled) { background: #f6f7f7; color: #1d2327; }
.ps-directory-pagination button:disabled { opacity: 0.4; cursor: default; }
.ps-directory-pagination .ps-pg-status { margin: 0 8px; color: #50575e; }
.ps-directory-pagination.ps-pg-single { display: none; }

/* Search guide modal reuses the popup overlay — just extra type rules. */
.ps-directory-search-guide dl { margin: 10px 0; }
.ps-directory-search-guide dt { font-family: ui-monospace, Menlo, Consolas, monospace; background: #f6f7f7; padding: 2px 6px; border-radius: 3px; display: inline-block; margin-top: 10px; }
.ps-directory-search-guide dd { margin: 4px 0 0 0; color: #50575e; }
.ps-directory-search-guide code { background: #f6f7f7; padding: 1px 4px; border-radius: 2px; }
.ps-directory-search-guide h4 { margin-top: 16px; }
.ps-search-alias-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 6px 0;
}
.ps-search-alias-list li { display: inline-block; }
.ps-search-alias-list code {
    display: inline-block;
    background: #f6f7f7;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 13px;
}
.ps-search-rank-list {
    margin: 6px 0 6px 20px;
    padding-left: 0;
}
.ps-search-rank-list li {
    font-size: 13px;
    color: #50575e;
    margin-bottom: 2px;
}

/* 3.5.4: The Message icon (users table) and the Organisation link icon
 * (orgs table) use the same WP-admin blue as the in-cell text links so
 * it's obvious at a glance that they're interactive.
 *
 * The SVGs are emitted with `stroke="currentColor"` which IN THEORY
 * inherits the parent's `color` value. In practice many host themes ship
 * CSS like `table svg { stroke: #000 }` or `.entry-content svg { color:
 * inherit }` that beats the cascade or resolves currentColor against an
 * unexpected ancestor, leaving the icons stuck on black regardless of
 * what we set on the wrapper. Fixed in 3.5.4 by setting `stroke` (and
 * `fill` as belt-and-braces) on the SVG itself with a specific selector
 * — themes can no longer take a shot at it. !important is intentionally
 * avoided; the selector specificity (`.ps-directory-table .ps-directory-
 * message-link svg`) is high enough on its own. */
.ps-directory-message-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #2271b1;
    text-decoration: none;
    transition: color 120ms ease-in-out, background-color 120ms ease-in-out;
}
.ps-directory-table .ps-directory-message-link svg,
.ps-directory-message-link svg {
    color: #2271b1;
    stroke: #2271b1;
    fill: none;
    transition: stroke 120ms ease-in-out;
}
.ps-directory-message-link:hover,
.ps-directory-message-link:focus {
    color: #135e96;
    background: #e7f5fa;
    outline: none;
}
.ps-directory-table .ps-directory-message-link:hover svg,
.ps-directory-table .ps-directory-message-link:focus svg,
.ps-directory-message-link:hover svg,
.ps-directory-message-link:focus svg {
    color: #135e96;
    stroke: #135e96;
}
.ps-directory-message-link:focus-visible {
    /* Visible keyboard-focus ring — accessibility, doesn't show on
     * mouse-only focus. */
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.35);
}

/* Icon-only columns (Message for users, Organisation link for orgs)
 * shouldn't take equal width with the data columns. The width:1% +
 * white-space:nowrap combo forces the browser to shrink-wrap them to
 * their content while the other columns absorb the remaining width. */
.ps-directory-table th.ps-col-message,
.ps-directory-table td.ps-col-message {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Search-score column — narrow numeric column, clickable when populated. */
.ps-directory-table th.ps-col-score,
.ps-directory-table td.ps-col-score {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #646970;
}
.ps-directory-table td.ps-col-score.ps-has-score {
    color: #2271b1;
    cursor: pointer;
    font-weight: 600;
}
.ps-directory-table td.ps-col-score.ps-has-score:hover { text-decoration: underline; }

/* Match-details popup — table showing per-token breakdown. */
.ps-directory-score-details .ps-score-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 8px 0;
}
.ps-directory-score-details .ps-score-details-table th,
.ps-directory-score-details .ps-score-details-table td {
    border: 1px solid #dcdcde;
    padding: 4px 8px;
    text-align: left;
}
.ps-directory-score-details .ps-score-details-table thead th {
    background: #f6f7f7;
    font-weight: 600;
}
.ps-directory-score-details .ps-score-details-table code {
    background: transparent;
    padding: 0;
    font-size: 12px;
}
.ps-directory-score-details tr.ps-score-match-row { cursor: default; }
.ps-directory-score-details tr.ps-score-match-row:hover td {
    background: #fff8e1;
}
.ps-directory-score-details .ps-score-occ {
    color: #646970;
    font-size: 11px;
    margin-left: 2px;
}

/* Shared sample-preview pane at the bottom of the match-details popup.
 * Updated on hover of any match row with a small excerpt + highlighted
 * token so the admin can see WHY the row matched. */
.ps-score-sample-preview {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    min-height: 34px;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}
.ps-score-sample-hint  { color: #646970; font-style: italic; }
.ps-score-sample-field { color: #50575e; margin-right: 6px; }
.ps-score-sample-body mark {
    background: #fff2a8;
    padding: 0 2px;
    border-radius: 2px;
}

/* Footer hint at the bottom of the score-details popup — used to be
 * a regular paragraph but felt too prominent; shrunk so it sits
 * quietly beneath the actionable content. */
.ps-score-footer-hint {
    font-size: 10.5px;
    color: #8c8f94;
    line-height: 1.4;
    margin: 10px 0 0;
}
.ps-score-footer-hint code { font-size: 10.5px; }

/* "Show all samples" log — secondary popup with every instance
 * expanded inline so the admin can skim matches without hovering. */
.ps-directory-score-log .ps-directory-popup-inner {
    max-width: 720px;
}
.ps-score-log-list {
    list-style: decimal;
    padding-left: 24px;
    margin: 8px 0;
    max-height: 60vh;
    overflow-y: auto;
}
.ps-score-log-list li {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f1;
}
.ps-score-log-total { margin: 4px 0 10px; font-size: 13px; color: #50575e; }
.ps-score-log-header { margin-bottom: 3px; font-size: 13px; }
.ps-score-log-meta  { color: #646970; font-size: 12px; margin-left: 4px; }
.ps-score-log-sample {
    background: #f6f7f7;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}
.ps-score-log-sample mark {
    background: #fff2a8;
    padding: 0 2px;
    border-radius: 2px;
}

.ps-directory-org-popup-trigger,
.ps-directory-org-popup-trigger:hover,
.ps-directory-org-popup-trigger:focus,
.ps-directory-org-popup-trigger:active {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    /* 3.5.2: dotted underline at rest, solid on hover/focus — matches
     * the new in-cell anchor styling below + the membership FCRM/mailto
     * link family. Removes the older flat text-decoration: underline. */
    text-decoration: none;
    border-bottom: 1px dotted #c3d4e5;
}
.ps-directory-org-popup-trigger {
    color: #2271b1;
}
.ps-directory-org-popup-trigger:hover,
.ps-directory-org-popup-trigger:focus {
    color: #135e96;
    border-bottom: 1px solid #135e96;
}

/* 3.5.2: explicit anchor styling for in-cell links inside directory
 * tables (primary-name links, render-as-url columns, mailto email
 * columns). Previously these inherited from the theme's `a` colour which
 * gave inconsistent appearance across sites / page templates / themes.
 * Now they get the same WP-admin blue with a dotted underline at rest
 * and solid on hover — same visual family as the membership shortcodes'
 * FCRM-contact links (3.3.0) and mailto links (3.3.1).
 *
 * `:not(.ps-directory-message-link)` excludes the circular icon buttons
 * (Message column for users, Organisation link column for orgs) which
 * keep their own pill-on-hover styling.
 *
 * 3.5.7: bumped specificity ([href] + :link/:visited) to beat themes
 * with content-scoped anchor rules like `.entry-content p a`. */
.ps-directory-table td a[href]:not(.ps-directory-message-link):link,
.ps-directory-table td a[href]:not(.ps-directory-message-link):visited {
    color: #2271b1;
    text-decoration: none;
    border-bottom: 1px dotted #c3d4e5;
}
.ps-directory-table td a[href]:not(.ps-directory-message-link):hover,
.ps-directory-table td a[href]:not(.ps-directory-message-link):focus {
    color: #135e96;
    border-bottom: 1px solid #135e96;
}

/* Org fallback popup */
.ps-directory-popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}
.ps-directory-popup-inner {
    background: #fff;
    border-radius: 6px;
    padding: 20px 24px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.ps-directory-popup-inner h3 { margin-top: 0; }
.ps-directory-popup-inner dl { margin: 0; }
.ps-directory-popup-inner dt { font-weight: 600; margin-top: 8px; color: #50575e; font-size: 13px; }
.ps-directory-popup-inner dd { margin: 2px 0 0 0; }
.ps-directory-popup-close {
    float: right;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #646970;
    line-height: 1;
}

/* ─── Score-log hover preview (3.4.2) ───
 * Floats a wider context window over the hovered match-details row so the
 * admin can judge match quality without leaving the popup. position:fixed
 * + high z-index (above the popup overlay) + pointer-events:none so the
 * tip never intercepts mouseleave from the hovered <li>. */
.ps-directory-hover-tip {
    position: fixed;
    z-index: 200000;
    background: #ffffff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 12px 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    max-width: 560px;
    max-height: 360px;
    overflow: auto;
    font-size: 13px;
    line-height: 1.55;
    color: #1f2937;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ps-directory-hover-tip mark {
    background: #fef3c7;
    color: #92400e;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* Subtle "hover for more" hint in each row, fading in on hover so it
 * doesn't add visual clutter at rest. */
.ps-score-log-list li {
    position: relative;
    cursor: default;
}
.ps-score-log-hover-hint {
    margin-left: 8px;
    font-size: 11px;
    color: #9ca3af;
    opacity: 0;
    transition: opacity 120ms ease-in-out;
    font-style: italic;
}
.ps-score-log-list li:hover .ps-score-log-hover-hint {
    opacity: 1;
}
/* Slight background tint on hover so the row whose preview is showing is
 * visually obvious — useful when scanning rapidly. */
.ps-score-log-list li:hover {
    background: #f9fafb;
    border-radius: 4px;
}

/* ───────── 3.5.1 — Headings + header sizing + mobile responsive ─────────
 *
 * 1. Per-table heading (.ps-directory-table-heading) renders above each
 *    directory table. Default labels: "Members" / "Organisations". Admin
 *    can override per directory via the users_table.heading and
 *    orgs_table.heading config keys.
 *
 * 2. Column headers prioritise their own width over content-driven sizing:
 *    `white-space: nowrap` on the <th> means each column is at minimum
 *    as wide as its label, biasing the table layout to fit headers
 *    cleanly. Cells underneath still wrap their content as needed.
 *
 * 3. On screens ≤ 640px every directory table flips to a card layout
 *    (same approach as the membership shortcodes' responsive treatment):
 *    headers hide, each row becomes a bordered card, every cell renders
 *    its column label above its value via the data-label attribute added
 *    to all <td>s in the renderer.
 */

.ps-directory-table-heading {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2937;
}

/* Header text doesn't wrap — column gets the natural width of its label
 * as a minimum. Combined with vertical padding so multi-word labels
 * read comfortably. */
.ps-directory-table th {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

/* Don't apply nowrap to the cells — cells still wrap their content. */
.ps-directory-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile ≤ 640px: card layout */
@media (max-width: 640px) {
    .ps-directory-table-heading {
        font-size: 16px;
    }
    .ps-directory-table-wrap {
        margin-bottom: 18px;
    }
    .ps-directory-controls {
        flex-wrap: wrap;
        gap: 6px;
    }
    .ps-directory-search {
        width: 100%;
        font-size: 16px;     /* suppress iOS zoom-on-focus */
        padding: 10px 12px;
    }
    /* Card-ify the table itself. */
    .ps-directory-table {
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .ps-directory-table thead { display: none; }
    .ps-directory-table,
    .ps-directory-table tbody,
    .ps-directory-table tr,
    .ps-directory-table td {
        display: block;
        width: 100%;
    }
    .ps-directory-table tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .ps-directory-table tr:last-child { margin-bottom: 0; }
    .ps-directory-table td {
        border: none;
        padding: 6px 0;
        text-align: left;
    }
    /* Column label sits above the value as a small uppercase heading. */
    .ps-directory-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6b7280;
        margin-bottom: 2px;
    }
    /* Empty score cell pre-search shouldn't render its label as a stray
     * header on its own — collapse to nothing until a score is present. */
    .ps-directory-table td.ps-col-score:not(.ps-has-score) {
        display: none;
    }
    /* Message and link icon cells need their label too, but the icon
     * itself should sit comfortably (not stretched). */
    .ps-directory-table td.ps-col-message {
        padding: 6px 0;
    }
    .ps-directory-table td.ps-col-message .ps-directory-message-link {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 4px 8px;
    }
    /* Pagination tap-target up-size. */
    .ps-directory-pagination a,
    .ps-directory-pagination .ps-directory-pagination-current {
        min-height: 36px;
        min-width: 36px;
        padding: 8px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Very narrow phones — tighten card padding a touch more. */
@media (max-width: 380px) {
    .ps-directory-table tr {
        padding: 10px 12px;
    }
}

/* ─── 3.10.0: Page Content frontend renderer ──────────────────────── */
.ps-page-content { display: block; }
.ps-page-content-text { margin: 0 0 14px; }
.ps-page-content-shortcode { margin: 0 0 14px; }
.ps-page-content-directory,
.ps-page-content-selector { margin: 0 0 14px; }
.ps-page-content-columns {
    display: flex;
    gap: 16px;
    margin: 0 0 14px;
    align-items: stretch;
    flex-wrap: wrap;
}
.ps-page-content-column { flex: 1; min-width: 0; }
@media (max-width: 720px) {
    .ps-page-content-columns { flex-direction: column; }
    .ps-page-content-column { flex: 1 1 auto; }
}