/*
  Legal template — formal, executive, boardroom. A printed-report cover page:
  photo, name, subtitle, then a numbered Table of Contents (dotted leaders +
  page numbers) where each row opens its section in a full-page popup.
*/

.nex-legal {
    background: #F7F3EB;
    padding-top: var(--nex-space-section);
    padding-bottom: var(--nex-space-section);
    font-family: var(--nex-font-primary);
}

/* NexPopup's own wrapper carries this same "nex-legal" class (see
   NexPopup.razor's TemplateClass), but its actual content (backdrop, wrap)
   is all position:fixed and contributes no height — so without this reset,
   the page-level background/padding above still paints on that wrapper,
   showing up as a stray empty block wherever <NexPopup> sits in the DOM
   (right after each section's row) any time a popup is open. */
.nex-legal.nex-popup-scope {
    background: none;
    padding-top: 0;
    padding-bottom: 0;
}

/* Motion background — full-bleed, fixed to the viewport, on desktop (the
   .nex-paper card floats on top of it, same as it's always been). Only on
   mobile (see the max-width:480px block below) does this switch to being
   contained inside .nex-cover instead, matching Editorial's .nex-hero. */
.nex-legal-bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

.nex-legal h1, .nex-legal h2, .nex-legal h3, .nex-legal .nex-heading {
    font-family: 'Merriweather', Georgia, serif;
    color: #2D2D2D;
}

.nex-legal .nex-paper {
    background: var(--nex-white);
    max-width: 900px;
    margin: 0 auto;
    padding: var(--nex-space-hero) var(--nex-space-hero);
    box-shadow: var(--nex-shadow-light);
}

.nex-legal .nex-cover {
    text-align: left;
    padding-bottom: var(--nex-space-lg);
    border-bottom: 2px solid #2D2D2D;
    margin-bottom: var(--nex-space-lg);
}

.nex-legal .nex-cover-body {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--nex-space-lg);
}

.nex-legal .nex-cover-left {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--nex-space-lg);
    align-items: flex-start;
    min-width: 0;
}

.nex-legal .nex-cover-photo {
    width: 108px;
    height: 132px;
    flex-shrink: 0;
    border-radius: 0 !important;
    border: 1px solid #D7D0C4;
    background: #F7F3EB;
    object-fit: cover;
    box-shadow: var(--nex-shadow-light);
}

/* display:flex + gap (rather than margin-bottom on individual children)
   means the spacing stays consistent whether or not .nex-cover-subtitle is
   present — no need for the name/subtitle to know about each other's
   presence, and no risk of the doubled-margin gap bug fixed in Classic/
   Editorial's equivalent avatar-to-name spacing. */
.nex-legal .nex-cover-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-top: 4px;
}

.nex-legal .nex-cover-name {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 36px;
    line-height: 1.15;
    color: #2D2D2D;
    margin: 0;
}

.nex-legal .nex-cover-subtitle {
    font-family: var(--nex-font-primary);
    font-size: 15px;
    line-height: 1.4;
    color: var(--nex-text-secondary);
    margin: 0;
}

.nex-legal .nex-cover-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 4px;
    flex-shrink: 0;
}

.nex-legal .nex-cover-meta-item {
    font-size: var(--nex-small);
    color: var(--nex-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.nex-legal .nex-cover-meta-item i {
    color: var(--nex-text-muted);
    font-size: 12px;
}

.nex-legal .nex-cover-cta {
    margin-top: 0;
    background: var(--nex-primary);
    color: var(--nex-primary-contrast);
    border: none;
    border-radius: 0;
    padding: 12px 26px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}

.nex-legal .nex-cover-cta:hover {
    background: #0B6667;
    color: var(--nex-primary-contrast);
}

@media (max-width: 480px) {
    /* Centered "hero" stack instead of the desktop two-column layout —
       photo, name, headline, pronoun, language, then the CTA last. Achieved
       by unwrapping the .nex-cover-left/.nex-cover-info/.nex-cover-meta
       grouping divs (display:contents drops their own box but keeps their
       CSS-irrelevant children participating directly in .nex-cover-body's
       flex flow) and reordering the now-flat list of items with `order` —
       no markup changes needed. */
    .nex-legal .nex-cover-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .nex-legal .nex-cover-left,
    .nex-legal .nex-cover-info,
    .nex-legal .nex-cover-meta {
        display: contents;
    }

    .nex-legal .nex-cover-photo {
        width: 96px;
        height: 116px;
        margin-bottom: 4px;
        order: 0;
    }

    .nex-legal .nex-cover-name {
        order: 1;
        margin: 0;
        font-size: 26px;
    }

    .nex-legal .nex-cover-subtitle {
        order: 2;
        font-size: 14px;
    }

    .nex-legal .nex-cover-meta-item {
        order: 3;
        justify-content: center;
    }

    .nex-legal .nex-cover-cta {
        order: 4;
        width: 100%;
        margin-top: 6px;
    }

    /* Mobile only: the motion background switches from the desktop's
       full-page fixed video to being contained inside .nex-cover instead,
       matching Editorial's .nex-hero treatment — desktop keeps the video
       as a full-bleed page background (see the base .nex-legal-bg-video
       rule above), unchanged from how it originally worked. */
    .nex-legal-bg-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    /* The centered stack above (photo, name, headline, pronoun, language,
       button) needs more vertical room than the compact desktop row does.

       min-height (not a flat height) matches Editorial's .nex-hero: it
       gives the box a floor for the shortest case (photo + name + button,
       nothing else) while letting it grow with the actual content when
       Headline/Pronouns/Native Language add more lines — a flat height
       either left a bare strip of background below the button (too tall
       for short content) or clipped the button entirely (too short for
       long content), depending on what was enabled. The video below still
       fills via inset:0 + width/height:100% against this container's
       *resolved* box (definite once layout completes, whether that came
       from min-height or from taller content), same technique already
       proven working in Editorial's .nex-hero. */
    .nex-legal .nex-cover.nex-cover-has-video {
        position: relative;
        overflow: hidden;
        min-height: 380px;
        padding: var(--nex-space-hero) var(--nex-space-lg);
    }

    .nex-legal .nex-cover.nex-cover-has-video::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(20, 20, 20, .45);
        z-index: 1;
    }

    .nex-legal .nex-cover.nex-cover-has-video .nex-cover-body {
        position: relative;
        z-index: 2;
    }

    .nex-legal .nex-cover.nex-cover-has-video .nex-cover-name,
    .nex-legal .nex-cover.nex-cover-has-video .nex-cover-subtitle,
    .nex-legal .nex-cover.nex-cover-has-video .nex-cover-meta-item {
        color: #FFFFFF;
    }

    .nex-legal .nex-cover.nex-cover-has-video .nex-cover-meta-item i {
        color: rgba(255, 255, 255, .8);
    }

    .nex-legal .nex-cover.nex-cover-has-video .nex-cover-photo {
        border-color: rgba(255, 255, 255, .5);
    }
}

/* ====== Table of Contents ======
   Reskins the existing NexSectionCard (Kicker/Title/Subtitle + arrow) as a
   numbered report row: "N  Title .......dots....... 0N", description below.
   No markup changes — everything below targets NexSectionCard's own DOM. */
.nex-legal .nex-sections {
    counter-reset: nex-legal-section;
}

.nex-legal .nex-section {
    margin-bottom: 0;
}

.nex-legal .nex-section-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin-top: 0 !important;
    /* Drives the page number on the right (.nex-section-arrow::before below)
       — there's no separate visible chapter number on the left; one number
       per row, not two. */
    counter-increment: nex-legal-section;
}

.nex-legal .nex-section-card .card-body {
    /* Matches the 8px icon-to-title gap in .title below, so the space from
       this row's border-bottom down to the next row's icon reads the same
       as the space from that icon to its own title text. */
    padding: 8px 0;
    border-bottom: 1px solid #F0EBDF;
}

.nex-legal .nex-section-card .accordion-button.parent-accordion {
    /* Bootstrap's .align-items-center utility (also present on this element,
       see NexSectionCard.razor) ships with !important, so a plain override
       here is silently ignored — without !important the page number drifts
       to the vertical center of the whole kicker+title+subtitle block and
       collides with wrapped text once titles wrap on narrow screens. */
    align-items: flex-start !important;
    padding: 0 !important;
}

.nex-legal .nex-section-card .nex-section-kicker {
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--nex-text-muted);
    text-transform: uppercase;
    margin: 0 0 2px 28px;
}

.nex-legal .nex-section-card .title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Merriweather', Georgia, serif;
    font-size: var(--nex-body);
    font-weight: 400;
    text-transform: none;
    color: #2D2D2D;
    letter-spacing: normal;
}

.nex-legal .nex-section-card .title::after {
    content: "";
    flex: 1 1 auto;
    border-bottom: 1px dotted #D7D0C4;
    margin-bottom: 5px;
}

/* Highlights row icon (FontAwesome default, or an uploaded Visual Branding
   image via .nex-highlight-icon-img below) — sits before the title text,
   same slot ClassicProfile.razor's .nex-highlight-title > i:first-child uses. */
.nex-legal .nex-section-card .title > i:first-child {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--nex-primary);
    /* Guarantees the same 8px icon-to-title gap as every other row even
       when the title text that follows has no explicit space/me-2 in its
       markup (e.g. Highlights and InfoPack rows) — the flex `gap` above
       only creates a gap when the following text forms its own anonymous
       flex item, which whitespace-only text between tags does not do. */
    margin-right: 8px;
}

.nex-legal .nex-section-card .title > img.nex-highlight-icon-img {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.nex-legal .nex-section-card .nex-section-subtitle {
    font-size: var(--nex-small);
    color: var(--nex-text-secondary);
    margin: 2px 0 0;
}

.nex-legal .nex-section-arrow {
    font-size: 0;
    color: var(--nex-text-muted);
    padding-top: 2px;
    flex-shrink: 0;
}

.nex-legal .nex-section-arrow::before {
    content: counter(nex-legal-section, decimal-leading-zero);
    font-family: var(--nex-font-primary);
    font-size: var(--nex-small);
}

.nex-legal .nex-section-card:hover .title,
.nex-legal .nex-section-card:hover .nex-section-arrow {
    color: var(--nex-primary);
}

/* ====== Popup body ====== */

/* Overview (Bio) — each category (About, Interests & Hobbies, Professional
   Goals, Values, Professional Summary, Personal Goals) as a plain kicker +
   paragraph, no icon — matches the mock's flat "label over text" list. */
.nex-legal .nex-block {
    margin-bottom: var(--nex-space-lg);
}

.nex-legal .nex-block:last-child {
    margin-bottom: 0;
}

.nex-legal .nex-block-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.nex-legal .nex-block-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* Category/brand icon shown before an Experience company entry. Matches
   Social's 40px circular treatment instead of the 32px default shared with
   Classic/Editorial. */
.nex-legal .nex-timeline-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Smaller variant for the flat "ROLE · DATES" kicker rows (Vocational) —
   the 11px uppercase kicker text is too small to sit next to a 40px icon
   without the icon dominating the row, same issue as .nex-block-icon. */
.nex-legal .nex-timeline-icon-sm {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.nex-legal .nex-block-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nex-text-muted);
    margin: 0;
}

.nex-legal .nex-block-desc {
    font-size: 15px;
    line-height: 1.8;
    color: #2D2D2D;
}

.nex-legal .nex-read-more {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nex-primary);
    margin-top: 2px;
    cursor: pointer;
}

.nex-legal .nex-group-label,
.nex-legal .nex-timeline-group-label {
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--nex-text-muted);
    text-transform: uppercase;
    margin: var(--nex-space-md) 0 4px;
}

/* The row immediately under a group label (Key Facts/Attachments) shouldn't
   also add its own top padding on top of the label's bottom margin — that
   stacked spacing was reading as an oversized empty gap. */
.nex-legal .nex-group-label + .nex-achievement-row,
.nex-legal .nex-group-label + details.nex-details-item {
    padding-top: 0;
}

/* Legal had no badge pill at all — matches the reference Visual template's
   "Good time" badge (green dot + soft green pill, see .nex-badge-dot in
   experience-engine-tokens.css) rather than a Legal-only reinterpretation. */
.nex-legal .nex-badge {
    background: #E1F5EE;
    color: #085041;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.nex-legal table.nex-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--nex-space-sm);
}

.nex-legal table.nex-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--nex-text-muted);
    text-transform: uppercase;
    padding: var(--nex-space-sm) var(--nex-space-md) var(--nex-space-sm) 0;
    border: none;
    border-bottom: 2px solid #2D2D2D;
}

.nex-legal table.nex-table td {
    font-size: var(--nex-small);
    color: #2D2D2D;
    padding: var(--nex-space-sm) var(--nex-space-md) var(--nex-space-sm) 0;
    border: none;
    border-bottom: 1px solid #D7D0C4;
    vertical-align: top;
}

.nex-legal tr.nex-skill-detail-row td {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}


.nex-legal tr.nex-skill-detail-row + tr td {
    padding-top: var(--nex-space-md);
}

.nex-legal .nex-skill-detail-box {
    border: 1px solid #D7D0C4;
    border-left: 3px solid #2D2D2D;
    border-radius: 6px;
    padding: var(--nex-space-sm) var(--nex-space-md);
    margin: var(--nex-space-sm) 0 var(--nex-space-md);
}

.nex-legal .nex-skill-detail-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nex-text-muted);
    margin: 0 0 6px;
}

/* Category/level icon inline before a table row's first cell (Academic
   Qualifications) — matches Social's per-row icon, sized down to fit a
   compact table line instead of the 40px popup-level icon size. Also reused
   for InfoPack's group-label icons (Key Facts/Meetings/Attachments/etc,
   outside any table), so this isn't scoped to table.nex-table specifically. */
.nex-legal .nex-table-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
}

/* Field grids (nex-fields/nex-field) — reused by Qualification/Experience's
   structured Legal branch and by Skills/Languages/Contact — restyled as
   a lightweight report table row rather than a boxed grid. */
.nex-legal .nex-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--nex-space-lg);
    margin-top: var(--nex-space-sm);
}

.nex-legal .nex-field-label {
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--nex-text-muted);
    text-transform: uppercase;
    margin-bottom: 1px;
}

.nex-legal .nex-field-value {
    font-size: var(--nex-small);
    color: #2D2D2D;
}

/* Timeline entries (Vocational, Experience) — flat report rows, no dot/rail
   markers (none of the mock's entry lists carry a visual timeline). */
.nex-legal .nex-timeline-item {
    display: flex;
    gap: var(--nex-space-md);
}

.nex-legal .nex-timeline-rail {
    display: none;
}

.nex-legal .nex-timeline-content {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--nex-space-lg);
    margin-bottom: var(--nex-space-lg);
    border-bottom: 1px dotted #D7D0C4;
}

.nex-legal .nex-timeline-item:last-child .nex-timeline-content {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.nex-legal .nex-timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nex-space-md);
    flex-wrap: wrap;
}

.nex-legal .nex-timeline-title {
    font-size: 17px;
    font-weight: 500;
    color: #2D2D2D;
    margin: 0;
}

/* Vocational's combined "ROLE · DATES" kicker line — distinct from the
   plain .nex-timeline-title above so this doesn't bleed into Experience's
   company-name title, which keeps the larger default style. */
.nex-legal .nex-timeline-title-flat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nex-text-muted);
}

.nex-legal .nex-timeline-dates {
    font-size: 13px;
    color: var(--nex-text-muted);
    white-space: nowrap;
}

.nex-legal .nex-timeline-sub {
    font-size: 15px;
    color: #2D2D2D;
    margin: 2px 0 8px;
}

.nex-legal .nex-card-text {
    font-size: 15px;
    line-height: 1.8;
    color: #2D2D2D;
    margin: 0 0 4px;
}

/* Key achievements — title + clamped preview text + "Read more", dotted
   divider between entries (matches the mock's achievement-row). */
.nex-legal .nex-achievement-row {
    padding: 10px 0;
    border-bottom: 1px dotted #D7D0C4;
}

.nex-legal .nex-achievement-row:last-child {
    border-bottom: none;
}

.nex-legal .nex-achievement-row .nex-achievement-title {
    font-size: var(--nex-small);
    font-weight: 600;
    color: #2D2D2D;
    margin: 0 0 2px;
}

.nex-legal .nex-achievement-row .nex-card-text {
    font-size: var(--nex-small);
    line-height: 1.6;
    color: var(--nex-text-secondary);
    margin: 0;
}

.nex-legal .nex-timeline-date {
    flex: 0 0 140px;
    color: var(--nex-text-secondary);
    font-weight: 600;
}

/* Key facts / key achievements / references — native <details> restyled to
   read as clamped text with a "Read more" toggle, reusing the existing
   expand/collapse behaviour (no new JS). */
.nex-legal details.nex-details-item {
    padding: var(--nex-space-sm) 0;
    border-bottom: 1px dotted #D7D0C4;
}

.nex-legal details.nex-details-item:last-child {
    border-bottom: none;
}

.nex-legal details.nex-details-item summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--nex-small);
    font-weight: 600;
    color: #2D2D2D;
}

.nex-legal details.nex-details-item summary::-webkit-details-marker,
.nex-legal details.nex-details-item summary::marker {
    display: none;
    content: "";
}

/* Only show the "Read more" toggle when there's actually a description to
   reveal — an empty/title-only entry has nothing hidden behind it. */
.nex-legal details.nex-details-item:has(.nex-details-desc) summary::after {
    content: "Read more ⌄";
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nex-primary);
    margin-top: 2px;
}

.nex-legal details.nex-details-item:has(.nex-details-desc)[open] summary::after {
    content: "Show less ⌃";
}

.nex-legal details.nex-details-item:not(:has(.nex-details-desc)) summary {
    cursor: default;
}

.nex-legal details.nex-details-item .nex-details-desc {
    font-size: var(--nex-small);
    color: var(--nex-text-secondary);
    line-height: 1.7;
    margin-top: 6px;
}

.nex-legal .nex-footer {
    display: flex;
    justify-content: space-between;
    padding-top: var(--nex-space-lg);
    margin-top: var(--nex-space-lg);
    border-top: 1px solid #D7D0C4;
    color: var(--nex-text-muted);
    font-size: var(--nex-small);
}

.nex-legal .nex-fade-in {
    animation: nexLegalFade 200ms ease-in;
}

@keyframes nexLegalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 767px) {
    .nex-legal .nex-paper {
        padding: var(--nex-space-lg) var(--nex-space-md);
    }

    /* The dotted leader only reads well as a single-line "title ... 01"
       row — once a long title (e.g. "Vocational & Professional
       Qualification") wraps on a narrow screen, the dots have no clean
       line to sit on and end up crossing the wrapped text. Drop the
       leader and let the title wrap plainly; the page number (now
       reliably pinned to the top of the row, see align-items fix above)
       still gives the same "N ... 0N" reading without the collision. */
    .nex-legal .nex-section-card .title::after {
        display: none;
    }

    /* Bump the attachment row's preview/download buttons up to the same
       44px minimum touch target used for the popup's close/nav buttons —
       32px is too small to reliably tap on a phone. */
    .nex-legal .nex-doc-item {
        gap: 8px;
        padding: 8px 10px;
    }

    .nex-legal .nex-doc-actions {
        gap: 6px;
    }

    .nex-legal .nex-doc-btn {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    /* Academic Qualifications / Skills / Second Languages / Contact /
       Personal Licences all use a plain multi-column <table> — at popup
       width on a phone there's no good way to show 3-5 columns side by
       side (scrolling sideways to read a table proved unreliable and is
       poor mobile UX regardless). Instead, turn each row into its own
       stacked card: every cell becomes its own line, with a small label
       above it. Multi-column tables (Qualification/Skills/Languages) carry
       a data-label attribute per <td> that the label is read from; the
       simple two-column Field/Value-style tables (Contact Information,
       Social Network, Personal Licences) have no data-label since their
       first column already reads as the label for their second. */
    .nex-legal .nex-table-scroll {
        overflow-x: visible;
    }

    .nex-legal table.nex-table,
    .nex-legal table.nex-table thead,
    .nex-legal table.nex-table tbody,
    .nex-legal table.nex-table tr {
        display: block;
        width: 100%;
    }

    .nex-legal table.nex-table thead {
        display: none;
    }

    .nex-legal table.nex-table tr {
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid #D7D0C4;
    }

    .nex-legal table.nex-table tr:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .nex-legal table.nex-table td {
        display: block;
        width: 100%;
        border: none;
        padding: 4px 0;
        white-space: normal;
    }

    .nex-legal table.nex-table td[data-label]:empty {
        display: none;
    }

    .nex-legal table.nex-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        letter-spacing: .06em;
        color: var(--nex-text-muted);
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .nex-legal table.nex-table td:first-child:not([data-label]) {
        font-size: 11px;
        letter-spacing: .06em;
        color: var(--nex-text-muted);
        text-transform: uppercase;
        padding-bottom: 2px;
    }

    .nex-legal table.nex-table td:last-child:not([data-label]) {
        font-size: var(--nex-body);
        color: #2D2D2D;
    }
}

/* Document row (NexAttachmentItem) — used for actual file attachments,
   styled to match the formal paper-report look (square corners, muted
   border colour #D7D0C4 used throughout this template). */
.nex-legal .nex-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #D7D0C4;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--nex-white);
}

.nex-legal .nex-doc-item:last-child {
    margin-bottom: 0;
}

.nex-legal .nex-doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #D7D0C4;
    background: #F7F3EB;
    color: #2D2D2D;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

.nex-legal .nex-doc-title {
    flex: 1;
    min-width: 0;
    font-size: var(--nex-small);
    font-weight: 600;
    color: #2D2D2D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nex-legal .nex-doc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nex-legal .nex-doc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #D7D0C4;
    background: var(--nex-white);
    color: var(--nex-text-secondary);
    font-size: 13px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.nex-legal .nex-doc-btn:hover {
    background: #F7F3EB;
    color: #2D2D2D;
}

.nex-legal .nex-doc-btn-primary {
    border-color: var(--nex-primary);
    background: var(--nex-primary);
    color: var(--nex-primary-contrast);
}

.nex-legal .nex-doc-btn-primary:hover {
    background: #0B6667;
    color: var(--nex-primary-contrast);
}

/* NexPopup — Legal skin: a printed-report page, not a rounded dialog box.
   Square corners, top-aligned on the overlay, header rule + title carries
   the same running section number as its Table of Contents row (same CSS
   counter, read — not re-incremented — since the popup markup sits right
   after its own row inside .nex-sections). Fade only, no bounce. */
.nex-legal .nex-popup-backdrop {
    background: rgba(45, 45, 45, .6);
}

.nex-legal .nex-popup-wrap {
    align-items: flex-start;
    padding: 40px 24px;
    overflow-y: auto;
}

.nex-legal .nex-popup-dialog {
    width: 640px;
    max-width: 100%;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    animation: nexLegalPopupIn 200ms ease-in;
}

.nex-legal .nex-popup-banner {
    position: relative;
    padding: 32px 40px 20px;
    border-bottom: 2px solid #2D2D2D;
}

.nex-legal .nex-popup-header {
    position: absolute;
    top: 30px;
    right: 32px;
    padding: 0;
    width: auto;
}

.nex-legal .nex-popup-header span:empty {
    display: none;
}

.nex-legal .nex-popup-btn-icon {
    border-radius: 0;
    color: var(--nex-text-muted);
}

.nex-legal .nex-popup-btn-icon:hover {
    background: transparent;
    color: #2D2D2D;
}

.nex-legal .nex-popup-icon-wrap {
    justify-content: flex-start;
    padding: 0 0 var(--nex-space-sm);
}

.nex-legal .nex-popup-title-row {
    justify-content: flex-start;
    padding: 0;
    padding-right: 40px;
}

.nex-legal .nex-popup-title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    text-align: left;
    color: #2D2D2D;
}

.nex-legal .nex-popup-subtext {
    text-align: left;
    padding: 0;
    margin-top: 6px;
}

.nex-legal .nex-popup-body {
    padding: var(--nex-space-md) 40px 40px;
    /* .nex-popup-dialog is display:flex; flex-direction:column (see
       experience-engine-tokens.css) and this is one of its flex items.
       Flex items default to min-width:auto, refusing to shrink below their
       content's natural width — so a wide table inside .nex-table-scroll
       was forcing this whole flex item (and the dialog with it) to try to
       grow, instead of staying at the dialog's actual width and letting
       .nex-table-scroll's own overflow-x:auto contain + scroll the excess
       locally. That's why the scroll wrapper never actually scrolled. */
    min-width: 0;
}

@media (max-width: 767px) {
    .nex-legal .nex-popup-wrap {
        padding: 0;
    }

    .nex-legal .nex-popup-banner {
        padding: 24px 20px 16px;
    }

    .nex-legal .nex-popup-header {
        top: 22px;
        right: 16px;
    }

    .nex-legal .nex-popup-body {
        padding: var(--nex-space-md) 20px 32px;
    }
}

@keyframes nexLegalPopupIn {
    from { opacity: 0; }
    to { opacity: 1; }
}