/* Round 14 — public-directory styles (judges / clubs / events index + show).
   Scoped under .pd-* prefix so it can coexist with the auth-gated app's
   .es-*, .jp-*, .cp-*, etc. class trees without cross-talk.

   Palette borrowed from Round 9 Saved system + Round 47 landing for visual
   continuity. Anonymous users should feel like they're on the same site —
   not on a sterile "marketing" subdomain.
*/

:root {
    --pd-brand: var(--brand);
    --pd-brand-vivid: var(--brand-vivid);
    --pd-brand-soft: var(--brand-soft);
    --pd-ink: var(--ink);
    --pd-ink-light: var(--ink-muted);
    --pd-line: #e2e8f0;
    --pd-bg-tint: #faf5ff;
    --pd-bg: #ffffff;
    --pd-gold: var(--gold);
    --pd-favorite: #047857;
    --pd-warn: #b45309;
    --pd-danger: var(--danger);
}

/* ===== Skip link (was already part of landing.css; re-spec for safety) ===== */
.skip-link {
    position: absolute;
    top: -48px;
    left: 8px;
    background: var(--pd-brand);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 0 0 0 3px var(--pd-gold);
    z-index: 1100;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 12px;
}

/* ===== Page hero ===== */
.pd-page-hero {
    background: var(--pd-bg-tint);
    padding: 56px 24px 40px;
    text-align: center;
    border-bottom: 1px solid var(--pd-line);
}
.pd-page-hero h1 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: var(--pd-ink);
    margin: 0 0 12px;
    line-height: 1.15;
}
.pd-page-hero h1 .accent { color: var(--pd-brand); }
.pd-page-hero p {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 17px;
    color: var(--pd-ink-light);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.55;
}
.pd-page-hero .pd-count-pill {
    background: var(--pd-brand-soft);
    color: var(--pd-brand);
    font-size: 11px;
    margin-top: 12px;
}

/* Breadcrumbs: the visible "Home / Judges / ..." nav was removed from every
   public directory page (index + detail). The BreadcrumbList JSON-LD emitted by
   <x-schema.breadcrumbs> stays — it is invisible and still feeds Google's
   breadcrumb rich result. The .pd-profile top padding below absorbs the
   vertical space the nav used to occupy. */

/* ===== Toolbar (search + letter ribbon) ===== */
.pd-toolbar {
    max-width: 1100px;
    margin: 24px auto 16px;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}
.pd-search-form {
    display: flex;
    gap: 8px;
    flex: 1 1 320px;
}
.pd-search-form input[type="search"] {
    flex: 1;
    padding: 11px 14px;
    border: 1.5px solid var(--pd-line);
    border-radius: 8px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    min-height: 44px;
    /* border-box so min-height:44px is the TOTAL height, not 44px content +
       22px padding. Without it, browsers whose UA stylesheet leaves text
       inputs content-box render this ~66px tall — fat, and taller than the
       sibling 44px Search button. Matches how .pagination__link / .pd-paywall-cta
       in this file already pin border-box for the same reason. */
    box-sizing: border-box;
}
.pd-search-form input[type="search"]:focus {
    /* Single-ring focus: border tint + snug halo (the offset outline over
       a recolored border drew a double ring). */
    outline: none;
    border-color: var(--pd-brand);
    box-shadow: 0 0 0 4px rgba(81, 28, 102, 0.22);
}
.pd-search-form button {
    padding: 0 18px;
    border: none;
    background: var(--pd-brand);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
}
.pd-search-form button:hover { background: var(--brand-dark); }

/* Round 89 (WCAG 3.2.2): the events state filter is now a GET form with an
   explicit Submit button (replacing the onchange auto-navigate). Lay the select
   + Go button inline; the button mirrors the .pd-search-form button look and
   keeps the ≥44px tap target the audience needs. */
.pd-state-filter {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pd-state-filter select:focus-visible {
    /* Single-ring focus — same fix as the search input above. */
    outline: none;
    box-shadow: 0 0 0 4px rgba(81, 28, 102, 0.22);
    border-color: var(--pd-brand);
}
.pd-state-go {
    padding: 0 18px;
    border: none;
    background: var(--pd-brand);
    color: #fff;
    border-radius: 8px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    min-height: 44px;
}
.pd-state-go:hover { background: var(--brand-dark); }
.pd-state-go:focus-visible {
    outline: 3px solid var(--pd-brand-vivid);
    outline-offset: 2px;
}

.pd-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pd-letters li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-ink-light);
    text-decoration: none;
    border-radius: 6px;
}
.pd-letters li a:hover,
.pd-letters li a:focus-visible {
    background: var(--pd-brand-soft);
    color: var(--pd-brand);
}
.pd-letters li a.pd-letter-active {
    background: var(--pd-brand);
    color: #fff;
}

/* ===== Cards grid ===== */
.pd-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px 56px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.pd-card {
    background: var(--pd-bg);
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    padding: 18px 20px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-card:hover,
.pd-card:focus-within {
    border-color: var(--pd-brand);
    box-shadow: 0 4px 14px rgba(81, 28, 102, 0.10);
    transform: translateY(-1px);
}
.pd-card h2 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--pd-ink);
    margin: 0;
    line-height: 1.3;
}
.pd-card h2 a {
    color: inherit;
    text-decoration: none;
}
.pd-card h2 a:hover,
.pd-card h2 a:focus-visible {
    color: var(--pd-brand);
    text-decoration: underline;
}
.pd-card .pd-card-meta {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--pd-ink-light);
    line-height: 1.45;
}
.pd-card .pd-card-meta strong { color: var(--pd-ink); }

/* Event card variant — date on the left */
.pd-event-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
}
.pd-event-card .pd-date-block {
    background: var(--pd-brand-soft);
    color: var(--pd-brand);
    text-align: center;
    padding: 12px 14px;
    border-radius: 10px;
    min-width: 72px;
}
.pd-event-card .pd-date-block .day {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pd-event-card .pd-date-block .num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    margin: 2px 0;
}
.pd-event-card .pd-date-block .yr {
    font-size: 12px;
    color: var(--pd-ink-light);
}

/* Round 67 follow-up #2 — event-type pill + event-number reference.
   Pre-fix the event card showed event_name + organizer_name as two stacked
   lines — but AKC names most events after the hosting club, so the two
   strings were usually identical. That + no event-type info made the cards
   read sparse and indistinguishable when one club hosts multiple shows on
   the same day. The pill below the title now communicates "what kind of
   show" (Conformation / Agility / Junior Showmanship / ...) and the
   #event-number ID at the bottom-right gives a clean tracking reference. */
.pd-event-card .pd-event-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;  /* allow text to wrap inside the grid cell */
}
.pd-event-card .pd-event-body h2 {
    margin: 0;  /* override pd-card h2 margin so the gap stacks cleanly */
}
.pd-event-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pd-event-type-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--pd-brand-soft, #ede9fe);
    color: var(--pd-brand, #511c66);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}
/* Round 67 follow-up #6 — Judge + Club list cards with avatar.
   User said the bare-text judge/club cards looked "bland" vs. the colored
   event cards. This variant follows the .pd-event-card pattern: a colored
   block on the left (avatar circle here instead of date) + body on the
   right with title + meta pill. Judge avatars use brand-purple-soft;
   club avatars use sky-soft so the two indexes are visually distinct
   at a glance — same shape language, different palettes. */
.pd-list-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
}
.pd-list-card .pd-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    text-transform: uppercase;
}
.pd-list-card.pd-judge-card .pd-avatar,
.pd-list-card.pd-club-card .pd-avatar {
    /* Round 67 follow-up #6b — user asked for club avatars to match the
       judge brand-soft purple. Single shared rule so the two indexes look
       intentionally part of the same product family. Visual distinction
       between judge and club cards now comes from the meta pills below
       the title (judge_type/breed pills vs. territory pill). */
    background: var(--pd-brand-soft, #ede9fe);
    color: var(--pd-brand, #511c66);
}
.pd-list-card .pd-list-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.pd-list-card .pd-list-body h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}
.pd-list-card .pd-list-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.pd-list-pill {
    letter-spacing: 0.02em;
    /* Round 67 follow-up #6c — allow wrap. Some clubs have long region-
       descriptor territory values (e.g. "NEW YORK;5 boroughs,Suffolk/
       Nassau,Westch,Rockl,BergenCo,NJ") that overflowed the card by 100+px
       with the original `white-space: nowrap` setting, visually overlapping
       the next horizontally-adjacent card in the grid. `overflow-wrap:
       anywhere` lets the pill flow onto multiple lines and stay inside its
       parent card while retaining the canonical pill radius. */
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.pd-list-pill--judge {
    background: var(--pd-brand-soft, #ede9fe);
    color: var(--pd-brand, #511c66);
}
.pd-list-pill--breed {
    background: #ccfbf1;  /* teal-100 */
    color: #0f766e;        /* teal-700 */
}
.pd-list-pill--territory {
    /* Round 67 follow-up #6d — swapped from amber to sky-blue per user
       request. Sky reads as "location/geographic" intuitively; amber felt
       warning-ish and the user disliked it. */
    background: #e0f2fe;  /* sky-100 */
    color: #075985;        /* sky-800 */
}
.pd-list-card .pd-list-meta {
    font-size: 13px;
    color: var(--pd-ink-light, #4b4b6a);
    line-height: 1.4;
}
@media (max-width: 480px) {
    .pd-list-card .pd-avatar {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }
}

.pd-event-number {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--pd-bg, #f8fafc);
    color: var(--pd-ink-light, #64748b);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ===== Pagination =====
   Round 67 follow-up #3 — paired with the branded
   `resources/views/vendor/pagination/default.blade.php` view that replaces
   Laravel 10's stock `pagination::tailwind` (Tailwind classes + inline SVG
   icons that rendered at full intrinsic size on our non-Tailwind site).

   Design: compact + minimal. No per-item borders by default — inactive
   page numbers are bare text, hover paints a soft tint, active page is a
   single filled brand pill. Prev/Next render as chevron-only icon buttons
   on every viewport (labels visually hidden but kept for screen readers).
   Ellipsis is bare text (no box). Summary text below in slate-light weight.

   Sizes:
     - Items 36px tall × 36px min-width (28px on mobile)
     - 4px gap, 6px border-radius (slight rounded rectangles, not full pills)
     - Font: 14px / 13px on mobile
*/
/* Round 68 — Public-directory pagination redesigned: borderless, breathing,
   modern (Stripe/Notion pattern, scaled for the older-users target audience).
   Drops the Round 67.5 bordered white-card + per-button-border treatment
   (felt "hideous", per user). Pages now float directly on the page bg with
   no card; numbered items get a brand-soft hover pill; active page is a
   filled brand-purple pill (same shape as the hover state so the selection
   reads as "this option is on", not a different widget). Prev/Next regain
   their word labels at desktop ("‹ Previous", "Next ›") since chevron-only
   was ambiguous; ≤600px re-hides the words and keeps just the chevrons to
   prevent row-wrap. Pages first, summary centered below in muted slate
   (matches the dashboard's quiet-meta-line pattern).

   This change applies ONLY to the public surfaces (/judges, /clubs, /events,
   /saved/events). The auth /event-search paginator at
   events-redesign.css:777-819 is intentionally left on the old bordered
   pattern.

   Published paginator view at resources/views/vendor/pagination/default.blade.php
   stays untouched — pure CSS swap. */
.pd-pagination {
    max-width: 1100px;
    margin: 8px auto 64px;
    padding: 0 24px;
    background: transparent;
    border: none;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--pd-ink, #1a1a2e);
    font-size: 14px;
}

.pd-pagination .pagination-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.pd-pagination .pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.pd-pagination .pagination__item {
    margin: 0;
    padding: 0;
}

.pd-pagination .pagination__link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: var(--pd-ink, #1a1a2e);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pd-pagination .pagination__link:hover {
    background: var(--pd-brand-soft, #ede9fe);
    color: var(--pd-brand, #511c66);
    text-decoration: none;
}

.pd-pagination .pagination__link:focus-visible {
    outline: 3px solid var(--pd-brand-vivid, #511c66);
    outline-offset: 2px;
}

/* Active page: filled brand-purple pill — same shape as the hover pill so
   the selection reads as a state, not a different widget. No hover shift
   (already at maximum emphasis). */
.pd-pagination .pagination__item--active .pagination__link {
    background: var(--pd-brand, #511c66);
    color: #fff;
    cursor: default;
}
.pd-pagination .pagination__item--active .pagination__link:hover {
    background: var(--pd-brand-dark, #3a1349);
    color: #fff;
}

/* Disabled (Prev on page 1 / Next on last page): clearly muted, no hover. */
.pd-pagination .pagination__item--disabled .pagination__link {
    color: #cbd5e1;
    cursor: default;
    pointer-events: none;
}
.pd-pagination .pagination__item--disabled .pagination__link:hover {
    background: transparent;
    color: #cbd5e1;
}

/* Ellipsis: bare text glyph, narrower than a button so it reads as a
   separator. */
.pd-pagination .pagination__item--ellipsis .pagination__link {
    color: #64748b;
    cursor: default;
    padding: 0 4px;
    min-width: auto;
    font-weight: 500;
    letter-spacing: 1px;
}
.pd-pagination .pagination__item--ellipsis .pagination__link:hover {
    background: transparent;
    color: #64748b;
}

/* Prev/Next: word labels visible at desktop. The published paginator
   template emits "‹ Previous" / "Next ›" with the word inside
   `.pagination__label`; Round 67.3 visually-hid that span. Round 68 puts
   it back so the affordance is unambiguous. ≤600px re-hides it (see
   mobile media block below). */
.pd-pagination .pagination__label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
}

/* Summary line: centered below the page row, muted slate (mirrors the
   dashboard's existing meta-line treatment). */
.pd-pagination .pagination-summary {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.pd-pagination .pagination-summary strong {
    color: #64748b;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .pd-pagination {
        padding: 0 12px;
        margin-bottom: 40px;
    }
    .pd-pagination .pagination {
        gap: 4px;
    }
}

@media (max-width: 600px) {
    .pd-pagination .pagination__link {
        min-width: 44px;
        height: 44px;
        padding: 0 10px;
        font-size: 14px;
    }
    /* Re-hide Prev/Next words at narrow widths to keep the row from
       wrapping; chevrons stay visible (aria-hidden span). Mirrors the
       Round 67.3 visually-hidden technique. */
    .pd-pagination .pagination__item:first-child .pagination__label,
    .pd-pagination .pagination__item:last-child .pagination__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .pd-pagination .pagination__item:first-child .pagination__link,
    .pd-pagination .pagination__item:last-child .pagination__link {
        min-width: 44px;
        padding: 0;
    }
    .pd-pagination .pagination__item--ellipsis .pagination__link {
        min-width: auto;
        padding: 0 4px;
    }
}

/* ===== Profile (show page) ===== */
.pd-profile {
    max-width: 1100px;
    margin: 0 auto;
    /* 32px top (was 8px) — the removed .pd-breadcrumbs nav used to supply the
       gap between the site nav and the profile card. */
    padding: 32px 24px 56px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
}
.pd-profile-main { min-width: 0; }
.pd-profile-aside { min-width: 0; }

.pd-profile-header {
    background: var(--pd-bg);
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.pd-profile-header h1 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--pd-ink);
    margin: 0 0 8px;
    line-height: 1.2;
}
.pd-profile-header .pd-subtitle {
    font-size: 16px;
    color: var(--pd-ink-light);
    margin: 0 0 14px;
    line-height: 1.5;
}
.pd-profile-header .pd-disambiguator {
    display: inline-block;
    background: var(--pd-brand-soft);
    color: var(--pd-brand);
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    margin-left: 6px;
}
.pd-profile-header .pd-summary {
    color: var(--pd-ink);
    font-size: 15px;
    line-height: 1.6;
}

.pd-section {
    background: var(--pd-bg);
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 18px;
}
.pd-section h2 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--pd-ink);
    margin: 0 0 16px;
}

.pd-assignment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pd-assignment-list li {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--pd-line);
}
.pd-assignment-list li:last-child { border-bottom: none; }
.pd-assignment-list .pd-asgn-date {
    font-size: 13px;
    color: var(--pd-ink-light);
    font-weight: 600;
}
.pd-assignment-list .pd-asgn-body strong {
    display: block;
    color: var(--pd-ink);
    font-size: 15px;
    line-height: 1.4;
}
.pd-assignment-list .pd-asgn-body strong a {
    color: var(--pd-ink);
    text-decoration: none;
}
.pd-assignment-list .pd-asgn-body strong a:hover,
.pd-assignment-list .pd-asgn-body strong a:focus-visible {
    color: var(--pd-brand);
    text-decoration: underline;
}
.pd-assignment-list .pd-asgn-body .pd-asgn-meta {
    font-size: 13px;
    color: var(--pd-ink-light);
    margin-top: 2px;
}

/* ===== Paywall ===== */
.pd-paywall {
    background: linear-gradient(135deg, var(--pd-brand-soft), #EEE7FF);
    border: 2px solid var(--pd-brand);
    border-radius: 12px;
    padding: 28px 24px;
    margin: 18px 0;
}
.pd-paywall-inner { max-width: 600px; margin: 0 auto; text-align: center; }
.pd-paywall h3 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 22px;
    color: var(--pd-brand);
    margin: 0 0 6px;
}
.pd-paywall-sub {
    color: var(--pd-ink);
    font-size: 15px;
    margin: 0 0 16px;
    line-height: 1.5;
}
.pd-paywall-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    text-align: left;
    display: inline-block;
}
.pd-paywall-features li {
    font-size: 14px;
    color: var(--pd-ink);
    line-height: 1.6;
}
.pd-paywall-features li span {
    color: var(--pd-favorite);
    font-weight: 700;
    margin-right: 6px;
}
/* Round 67 follow-up #4 — CTA button shape fix.
   Pre-fix used `display: inline-block` + `min-height: 44px` + `line-height: 1`
   on a `box-sizing: content-box` element. min-height referred to the CONTENT
   area, so 44px content + 28px vertical padding produced a 72px-tall pill
   with the text anchored near the top (inline content doesn't vertically
   center inside a tall inline-block). Net: button rendered at 178×72 with
   text sitting near the top of an oversized pill — the "weird shape" the
   user reported. Fix: switched to inline-flex with align-items/justify-content
   centering so the text sits in the vertical middle of the box. Also bumped
   box-sizing to border-box so min-height becomes total height (not content-only),
   tightened padding to 12×28, and set min-height: 48px so the pill clears the
   Apple HIG 44pt tap target with a 4px breathing buffer. Result: 166×48 pill
   with a 3.46:1 ratio, perfectly centered text, subtle shadow for depth,
   :focus-visible ring for keyboard a11y, and an :active translateY(0) for
   the press-down feedback. */
.pd-paywall-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--pd-brand);
    color: #fff !important;
    padding: 12px 28px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    min-height: 48px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(81, 28, 102, 0.15);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.pd-paywall-cta:hover,
.pd-paywall-cta:focus-visible {
    background: var(--pd-brand-vivid);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(81, 28, 102, 0.25);
}
.pd-paywall-cta:focus-visible {
    outline: 3px solid var(--pd-brand-vivid);
    outline-offset: 2px;
}
.pd-paywall-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(81, 28, 102, 0.15);
}
.pd-paywall-fineprint {
    font-size: 13px;
    color: var(--pd-ink-light);
    margin: 10px 0 0;
}

/* ===== Related sidebar ===== */
.pd-related {
    background: var(--pd-bg);
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    padding: 18px 20px;
}
.pd-related h3 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--pd-brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}
.pd-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-related li a {
    color: var(--pd-ink);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}
.pd-related li a:hover,
.pd-related li a:focus-visible {
    color: var(--pd-brand);
    text-decoration: underline;
}

/* Aside blocks stack; the judge profile now has three of them (states,
   related judges, find shows) so the gap can't live on an inline style. */
.pd-profile-aside .pd-related + .pd-related { margin-top: 16px; }

/* 44px minimum tap target on the aside link lists (Related judges / Related
   clubs / Browse / Find shows). These rendered at 19px — a 14px line with an
   8px flex gap — which is well under the Apple HIG minimum this project holds
   itself to, and the audience skews older. Applies to every .pd-related block
   (judge, club and event profiles). */
.pd-related li a {
    display: flex;
    align-items: center;
    min-height: 44px;
}
.pd-related ul { gap: 0 !important; }
.pd-related li + li { border-top: 1px solid #f1f5f9; }

/* "Where they judge" / "Where they host" — a label + count row rather than a
   link list, so it sets its own layout but inherits the 44px row height and the
   shared `li + li` divider above. */
.pd-statelist li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 15px;
    color: var(--pd-ink);
}
.pd-statelist-count { font-weight: 700; color: var(--pd-brand); }

/* ===== Round 96 — judge profile show rows =====
   Replaces the per-breed flat list on public/judges/show. One row per show,
   with the judge's breed assignments for that show as the row's detail. The
   old .pd-assignment-list above is still used by the club + event pages. */

/* At-a-glance figures under the profile summary. */
.pd-statstrip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 12px;
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--pd-line);
}
.pd-statstrip div { text-align: center; }
.pd-statstrip dt {
    order: 2;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-ink-light);
    margin-top: 4px;
}
.pd-statstrip dd {
    order: 1;
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: var(--pd-brand);
    line-height: 1.1;
}
.pd-statstrip div { display: flex; flex-direction: column; }

/* Breed-group breakdown bars. */
.pd-groupbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pd-groupbars li {
    display: grid;
    grid-template-columns: 150px 1fr 44px;
    gap: 12px;
    align-items: center;
    min-height: 32px;
    font-size: 15px;
    color: var(--pd-ink);
}
.pd-groupbar-track { background: var(--pd-brand-soft); border-radius: 999px; height: 14px; overflow: hidden; }
.pd-groupbar-fill { display: block; background: var(--pd-brand); height: 100%; border-radius: 999px; }
.pd-groupbar-count { font-size: 15px; font-weight: 700; color: var(--pd-ink-light); text-align: right; }

/* Upcoming / Past sub-headings inside the assignments section. */
.pd-show-subhead {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--pd-ink);
    margin: 24px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pd-show-subhead:first-of-type { margin-top: 0; }
.pd-show-count {
    background: var(--pd-brand-soft);
    color: var(--pd-brand);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 700;
}
.pd-show-truncated { font-size: 14px; color: var(--pd-ink-light); margin: 12px 0 0; }

/* The rows themselves. */
.pd-show-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pd-show-row {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--pd-line);
    border-radius: 10px;
    background: var(--pd-bg);
}
.pd-show-row:hover { border-color: var(--pd-brand); box-shadow: 0 2px 10px rgba(81, 28, 102, 0.07); }
.pd-show-date {
    text-align: center;
    background: var(--pd-brand-soft);
    border-radius: 8px;
    padding: 8px 4px;
    align-self: start;
}
.pd-show-mon {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pd-brand);
}
.pd-show-day { display: block; font-size: 26px; font-weight: 800; color: var(--pd-brand); line-height: 1.1; }
.pd-show-yr { display: block; font-size: 12px; font-weight: 600; color: var(--pd-ink-light); }
.pd-show-body { min-width: 0; }
.pd-show-name { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 4px; }
.pd-show-name a { color: var(--pd-ink); text-decoration: none; }
.pd-show-name a:hover,
.pd-show-name a:focus-visible { color: var(--pd-brand); text-decoration: underline; }
.pd-show-meta {
    font-size: 15px;
    color: var(--pd-ink-light);
    margin: 0 0 12px;
    line-height: 1.5;
}
.pd-show-meta a { color: var(--pd-brand); }
.pd-show-dot { color: var(--pd-line); margin: 0 4px; }

/* Breed-group chips — the data the pre-fix duplicate rows existed because of
   but never displayed. */
.pd-show-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-show-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid var(--pd-line);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-ink);
}
.pd-show-chip b { color: var(--pd-brand); font-weight: 800; }

/* Full breed list (subscribers only). */
.pd-show-breeds { margin-top: 10px; }
.pd-show-breeds summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--pd-brand);
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}
.pd-show-breeds summary::-webkit-details-marker { display: none; }
.pd-show-breeds summary::before { content: '\25B8'; font-size: 13px; transition: transform 0.15s ease; }
.pd-show-breeds[open] summary::before { transform: rotate(90deg); }
.pd-show-breeds summary:focus-visible { outline: 3px solid var(--pd-brand); outline-offset: 2px; border-radius: 4px; }
.pd-show-breeds > p {
    margin: 8px 0 0;
    padding: 14px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--pd-ink-light);
}

/* ===== Round 96 — event detail =====
   Reuses .pd-show-row / .pd-show-chip / .pd-statstrip from the judge + club
   work; these are the event-only additions (and replace the inline style=
   attributes the view used to carry). */

.pd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pd-host-link { color: var(--pd-brand); font-weight: 600; }

/* Entry deadline — the most actionable fact on the page, and absent entirely
   before Round 96 despite shows.show_cls_dt being in the DB all along. */
.pd-deadline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: #713f12;
}
.pd-deadline strong { font-weight: 800; }
.pd-deadline a { color: #713f12; font-weight: 700; }
.pd-deadline-days {
    background: var(--pd-gold);
    color: #3f2d00;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
/* Past deadline: red rather than amber, so "closed" doesn't read as "hurry". */
.pd-deadline--closed { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.pd-deadline--closed .pd-deadline-days { background: var(--pd-danger); color: #fff; }
.pd-deadline--closed a { color: #7f1d1d; }

/* Judge rows reuse .pd-show-row; the date block is swapped for initials. */
.pd-judge-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    background: var(--pd-brand-soft);
    color: var(--pd-brand);
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
}

address.pd-venue {
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pd-ink);
}
address.pd-venue strong { display: block; font-size: 17px; font-weight: 700; }
.pd-venue-link {
    display: inline-flex;
    align-items: center;
    /* 44px tap target — the audience skews older. */
    min-height: 44px;
    margin-top: 6px;
    color: var(--pd-brand);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.pd-venue-link:hover,
.pd-venue-link:focus-visible { text-decoration: underline; }

/* AKC event number badge in the aside link lists. Pushed to the trailing edge
   so a column of same-club, same-day events stays scannable. */
.pd-sibling-no { color: var(--pd-ink-light); font-weight: 600; margin-left: auto; padding-left: 10px; white-space: nowrap; }
.pd-related li a:has(.pd-sibling-no) { gap: 6px; }

/* ===== Empty states ===== */
.pd-empty {
    max-width: 600px;
    margin: 48px auto;
    text-align: center;
    color: var(--pd-ink-light);
    font-size: 16px;
    line-height: 1.6;
}

/* ===== Active nav highlight ===== */
.nav-active {
    color: var(--pd-brand) !important;
    font-weight: 600;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .pd-page-hero { padding: 40px 16px 28px; }
    .pd-page-hero h1 { font-size: 30px; }
    .pd-profile { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px 40px; }
    .pd-profile-aside { order: 2; }
    .pd-grid { padding: 12px 16px 40px; grid-template-columns: 1fr; }
    .pd-toolbar { padding: 0 16px; }
    .pd-assignment-list li { grid-template-columns: 64px 1fr; gap: 10px; }
    /* Round 96 — judge profile show rows */
    .pd-show-row { grid-template-columns: 64px 1fr; gap: 12px; padding: 14px; }
    .pd-show-day { font-size: 22px; }
    .pd-show-name { font-size: 17px; }
    .pd-groupbars li { grid-template-columns: 118px 1fr 40px; gap: 10px; }
    .pd-statstrip { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; }
    .pd-statstrip dd { font-size: 22px; }
}