/* 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: #511c66;
    --pd-brand-vivid: #6500F8;
    --pd-brand-soft: #ede9fe;
    --pd-ink: #1a1a2e;
    --pd-ink-light: #4b4b6a;
    --pd-line: #e2e8f0;
    --pd-bg-tint: #faf5ff;
    --pd-bg: #ffffff;
    --pd-gold: #fcc200;
    --pd-favorite: #047857;
    --pd-warn: #b45309;
    --pd-danger: #b91c1c;
}

/* ===== 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 {
    display: inline-block;
    background: var(--pd-brand-soft);
    color: var(--pd-brand);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 12px;
}

/* ===== Breadcrumbs ===== */
.pd-breadcrumbs {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    color: var(--pd-ink-light);
}
.pd-breadcrumbs a {
    color: var(--pd-brand);
    text-decoration: none;
}
.pd-breadcrumbs a:hover,
.pd-breadcrumbs a:focus-visible { text-decoration: underline; }
.pd-breadcrumbs .sep { margin: 0 8px; color: var(--pd-line); }
.pd-breadcrumbs [aria-current="page"] {
    color: var(--pd-ink);
    font-weight: 600;
}

/* ===== 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;
}
.pd-search-form input[type="search"]:focus {
    outline: 3px solid var(--pd-brand-vivid);
    outline-offset: 2px;
    border-color: var(--pd-brand);
}
.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(--pd-brand-vivid); }

.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: 32px;
    height: 32px;
    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 {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    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. Border-radius bumped to 12px (was 999px) because at
       multi-line height the full-pill rounding looks like a balloon; 12px
       reads cleanly at both 1-line short labels AND 3-line long descriptions. */
    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: 2px solid var(--pd-brand-vivid, #6500F8);
    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: #94a3b8;
    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: #94a3b8;
}

/* 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: #94a3b8;
    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;
    padding: 8px 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), #fdf2f8);
    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: 999px;
    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(101, 0, 248, 0.25);
}
.pd-paywall-cta:focus-visible {
    outline: 2px 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;
}

/* ===== 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: 8px 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; }
}