/**
 * Patriot University — Echo Knowledge Base Overrides
 *
 * EKB renders with inline <style> blocks using !important on nearly every rule.
 * Our selectors must match EKB's actual DOM IDs/classes and use !important.
 *
 * Known EKB containers (from source inspection):
 *   #epkb-modular-main-page-container
 *   #epkb-ml__module-search
 *   #epkb-ml__module-categories-articles
 *   #epkb-ml-categories-layout
 *   #epkb-ml__row-1, #epkb-ml__row-2
 *   .epkb-ml__module-categories-articles__row
 *   .epkb-ml-search-box__text  (the visible label causing overlap)
 *   .epkb-ml-search-box__input
 *   .epkb-ml-search-box__btn
 */

/* ══════════════════════════════════════════════════════════════════════════
   MAIN PAGE — SEARCH BOX LABEL FIX
   The .epkb-ml-search-box__text element renders "Search" visibly on top of
   the input. Hide it visually while keeping it accessible.
   ══════════════════════════════════════════════════════════════════════════ */

#epkb-ml__module-search .epkb-ml-search-box__text,
#epkb-modular-main-page-container .epkb-ml-search-box__text,
.epkb-ml-search-box__text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Also catch any <label> element EKB renders inside search */
#epkb-ml__module-search label,
#epkb-modular-main-page-container label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Collapse the (intentionally) empty search title.
   search_title / article_search_title are blank in epkb_config_1 so the
   "How can we help you today?" heading no longer renders. When EKB still
   emits an empty title node, remove its reserved vertical space (the 36px
   heading + margins) so the search input sits flush at the top of the box.
   Scoped to :empty so a future non-blank title is unaffected. Applies to
   both the Main Page and category archives (archive reuses main_page search). */
#epkb-ml__module-search .epkb-ml-search-title:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* Search input styling */
#epkb-ml__module-search .epkb-ml-search-box__input {
    padding: 12px 80px 12px 20px !important;
    font-size: 1rem !important;
    border-radius: 9999px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

/* Search form — wider on desktop */
#epkb-ml__module-search #epkb-ml-search-classic-layout #epkb-ml-search-form,
#epkb-ml__module-search #epkb-ml-search-modern-layout #epkb-ml-search-form {
    max-width: 600px !important;
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MAIN PAGE — CATEGORY GRID SPACING
   EKB already sets gap:20px on .epkb-ml__module-categories-articles__row.
   The crowding is between SECTIONS (Topics vs People vs Learning Paths).
   We need vertical space between the section groups.
   ══════════════════════════════════════════════════════════════════════════ */

/* More gap between rows of category boxes */
#epkb-ml-categories-layout .epkb-ml__module-categories-articles__row {
    gap: 24px !important;
    margin-bottom: 32px !important;
}

/* Section dividers — the group headings ("Topics", "People", etc.) */
#epkb-ml-categories-layout .epkb-ml-top-categories-button,
#epkb-ml-categories-layout .epkb-ml-top-categories-button-container,
#epkb-ml-categories-layout [class*="section-head"],
#epkb-modular-main-page-container [class*="section-head"] {
    margin-top: 48px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
}

/* First section head needs less top space */
#epkb-ml-categories-layout .epkb-ml-top-categories-button:first-of-type,
#epkb-ml-categories-layout .epkb-ml-top-categories-button-container:first-of-type,
#epkb-ml-categories-layout [class*="section-head"]:first-of-type {
    margin-top: 16px !important;
}

/* Category boxes — more internal breathing room */
#epkb-ml-categories-layout .epkb-top-category-box {
    padding: 20px 16px !important;
}

/* Overall container for the categories module */
#epkb-ml__module-categories-articles {
    padding-top: 16px !important;
}

/* Row-2 container (holds the category grid) */
#epkb-ml__row-2 {
    padding: 24px 20px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORY ARCHIVE PAGE
   Pages like /knowledge-base/category/topics/accountability-profiles/
   EKB renders its own sidebar tree + article list. We style the wrapper,
   sidebar, breadcrumb, headings, and article links.
   ══════════════════════════════════════════════════════════════════════════ */

/* Wrapper — constrain and center */
#epkb-main-page-container,
#epkb-content-container,
.eckb-kb-template {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px var(--iti-space-md, 16px) !important;
    font-family: var(--pu-font-body) !important;
    color: var(--pu-ink) !important;
    line-height: 1.6 !important;
}

/* Category archive title */
.eckb-category-archive-title,
#epkb-main-page-container h1,
.epkb-category-archive h1 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 8px !important;
    color: var(--pu-ink) !important;
}

/* Sidebar navigation tree — compact, clean */
#epkb-main-page-container .epkb-sidebar,
.eckb-kb-template .epkb-sidebar,
.epkb-category-level-1,
.epkb-category-level-2,
.epkb-category-level-3 {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

#epkb-main-page-container .epkb-sidebar a,
.eckb-kb-template .epkb-sidebar a,
.epkb-category-level-1 a,
.epkb-category-level-2 a,
.epkb-category-level-3 a {
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    display: block !important;
}

#epkb-main-page-container .epkb-sidebar a:hover,
.eckb-kb-template .epkb-sidebar a:hover,
.epkb-category-level-1 a:hover,
.epkb-category-level-2 a:hover,
.epkb-category-level-3 a:hover {
    color: var(--pu-navy) !important;
}

/* Article list in the archive */
.epkb-articles-coming-soon,
.epkb-category-archive-page-container .epkb-article-list-items,
#epkb-main-page-container .epkb-article-list-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 !important;
}

.epkb-category-archive-page-container .epkb-article-list-items li,
#epkb-main-page-container .epkb-article-list-items li {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--pu-gray-200) !important;
}

.epkb-category-archive-page-container .epkb-article-list-items li a,
#epkb-main-page-container .epkb-article-list-items li a {
    color: var(--pu-navy) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.epkb-category-archive-page-container .epkb-article-list-items li a:hover,
#epkb-main-page-container .epkb-article-list-items li a:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Category archive: drop the trailing right-arrow on each article row.
   The document icon (.ep_font_icon_document) + linked title already signal
   the link; the arrow's right-edge placement read as confusing. Keep the
   icon and text — hide only the arrow (Echo KB plugin markup, so CSS-only). */
#eckb-archive-page-container .eckb-category-archive-arrow,
.eckb-category-archive-arrow {
    display: none !important;
}

/* Category archive: masonry sub-category cards (no stretched-to-tallest gaps).
   Echo KB wraps sub-category cards in fixed rows (.eckb-sub-category-row); a
   flex row stretches every card to the tallest card's height, leaving dead
   white space under the shorter cards, and a card can never rise into the gap
   above it. Dissolve the row wrappers (display:contents) and flow the cards
   through a CSS multi-column context so each card is only as tall as its own
   document list and cards below float up to fill the gaps. Column count tracks
   the plugin's configured columns-N class. NOTE: multi-column flows fill
   column-first (down column 1, then column 2), so card order reads top-to-
   bottom then across rather than left-to-right — the accepted trade-off for a
   pure-CSS masonry (CSS grid `masonry` is not yet broadly supported). */
#eckb-archive-page-container .eckb-sub-category-list-container {
    display: block !important;
    align-items: initial !important;
    column-count: 2;
    column-gap: 20px;
}
#eckb-archive-page-container .eckb-sub-category-list-container:has( .eckb-sub-category-row-columns-1 ) {
    column-count: 1;
}
#eckb-archive-page-container .eckb-sub-category-list-container:has( .eckb-sub-category-row-columns-3 ) {
    column-count: 3;
}
#eckb-archive-page-container .eckb-sub-category-row {
    display: contents !important;
}
#eckb-archive-page-container .eckb-sub-category-list-container .eckb-sub-category-container {
    width: auto !important;
    margin: 0 0 20px !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Match the plugin's own single-column collapse breakpoint. */
@media only screen and (max-width: 981px) {
    #eckb-archive-page-container .eckb-sub-category-list-container {
        column-count: 1 !important;
    }
}

/* Section headings within category tree */
#epkb-main-page-container h2,
.epkb-category-archive h2,
.eckb-kb-template h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 24px 0 12px !important;
    color: var(--pu-ink) !important;
}

/* Breadcrumb on category pages */
.epkb-category-archive-page-container [class*="breadcrumb"],
#epkb-main-page-container [class*="breadcrumb"] {
    font-size: 0.8125rem !important;
    padding: 8px 0 16px !important;
    color: var(--pu-gray-600) !important;
}

.epkb-category-archive-page-container [class*="breadcrumb"] a,
#epkb-main-page-container [class*="breadcrumb"] a {
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
}

.epkb-category-archive-page-container [class*="breadcrumb"] a:hover,
#epkb-main-page-container [class*="breadcrumb"] a:hover {
    color: var(--pu-navy) !important;
    text-decoration: underline !important;
}

/* EKB search on category pages */
.epkb-category-archive-page-container [class*="search"],
#epkb-main-page-container .epkb-doc-search-container {
    max-width: 600px !important;
    margin-bottom: 24px !important;
}

/* Show/Collapse toggles */
.epkb-show-all-articles,
[class*="show-all-articles"],
[class*="collapse-articles"] {
    font-size: 0.8125rem !important;
    color: var(--pu-navy) !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* Allow EKB's article container to break out of .pu-article max-width */
.pu-kb-article {
    max-width: none !important;
    width: 100% !important;
}

.pu-kb-article__body {
    max-width: none !important;
    width: 100% !important;
}

.pu-prose #eckb-article-page-container-v2,
.pu-prose #eckb-article-page-container,
.pu-article__body #eckb-article-page-container-v2,
.pu-article__body #eckb-article-page-container {
    max-width: none !important;
}

.pu-article__body.pu-prose:has(#eckb-article-page-container-v2),
.pu-article__body.pu-prose:has(#eckb-article-page-container) {
    max-width: none !important;
}

#eckb-article-page-container-v2 {
    font-family: var(--pu-font-body) !important;
    color: var(--pu-ink) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Hide the redundant search bar on individual article pages */
#eckb-article-page-container-v2 #eckb-article-header {
    display: none !important;
}

#eckb-article-page-container-v2 #eckb-article-body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    grid-template-columns: 200px 1fr 240px !important;
}

#eckb-article-page-container,
#eckb-article-page-container-v2 {
    font-family: var(--pu-font-body) !important;
    color: var(--pu-ink) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

#eckb-article-page-container .eckb-article-title,
#eckb-article-page-container-v2 .eckb-article-title {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    color: var(--pu-ink) !important;
    margin-bottom: 16px !important;
}

#eckb-article-page-container .eckb-article-body,
#eckb-article-page-container-v2 #eckb-article-content-body {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--pu-ink) !important;
}

#eckb-article-page-container .eckb-article-body h2,
#eckb-article-page-container-v2 #eckb-article-content-body h2 {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    color: var(--pu-ink) !important;
}

#eckb-article-page-container .eckb-article-body h3,
#eckb-article-page-container-v2 #eckb-article-content-body h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

#eckb-article-page-container .eckb-article-body p,
#eckb-article-page-container-v2 #eckb-article-content-body p {
    margin-bottom: 16px !important;
}

#eckb-article-page-container .eckb-article-body a,
#eckb-article-page-container-v2 #eckb-article-content-body a {
    color: var(--pu-navy) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

#eckb-article-page-container .eckb-article-body a:hover,
#eckb-article-page-container-v2 #eckb-article-content-body a:hover {
    color: var(--pu-navy-dark) !important;
}

#eckb-article-page-container .eckb-article-body ul,
#eckb-article-page-container .eckb-article-body ol,
#eckb-article-page-container-v2 #eckb-article-content-body ul,
#eckb-article-page-container-v2 #eckb-article-content-body ol {
    margin: 0 0 16px 24px !important;
}

#eckb-article-page-container .eckb-article-body li,
#eckb-article-page-container-v2 #eckb-article-content-body li {
    margin-bottom: 4px !important;
}

/* Tables — scoped to BOTH Echo KB article layouts:
   v1: #eckb-article-page-container .eckb-article-body (legacy class-based)
   v2: #eckb-article-page-container-v2 #eckb-article-content-body (current, ID-based)
   The v1 selector matches nothing on v2-rendered articles, so the v2 selector
   is required for the grid/alignment to actually apply on live KB documents. */
#eckb-article-page-container .eckb-article-body table,
#eckb-article-page-container-v2 #eckb-article-content-body table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 !important;
}

#eckb-article-page-container .eckb-article-body th,
#eckb-article-page-container-v2 #eckb-article-content-body th {
    text-align: left !important;
    vertical-align: top !important;
    padding: 8px 12px !important;
    background: var(--pu-gray-50) !important;
    font-weight: 600 !important;
    border: 1px solid var(--pu-gray-400) !important;
}

#eckb-article-page-container .eckb-article-body td,
#eckb-article-page-container-v2 #eckb-article-content-body td {
    text-align: left !important;
    vertical-align: top !important;
    padding: 8px 12px !important;
    border: 1px solid var(--pu-gray-400) !important;
}

#eckb-article-page-container .eckb-article-body blockquote,
#eckb-article-page-container-v2 #eckb-article-content-body blockquote {
    border-left: 3px solid var(--pu-gold) !important;
    padding: 12px 16px !important;
    margin: 16px 0 !important;
    color: var(--pu-gray-600) !important;
    background: var(--pu-gold-light) !important;
    border-radius: 0 8px 8px 0 !important;
}

#eckb-article-page-container .eckb-article-body code,
#eckb-article-page-container-v2 #eckb-article-content-body code {
    font-family: var(--pu-font-mono) !important;
    font-size: 0.875rem !important;
    background: var(--pu-gray-100) !important;
    padding: 0.125em 0.375em !important;
    border-radius: 4px !important;
}

#eckb-article-page-container .eckb-article-body pre,
#eckb-article-page-container-v2 #eckb-article-content-body pre {
    background: var(--pu-gray-100) !important;
    padding: 16px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    border: 1px solid var(--pu-gray-200) !important;
}

#eckb-article-page-container .eckb-article-body pre code,
#eckb-article-page-container-v2 #eckb-article-content-body pre code {
    background: none !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — TOC SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container [class*="toc"],
#eckb-article-page-container-v2 [class*="toc"] {
    background: var(--pu-gray-50) !important;
    border: 1px solid var(--pu-gray-200) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    font-size: 0.875rem !important;
}

#eckb-article-page-container [class*="toc"] a,
#eckb-article-page-container-v2 [class*="toc"] a {
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
    display: block !important;
    padding: 4px 0 !important;
}

#eckb-article-page-container [class*="toc"] a:hover,
#eckb-article-page-container-v2 [class*="toc"] a:hover {
    color: var(--pu-navy) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container [class*="breadcrumb"],
#eckb-article-page-container-v2 [class*="breadcrumb"] {
    font-size: 0.8125rem !important;
    padding: 16px 0 !important;
    color: var(--pu-gray-600) !important;
}

#eckb-article-page-container [class*="breadcrumb"] a,
#eckb-article-page-container-v2 [class*="breadcrumb"] a {
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
}

#eckb-article-page-container [class*="breadcrumb"] a:hover,
#eckb-article-page-container-v2 [class*="breadcrumb"] a:hover {
    color: var(--pu-navy) !important;
    text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container [class*="navigation"] a,
#eckb-article-page-container-v2 [class*="navigation"] a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 8px !important;
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    font-size: 0.875rem !important;
}

#eckb-article-page-container [class*="navigation"] a:hover,
#eckb-article-page-container [class*="navigation"] a.active,
#eckb-article-page-container-v2 [class*="navigation"] a:hover,
#eckb-article-page-container-v2 [class*="navigation"] a.active {
    background: var(--pu-navy-light) !important;
    color: var(--pu-navy) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RATING / FEEDBACK
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container [class*="rating"],
#eckb-article-page-container-v2 [class*="rating"] {
    margin-top: 32px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--pu-gray-200) !important;
    font-size: 0.875rem !important;
    color: var(--pu-gray-600) !important;
}

/* Exception: the inline star widget in the article meta row. The [class*="rating"]
   wildcard above matches FOUR nested elements here (…rating-element-container →
   …star-rating → …__stars → …__stars-stats), so its 32px margin + 16px padding +
   border-top COMPOUND into a ~137px tall block, which — with the meta row's
   align-items:flex-end — pushes the Posted/Updated/By line far below the title.
   The wildcard rule is meant for the standalone footer feedback block, not this
   inline widget, so zero the spacers back out for the meta rating nest. */
#eckb-article-page-container-v2 .eckb-article-content-rating-element-container,
#eckb-article-page-container-v2 .eckb-article-content-rating-element-container [class*="rating"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* Keep the EPRF star-breakdown statistics popup collapsed by default.
   The rating plugin's own stylesheet (which sets this display:none until the
   chevron toggles it) is pruned by LiteSpeed UCSS / not enqueued on v2 article
   pages, so the popup renders fully expanded — injecting a tall empty band
   between the article title and the meta (Posted/Updated/By) row. Hide it here
   and in the inline critical-CSS floor (functions.php) so it always ships. */
#eckb-article-page-container .eprf-article-meta__statistics,
#eckb-article-page-container-v2 .eprf-article-meta__statistics {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOSSARY (Echo KB native feature)
   Echo KB ships css/glossary.css, which ALREADY styles the term
   (.epkb-glossary-term, admin-selectable --highlight-style-1/2/3), the tooltip
   (.epkb-glossary-tooltip { z-index:100000 }), and a direction-aware ::after
   arrow (--above / --below). Do NOT re-declare z-index or the arrow here:
     • a blanket z-index drops the tooltip BELOW the theme modals (z-index
       100000, components.css) and the skip link (100001, theme.css);
     • a fixed ::after border-color points the arrow the wrong way for
       below-anchored tooltips (EKB flips it per --above/--below);
     • the [class*="epkb-glossary-tooltip"] wildcard also matches the
       __term / __definition CHILDREN, double-boxing them.
   Keep PU overrides here to brand type + a term affordance only, scoped to the
   KB article body. Revisit once glossary is enabled and real markup is on screen.
   ══════════════════════════════════════════════════════════════════════════ */

/* Term affordance: help cursor + subtle hover tint. Additive to (not a
   replacement for) EKB's admin-selected highlight style. */
#eckb-article-page-container-v2 #eckb-article-content-body .epkb-glossary-term {
    cursor: help !important;
}
#eckb-article-page-container-v2 #eckb-article-content-body .epkb-glossary-term:hover {
    background-color: var(--pu-gold-light, rgba(255, 215, 0, 0.1)) !important;
}

/* Match tooltip text to the PU body font (EKB defaults to a system stack).
   Container only — never the __term/__definition children. z-index/arrow/box
   are intentionally left to EKB's glossary.css. */
.epkb-glossary-tooltip {
    font-family: var(--pu-font-body) !important;
    line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOW ALL ARTICLES BY DEFAULT
   EKB hides overflow articles with .epkb-hide-elem (main content) and
   .elay-hide-elem (sidebar). Their CSS uses high-specificity selectors.
   We beat them by adding an extra class to the selector chain.
   ══════════════════════════════════════════════════════════════════════════ */

body #eckb-archive-page-container #eckb-archive-content .epkb-hide-elem {
    display: block !important;
}

body #eckb-archive-page-container #elay-sidebar-container-v2 .elay-sidebar__cat-container .elay-hide-elem {
    display: list-item !important;
}

.elay-show-all-articles,
.eckb-article-list-show-more-container,
.eckb-article-list-show-all-link,
.epkb-show-all-articles {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOSSARY DOCUMENT-NETWORK MODAL  (glossary-graph.js)
   "View document network" link inside the EKB tooltip + the ego-graph modal
   it opens. Overlay sits ABOVE the tooltip (z-index:100000) and skip-link
   (100001). Self-contained SVG star graph; node click opens the doc in a tab.
   ══════════════════════════════════════════════════════════════════════════ */

.pu-gnet-link {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 8px 0;
    border: 0;
    border-top: 1px solid var(--pu-gray-200, #e5e7eb);
    background: none;
    font: 600 0.82rem/1.3 var(--pu-font-body, sans-serif);
    color: var(--pu-gold, #1e73be);
    text-align: left;
    cursor: pointer;
}
.pu-gnet-link:hover,
.pu-gnet-link:focus-visible { text-decoration: underline; }

.pu-gnet-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgba(15, 23, 42, 0.62);
}
.pu-gnet-panel {
    width: min(920px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    padding: clamp(16px, 3vw, 28px);
}
.pu-gnet-head {
    position: relative;
    padding-right: 40px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--pu-gray-100, #f1f5f9);
    padding-bottom: 10px;
}
.pu-gnet-title {
    margin: 0;
    font: 700 clamp(1.05rem, 2.4vw, 1.4rem)/1.25 var(--pu-font-body, serif);
    color: var(--pu-navy, #0f2740);
}
.pu-gnet-sub {
    margin: 4px 0 0;
    font: 400 0.86rem/1.3 var(--pu-font-body, sans-serif);
    color: var(--pu-gray-600, #475569);
}
.pu-gnet-close {
    position: absolute;
    top: -2px;
    right: 0;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--pu-gray-600, #475569);
    cursor: pointer;
}
.pu-gnet-close:hover { color: var(--pu-navy, #0f2740); }

.pu-gnet-svg { width: 100%; height: auto; display: block; }
.pu-gnet-edge { stroke: var(--pu-gray-200, #dbe1e8); stroke-width: 1.2; }
.pu-gnet-center circle { fill: var(--pu-navy, #0f2740); }
.pu-gnet-center text {
    font: 700 13px var(--pu-font-body, sans-serif);
    fill: var(--pu-navy, #0f2740);
}
.pu-gnet-node { cursor: pointer; }
.pu-gnet-node circle {
    fill: #fff;
    stroke: var(--pu-gold, #1e73be);
    stroke-width: 2;
    transition: fill 0.12s ease;
}
.pu-gnet-node text {
    font: 400 12px var(--pu-font-body, sans-serif);
    fill: var(--pu-ink, #1f2937);
}
.pu-gnet-node:hover circle,
.pu-gnet-node:focus-visible circle { fill: var(--pu-gold, #1e73be); }
.pu-gnet-node:focus-visible { outline: none; }
.pu-gnet-node:hover text,
.pu-gnet-node:focus-visible text { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .pu-gnet-node circle { transition: none; }
}