/* ===========================================
   Declarations (НАЗК) — shared visual styles
   ===========================================
   Originally lived as scoped CSS inside
   Components/Pages/DeclarationsProfileV2.razor.css. Promoted to a global
   stylesheet so the same .ps-dc-* class names can be reused by both:
     • DeclarationsProfileV2 — standalone /declarations page
     • DeclarationsTabV2     — "Декларації" tab inside CompanyProfileV2

   Only the outer-page wrapper (.ps-dc) and the start-screen styles
   stay scoped to DeclarationsProfileV2 — the tab doesn't render those.
   =========================================== */

/* ---- Top bar (breadcrumb + actions) — page wrapper only ---- */
.ps-dc-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.ps-dc-crumbs {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    color: var(--muted);
    font: 400 12px/1.4 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

    .ps-dc-crumbs a {
        color: var(--muted);
        text-decoration: none;
    }

    .ps-dc-crumbs a:hover { color: var(--indigo-600); }

.ps-dc-sep { color: var(--border-2); }

.ps-dc-cur {
    color: var(--ink);
    font-weight: 500;
}

.ps-dc-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
}

.ps-dc-quiet-link {
    color: var(--muted);
    text-decoration: none;
    font: 500 13px/1 var(--font-sans);
}

    .ps-dc-quiet-link:hover { color: var(--indigo-600); }

.ps-dc-quiet-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--white);
    color: var(--body);
    cursor: pointer;
    font: 500 14px/1 var(--font-sans);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

    .ps-dc-quiet-btn:hover {
        background: var(--indigo-50);
        color: var(--indigo-800);
        border-color: var(--indigo-200);
    }

/* ---- Loading / empty ---- */
.ps-dc-loading,
.ps-dc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-12) var(--s-5);
    text-align: center;
    color: var(--muted);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
}

.ps-dc-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--surface);
    border-top-color: var(--indigo-600);
    border-radius: 50%;
    animation: ps-dc-spin 0.7s linear infinite;
}

.ps-dc-spinner--sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

@keyframes ps-dc-spin { to { transform: rotate(360deg); } }

.ps-dc-empty h3 {
    margin: 0;
    color: var(--ink);
    font: 600 18px/1.3 var(--font-sans);
}

.ps-dc-empty p {
    margin: 0;
    max-width: 56ch;
    font: 400 14px/1.5 var(--font-sans);
}

.ps-dc-back {
    margin-top: var(--s-2);
    color: var(--indigo-600);
    text-decoration: none;
    font: 500 13px/1 var(--font-sans);
}

    .ps-dc-back:hover { color: var(--indigo-800); text-decoration: underline; }

/* ---- Two-column body ---- */
.ps-dc-body {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
}

@media (max-width: 1100px) {
    .ps-dc-body {
        grid-template-columns: 1fr;
    }
}

/* ---- LEFT: list ---- */
.ps-dc-list {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 160px);
}

.ps-dc-list-h {
    padding: var(--s-3);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.ps-dc-list-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface);
    padding: 3px;
    border-radius: var(--r-md);
}

.ps-dc-seg {
    flex: 1;
    padding: 5px 8px;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: var(--muted);
    font: 500 12px/1 var(--font-sans);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .ps-dc-seg b {
        color: var(--muted);
        font: 600 11px/1 var(--font-mono);
        font-feature-settings: var(--font-feature-tnum);
    }

    .ps-dc-seg:hover { color: var(--ink); }

.ps-dc-seg--active {
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

    .ps-dc-seg--active b { color: var(--indigo-600); }

.ps-dc-list-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--muted);
    font: 400 11px/1 var(--font-mono);
    padding: 2px 4px;
}

    .ps-dc-list-sort::before {
        content: "Сорт:";
    }

.ps-dc-sort {
    padding: 2px 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    border-radius: var(--r-sm);
    font: 500 11px/1 var(--font-mono);
    cursor: pointer;
}

.ps-dc-sort--active {
    background: var(--indigo-50);
    color: var(--indigo-800);
    border-color: var(--indigo-200);
}

.ps-dc-list-body {
    flex: 1;
    overflow-y: auto;
}

    .ps-dc-list-body::-webkit-scrollbar { width: 6px; }
    .ps-dc-list-body::-webkit-scrollbar-thumb {
        background: var(--border-2);
        border-radius: 3px;
    }

.ps-dc-year-h {
    /* Sticky to the top of the scrolling .ps-dc-list-body so the group
       header (e.g. "2018 · 7 декларацій") stays visible while the user
       scrolls within that year's records. */
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--s-2) var(--s-4);
    background: var(--paper);
    color: var(--muted);
    font: 500 11px/1.4 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-shadow: 0 1px 0 0 var(--border);
}

.ps-dc-item {
    /* 3-col × 3-row grid:
         row 1: [year]  [name ......................... income]
         row 2: [    ]  [position + relative tag ...... match-pill]
         row 3: [    ]  [employer ЄДРПОУ ............. ]

       Year-chip spans all three rows so it stays glued to the row
       top-left. Income + match-pill sit on rows 1 + 2 to the right —
       row 3 is intentionally empty in that column so the EDRPOU line
       reads as a free-floating caption under the position. */
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--s-3);
    row-gap: 4px;
    align-items: baseline;
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

    .ps-dc-item:hover { background: var(--paper); }

.ps-dc-item--active {
    /* Active row — indigo wash + accent stripe on the left edge +
       subtle outer drop-shadow so the selection reads at a glance even
       when several rows are visible in the scroll viewport. The inset
       box-shadow gives a 3-px left accent without shifting the row's
       content (a real border-left would push the grid columns). */
    background: var(--indigo-50);
    box-shadow:
        inset 3px 0 0 0 var(--indigo-600),
        0 1px 2px rgba(91, 87, 219, 0.10);
}

    .ps-dc-item--active:hover {
        background: var(--indigo-50);
    }

.ps-dc-item--rel {
    background: rgba(184, 110, 15, 0.02);
}

.ps-dc-yr {
    grid-column: 1;
    /* Spans all rows of the parent .ps-dc-item grid (currently 3 rows;
       4 in expanded view). Modifiers extend the row count, so the
       chip stays at the top-left regardless. */
    grid-row: 1 / -1;
    align-self: start;
    color: var(--muted);
    font: 500 11px/1.6 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
    background: var(--surface);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    text-align: center;
    margin-top: 2px;
}

/* Row 1, col 2 — the headline (ПІБ). Single line + ellipsis lets a
   long name share the row with the income value on the right. */
.ps-dc-item-name {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    color: var(--ink);
    font: 500 13px/1.4 var(--font-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Row 2, col 2 — secondary line (position · workplace · region) +
   optional "родич" tag inline. 2-line clamp so unusually long
   positions don't blow the row height past two lines. */
.ps-dc-item-sub {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: break-word;
    color: var(--muted);
    font: 400 11px/1.3 var(--font-sans);
}

/* Row 3, col 2 — employer ЄДРПОУ caption. Clickable so users can
   jump straight to the employer's company card in a new tab. */
.ps-dc-item-edrpou {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--muted);
    font: 500 11px/1.3 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
    text-decoration: none;
}

    .ps-dc-item-edrpou:hover {
        color: var(--indigo-800);
    }

    .ps-dc-item-edrpou .ps-dc-item-edrpou-ext {
        font-family: var(--font-sans);
        color: var(--indigo-600);
    }

.ps-dc-rel-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    background: var(--amber-bg);
    color: var(--amber);
    border-radius: var(--r-sm);
    font: 500 10px/1.4 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Row 1, col 3 — income value, right-aligned, baseline with the name. */
.ps-dc-inc {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    color: var(--ink);
    font: 600 13px/1 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

/* Row 2, col 3 — match-pill, hugs its text content. */
.ps-dc-match {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    width: max-content;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font: 500 10px/1.4 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ps-dc-match--self    { background: var(--indigo-50);  color: var(--indigo-800); }
.ps-dc-match--rel     { background: var(--amber-bg);   color: var(--amber); }
.ps-dc-match--corp    { background: var(--forest-bg);  color: var(--forest); }
.ps-dc-match--neutral { background: var(--surface);    color: var(--muted); }

/* ---- RIGHT: detail ---- */
.ps-dc-detail {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    min-height: 240px;
}

.ps-dc-detail-empty {
    text-align: center;
    color: var(--muted);
    padding: var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

    .ps-dc-detail-empty h3 {
        margin: 0;
        color: var(--ink);
        font: 600 16px/1.3 var(--font-sans);
    }

    .ps-dc-detail-empty p {
        margin: 0;
        max-width: 48ch;
        font: 400 13px/1.5 var(--font-sans);
        align-self: center;
    }

.ps-dc-detail-h {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}

.ps-dc-detail-h-text {
    flex: 1;
    min-width: 0;
}

/* Eyebrow + submitted/updated dates.
   Was inline-flex on one row → on narrow viewports the dates string
   ("подано dd.mm.yyyy · оновлено dd.mm.yyyy") was getting clipped
   on the right. Now the dates render on their OWN line below the
   eyebrow chip, so the column can be as narrow as 320 px without
   losing the audit trail. */
.ps-dc-eyebrow-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ps-dc-eyebrow-dates {
    color: var(--muted);
    font: 400 11px/1.4 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
    display: block;
    word-spacing: 0;
}

    .ps-dc-eyebrow-dates b {
        color: var(--body);
        font-weight: 500;
    }

.ps-dc-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--indigo-50);
    color: var(--indigo-800);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ps-dc-name {
    margin: var(--s-2) 0 var(--s-2);
    font: 600 28px/1.2 var(--font-sans);
    color: var(--ink);
    word-break: break-word;
}

.ps-dc-meta {
    color: var(--muted);
    font: 400 13px/1.5 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

.ps-dc-detail-h-actions {
    display: inline-flex;
    gap: var(--s-2);
}

.ps-dc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--white);
    color: var(--body);
    text-decoration: none;
    font: 500 14px/1 var(--font-sans);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

    .ps-dc-icon-btn:hover {
        background: var(--indigo-50);
        color: var(--indigo-800);
        border-color: var(--indigo-200);
    }

/* ---- Income hero row (hero + 2 flag cards, per handoff slide 09) ---- */
.ps-dc-inc-row {
    display: grid;
    /* income card a touch wider (1.2fr) so the headline has breathing room;
       minmax(0,…) lets every track shrink instead of forcing overflow. */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-3);
}

@media (max-width: 1100px) {
    .ps-dc-inc-row {
        grid-template-columns: 1fr;
    }
}

/* Income hero — primary block, ~30% of the detail width. Soft indigo
   gradient signals it's the headline metric on the screen. */
.ps-dc-inc-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-5);
    background: linear-gradient(135deg, var(--indigo-50) 0%, var(--white) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    /* min-width:0 is critical inside the grid — without it the card refuses
       to shrink and its content bleeds into the neighbouring flag card.
       overflow:hidden is the hard guard: content is clipped at the card
       edge, never overlapping "Сумісництво". */
    min-width: 0;
    overflow: hidden;
}

.ps-dc-inc-main {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.ps-dc-inc-val {
    /* Only the digits live here (≤ "999 999" full, or "2,34" abbreviated),
       so the headline stays narrow. clamp 32–48 px keeps it from spilling
       on tighter detail widths. */
    display: flex;
    align-items: baseline;
    gap: 6px;
    font: 600 clamp(32px, 3vw, 48px)/1.1 var(--font-sans);
    font-feature-settings: var(--font-feature-tnum);
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
    min-width: 0;
}

    /* The big digit group — ellipsis as a last-resort guard so an unexpected
       width clips cleanly inside the card instead of overlapping a sibling. */
    .ps-dc-inc-num {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* unit + ₴ suffix — half the digit size, muted; never the wide part. */
    .ps-dc-inc-val small {
        flex: none;
        font-size: 0.5em;
        font-weight: 500;
        line-height: 1;
        color: var(--muted);
        margin-left: 2px;
    }

/* Exact-sum caption shown beneath an abbreviated hero (Variant C). */
.ps-dc-inc-exact {
    color: var(--muted);
    font: 500 12px/1.3 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
    letter-spacing: 0;
}

    .ps-dc-inc-exact-lbl {
        margin-left: 4px;
        opacity: 0.7;
        text-transform: lowercase;
    }

.ps-dc-inc-trend {
    color: var(--muted);
    font: 400 12px/1.4 var(--font-sans);
}

    .ps-dc-inc-trend--down { color: var(--coral); }
    .ps-dc-inc-trend--up   { color: var(--forest); }

    .ps-dc-inc-trend b {
        font-feature-settings: var(--font-feature-tnum);
        font-weight: 600;
    }

/* ---- Flag cards (Сумісництво / Корупція, etc.) ---- */
.ps-dc-flag {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.ps-dc-flag-h {
    color: var(--muted);
    font: 500 10px/1.3 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ps-dc-flag-val {
    color: var(--ink);
    font: 600 15px/1.3 var(--font-sans);
}

.ps-dc-flag-sub {
    color: var(--muted);
    font: 400 12px/1.4 var(--font-sans);
}

.ps-dc-flag--amber  { background: var(--amber-bg);  border-color: var(--amber-border); }
.ps-dc-flag--coral  { background: var(--coral-bg);  border-color: var(--coral-border); }
.ps-dc-flag--forest { background: var(--forest-bg); border-color: var(--forest-border); }

    .ps-dc-flag--amber .ps-dc-flag-val  { color: var(--amber); }
    .ps-dc-flag--coral .ps-dc-flag-val  { color: var(--coral); }
    .ps-dc-flag--forest .ps-dc-flag-val { color: var(--forest); }

/* Audit-trail link inside a flag card — surfaces a "verify on НАЗК"
   anchor when the flag's value is heavy enough to warrant
   independent confirmation (e.g., a corruption conviction). */
.ps-dc-flag-link {
    margin-top: var(--s-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--coral);
    text-decoration: none;
    font: 500 11px/1.4 var(--font-sans);
    border: 1px solid var(--coral-border);
    border-radius: var(--r-sm);
    padding: 2px 8px;
    background: var(--white);
    align-self: flex-start;
    width: max-content;
}

    .ps-dc-flag-link:hover {
        background: var(--coral-bg);
    }

    .ps-dc-flag-link .ps-dc-flag-link-ext {
        font-family: var(--font-sans);
        color: var(--coral);
    }

/* ---- Sections (Incomes + Family) ---- */
.ps-dc-section {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.ps-dc-sec-h {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--border);
}

    .ps-dc-sec-h h4 {
        margin: 0;
        font: 600 14px/1.3 var(--font-sans);
        color: var(--ink);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        display: inline-flex;
        align-items: baseline;
        gap: var(--s-2);
    }

    .ps-dc-sec-h h4 .mono {
        color: var(--muted);
        font: 500 13px/1 var(--font-mono);
        font-feature-settings: var(--font-feature-tnum);
        text-transform: none;
        letter-spacing: 0;
    }

/* Incomes */
.ps-dc-incomes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

    .ps-dc-incomes li {
        display: grid;
        grid-template-columns: 180px 1fr 120px 110px;
        align-items: center;
        gap: var(--s-3);
        padding: var(--s-2) var(--s-3);
        background: var(--paper);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
    }

@media (max-width: 900px) {
    .ps-dc-incomes li {
        grid-template-columns: 1fr 80px;
    }
        .ps-dc-incomes .ps-dc-i-src,
        .ps-dc-incomes .ps-dc-i-bar { display: none; }
}

.ps-dc-i-cat {
    /* Allow 2-line wrap instead of ellipsis — categories like "Інший
       · ПАТ Хмельницькобленерго" need both segments visible. Break on
       word boundaries so we don't slice mid-letter. */
    color: var(--ink);
    font: 500 13px/1.3 var(--font-sans);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: normal;
}

.ps-dc-i-src {
    color: var(--muted);
    font: 400 12px/1.3 var(--font-sans);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Modifier when the source cell contains a link with stacked name +
   ЄДРПОУ caption — overrides the 2-line clamp so both lines render. */
.ps-dc-i-src--linked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Amber warning when an income row carries no ЄДРПОУ source — a
   declarations red-flag worth surfacing rather than hiding. */
.ps-dc-i-src--warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--amber);
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-radius: var(--r-sm);
    padding: 2px 8px;
    font: 500 11px/1.3 var(--font-sans);
    align-self: flex-start;
    -webkit-line-clamp: unset;
    overflow: visible;
    width: max-content;
}

/* ---- Anomalies section (incomes with no source) ----
   Pulled out of the regular Доходи list into its own coral-tinted
   block at the bottom of the detail panel. Surfaces incomplete /
   suspicious declarations rather than letting them silently mix
   with normal rows. */
.ps-dc-anom {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    background: var(--coral-bg);
    border: 1px solid var(--coral-border);
    border-radius: var(--r-lg);
}

.ps-dc-anom-h {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    color: var(--coral);
    font: 600 12px/1.3 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .ps-dc-anom-h .mono {
        color: var(--coral);
        font-weight: 500;
        background: var(--white);
        padding: 1px 6px;
        border-radius: var(--r-sm);
        font-feature-settings: var(--font-feature-tnum);
    }

.ps-dc-anom-sub {
    color: var(--coral);
    font: 400 12px/1.5 var(--font-sans);
    opacity: 0.85;
}

.ps-dc-anom-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .ps-dc-anom-list li {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: var(--s-3);
        padding: 4px var(--s-3);
        background: var(--white);
        border: 1px solid var(--coral-border);
        border-radius: var(--r-sm);
        font: 400 12px/1.4 var(--font-sans);
        color: var(--body);
    }

    .ps-dc-anom-list li .mono {
        color: var(--ink);
        font-feature-settings: var(--font-feature-tnum);
    }

/* Uniform group heading — ALWAYS rendered for every category, even
   single-row ones. Pattern: heading + nested sub-list, no flat-row
   variant. Keeps the visual rhythm predictable. */
.ps-dc-i-group {
    display: contents;
}

.ps-dc-i-group-h {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-top: 4px;
}

.ps-dc-i-group-cat {
    color: var(--ink);
    font: 500 13px/1.3 var(--font-sans);
}

.ps-dc-i-group-count {
    color: var(--muted);
    font: 500 11px/1 var(--font-mono);
    background: var(--surface);
    border-radius: var(--r-sm);
    padding: 2px 6px;
    margin-left: var(--s-2);
}

.ps-dc-i-group-total {
    color: var(--ink);
    font: 600 13px/1 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

.ps-dc-i-group-list {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 2px solid var(--surface);
}

    .ps-dc-i-group-list li {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: var(--s-3);
        padding: 4px var(--s-3);
        font: 400 12px/1.4 var(--font-sans);
        color: var(--muted);
    }

    .ps-dc-i-group-list li a {
        color: var(--muted);
        text-decoration: none;
    }

    .ps-dc-i-group-list li a:hover {
        color: var(--indigo-800);
    }

    .ps-dc-i-group-list li .mono {
        color: var(--ink);
        font-feature-settings: var(--font-feature-tnum);
    }

/* ---- View toggle (compact / expanded) above the list header ---- */
.ps-dc-view {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--surface);
    border-radius: var(--r-md);
    padding: 3px;
}

.ps-dc-view-btn {
    padding: 4px 10px;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: var(--muted);
    font: 500 11px/1 var(--font-sans);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

    .ps-dc-view-btn:hover { color: var(--ink); }

    .ps-dc-view-btn--active {
        background: var(--white);
        color: var(--ink);
        box-shadow: var(--shadow-sm);
    }

/* Expanded list mode — extra meta rows under the position line.
   .ps-dc-yr already spans all rows via `grid-row: 1 / -1`, so adding
   row(s) here just grows the year-chip's span automatically. */
.ps-dc-item--expanded {
    grid-template-rows: auto auto auto auto;
}

.ps-dc-item-meta-row {
    grid-column: 2;
    grid-row: 4;
    color: var(--muted);
    font: 400 11px/1.3 var(--font-sans);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

    .ps-dc-item-meta-row b {
        color: var(--ink);
        font-weight: 500;
    }

.ps-dc-i-bar {
    position: relative;
    height: 6px;
    background: var(--surface);
    border-radius: var(--r-pill);
    overflow: hidden;
}

    .ps-dc-i-bar > span {
        display: block;
        height: 100%;
        background: var(--indigo-600);
        border-radius: var(--r-pill);
    }

.ps-dc-i-val {
    color: var(--ink);
    font: 600 13px/1 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
    text-align: right;
}

/* Wealth grid (5 cards) */
.ps-dc-wealth {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-2);
}

@media (max-width: 1100px) { .ps-dc-wealth { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .ps-dc-wealth { grid-template-columns: repeat(2, 1fr); } }

.ps-dc-wcard {
    /* Clickable when the underlying full payload has a populated array
       for that wealth type. The .ps-dc-wcard--dim modifier (added when
       count == 0) drops the affordance back to a plain stat tile. */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--s-3);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

    .ps-dc-wcard:hover {
        border-color: var(--indigo-200);
        background: var(--white);
    }

    .ps-dc-wcard:focus-visible {
        outline: none;
        border-color: var(--indigo-600);
        box-shadow: var(--shadow-glow);
    }

.ps-dc-wcard--active {
    background: var(--white);
    border-color: var(--indigo-600);
    box-shadow: var(--shadow-sm);
}

.ps-dc-wcard--dim {
    /* Zero-count cards: muted look, can't be activated (the disabled
       attribute on the <button> blocks the click; opacity makes the
       affordance obvious). */
    cursor: default;
    opacity: 0.55;
}

    .ps-dc-wcard--dim:hover {
        border-color: var(--border);
        background: var(--paper);
    }

.ps-dc-wcard-h {
    color: var(--muted);
    font: 500 10px/1.3 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ps-dc-wcard-val {
    color: var(--ink);
    font: 600 26px/1 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

.ps-dc-wcard-sub {
    color: var(--muted);
    font: 400 11px/1.3 var(--font-sans);
}

.ps-dc-dim { color: var(--muted); }

/* Family */
.ps-dc-family {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
}

@media (max-width: 720px) {
    .ps-dc-family { grid-template-columns: 1fr; }
}

.ps-dc-family li {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Family card — clickable when the relative is also in the search
   results (we can pivot to their declarations); plain row otherwise. */
.ps-dc-fam-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-2) var(--s-3);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

    .ps-dc-fam-card:hover {
        border-color: var(--indigo-200);
        background: var(--white);
    }

    .ps-dc-fam-card:focus-visible {
        outline: none;
        border-color: var(--indigo-600);
        box-shadow: var(--shadow-glow);
    }

.ps-dc-fam-card--static {
    cursor: default;
}

    .ps-dc-fam-card--static:hover {
        border-color: var(--border);
        background: var(--paper);
    }

/* ---- Wealth breakdown panel (rendered when a wcard is clicked) ---- */
.ps-dc-wealth-detail {
    background: var(--white);
    border: 1px solid var(--indigo-200);
    border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.ps-dc-wd-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
}

    .ps-dc-wd-h h4 {
        margin: 0;
        font: 600 14px/1.3 var(--font-sans);
        color: var(--ink);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .ps-dc-wd-h .mono {
        color: var(--muted);
        font: 500 12px/1 var(--font-mono);
        font-feature-settings: var(--font-feature-tnum);
    }

.ps-dc-wd-close {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: 500 18px/1 var(--font-sans);
    width: 24px;
    height: 24px;
    border-radius: var(--r-sm);
}

    .ps-dc-wd-close:hover {
        background: var(--surface);
        color: var(--ink);
    }

.ps-dc-wd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-2);
}

    .ps-dc-wd-list li {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: var(--s-3);
        background: var(--paper);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
    }

    .ps-dc-wd-list li b {
        color: var(--ink);
        font: 600 13px/1.3 var(--font-sans);
        word-break: break-word;
    }

/* Org-link badge — used to render "Назва компанії" + small mono
   "ЄДРПОУ XXXXXXXX" + external-link arrow, with the entire block
   acting as an anchor to /company/{edrpou} (opens new tab).

   Used across:
     • Incomes table (source row clickable when SourceCode is present)
     • Wealth-detail CorporateRights cards (CompanyName)
     • Wealth-detail Securities cards (IssuerName)
*/
.ps-dc-org-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    transition: color 0.12s ease;
}

    .ps-dc-org-link:hover .ps-dc-org-name { color: var(--indigo-800); }
    .ps-dc-org-link:hover .ps-dc-org-ext  { transform: translate(1px, -1px); }

.ps-dc-org-name {
    color: var(--ink);
    font: 500 13px/1.3 var(--font-sans);
    word-break: break-word;
}

.ps-dc-org-name--big {
    font: 600 14px/1.3 var(--font-sans);
}

.ps-dc-org-meta {
    color: var(--muted);
    font: 500 11px/1.3 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.ps-dc-org-ext {
    color: var(--indigo-600);
    font-family: var(--font-sans);
    transition: transform 0.12s ease;
}

/* Per-record field list inside a wealth-detail card — replaces the
   single-line subtitle so we can surface 4–5 facts (тип / площа /
   адреса / частка / період) per spec without truncation. */
.ps-dc-wd-fields {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--s-2);
}

    .ps-dc-wd-fields dt {
        color: var(--muted);
        font: 500 11px/1.5 var(--font-mono);
        font-feature-settings: var(--font-feature-tnum);
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .ps-dc-wd-fields dd {
        margin: 0;
        color: var(--body);
        font: 400 12px/1.5 var(--font-sans);
        word-break: break-word;
    }

.ps-dc-wd-empty {
    color: var(--muted);
    font: 400 13px/1.5 var(--font-sans);
    padding: var(--s-3);
    text-align: center;
}

.ps-dc-fam-av {
    /* Background colour is injected per-name via inline style — see
       AvatarStyle() in the razor code-behind. Deterministic from a FNV
       hash of the full name, so the same person renders with the same
       chip across the whole screen (useful when the same surname
       repeats across spouse + parent + child). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--indigo-600); /* fallback if inline style missing */
    color: var(--white);
    font: 600 11px/1 var(--font-sans);
    flex-shrink: 0;
}

.ps-dc-fam-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .ps-dc-fam-info b {
        color: var(--ink);
        font: 500 13px/1.3 var(--font-sans);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ps-dc-fam-info small {
        color: var(--muted);
        font: 400 11px/1.3 var(--font-sans);
    }

/* Inline-loading row */
.ps-dc-loading-inline {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    color: var(--muted);
    font: 400 13px/1.4 var(--font-sans);
    background: var(--paper);
    border: 1px dashed var(--border-2);
    border-radius: var(--r-md);
}

/* ===========================================
   Entity Resolution — cluster cards, confidence
   badge, drill-in popover, family split
   =========================================== */

/* ---- Cluster card (one block per resolved person) ---- */
.ps-cl {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--white);
    margin: var(--s-2) var(--s-3);
    overflow: hidden;
}

.ps-cl.is-confirmed { border-color: var(--forest-border); }
.ps-cl.is-probable,
.ps-cl.is-uncertain { border-color: var(--amber-border); }
.ps-cl.is-separate { border-color: var(--border); }

.ps-cl-h {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border-bottom: 1px solid var(--border);
    background: var(--paper);
}

.ps-cl.is-confirmed .ps-cl-h { background: var(--forest-bg); }
.ps-cl.is-probable .ps-cl-h,
.ps-cl.is-uncertain .ps-cl-h { background: var(--amber-bg); }

.ps-cl-av {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 12px/1 var(--font-sans);
    box-sizing: border-box;
}

.ps-cl-id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ps-cl-name-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    min-width: 0;
}

.ps-cl-name {
    color: var(--ink);
    font: 600 14px/1.3 var(--font-sans);
    /* Wrap up to 2 lines instead of hard-truncating — full ПІБ must stay
       readable ("Ткаченко Сергій Михайлович", not "Ткаченк…"). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    min-width: 0;
}

.ps-cl-meta-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    min-width: 0;
}

.ps-cl-rel-tag {
    font: 500 10px/1 var(--font-mono);
    color: var(--amber);
    background: var(--white);
    border: 1px solid var(--amber-border);
    padding: 2px 5px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ps-cl-meta {
    color: var(--muted);
    font: 400 11px/1.4 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

.ps-cl-actions {
    flex: 0 0 auto;
    display: inline-flex;
    gap: var(--s-2);
}

.ps-cl-btn {
    border: 1px solid var(--border-2);
    background: var(--white);
    border-radius: var(--r-md);
    padding: 6px 12px;
    font: 500 12px/1 var(--font-sans);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .ps-cl-btn:disabled { opacity: 0.5; cursor: default; }

.ps-cl-btn--confirm { color: var(--forest); border-color: var(--forest-border); }
    .ps-cl-btn--confirm:hover:not(:disabled) { background: var(--forest-bg); }

.ps-cl-btn--exclude { color: var(--coral); border-color: var(--coral-border); }
    .ps-cl-btn--exclude:hover:not(:disabled) { background: var(--coral-bg); }

.ps-cl-children { padding: 2px 0; }

.ps-dc-cluster-empty {
    padding: var(--s-6) var(--s-4);
    text-align: center;
    color: var(--muted);
    font: 400 13px/1.5 var(--font-sans);
}

/* ---- Confidence badge + drill-in popover ---- */
.ps-cb {
    position: relative;
    display: inline-flex;
}

.ps-cb-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border-2);
    background: var(--white);
    border-radius: var(--r-pill);
    padding: 3px 9px;
    font: 500 11px/1 var(--font-sans);
    cursor: pointer;
    transition: filter 0.12s ease;
}

    .ps-cb-badge:hover { filter: brightness(0.97); }

.ps-cb-badge--static { cursor: default; }
    .ps-cb-badge--static:hover { filter: none; }

.ps-cb-icon { font-size: 11px; }

.ps-cb-score {
    font: 600 11px/1 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

.ps-cb.is-confirmed .ps-cb-badge { color: var(--forest); border-color: var(--forest-border); background: var(--forest-bg); }
.ps-cb.is-probable .ps-cb-badge,
.ps-cb.is-uncertain .ps-cb-badge { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }
.ps-cb.is-separate .ps-cb-badge { color: var(--muted); border-color: var(--border-2); background: var(--surface); }

.ps-cb-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    width: 320px;
    max-width: 84vw;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--s-3);
    text-align: left;
}

.ps-cb-pop-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-2);
    font: 600 13px/1.3 var(--font-sans);
    color: var(--ink);
    margin-bottom: 6px;
}

.ps-cb-pop-score {
    color: var(--muted);
    font: 600 12px/1 var(--font-mono);
    white-space: nowrap;
}

.ps-cb-pop-src {
    font: 500 11px/1.3 var(--font-sans);
    color: var(--forest);
    background: var(--forest-bg);
    border-radius: var(--r-sm);
    padding: 4px 8px;
    margin-bottom: 8px;
}

.ps-cb-crit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ps-cb-crit li {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 8px;
        align-items: baseline;
        padding-bottom: 5px;
        border-bottom: 1px dashed var(--border);
    }

        .ps-cb-crit li:last-child { border-bottom: none; padding-bottom: 0; }

.ps-cb-crit-mark {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    font-size: 12px;
    font-weight: 700;
}

.ps-cb-crit li.is-met .ps-cb-crit-mark { color: var(--forest); }
.ps-cb-crit li.is-miss .ps-cb-crit-mark { color: var(--border-2); }

.ps-cb-crit-label {
    grid-column: 2;
    grid-row: 1;
    font: 500 12px/1.3 var(--font-sans);
    color: var(--ink);
}

.ps-cb-crit-detail {
    grid-column: 2;
    grid-row: 2;
    font: 400 11px/1.3 var(--font-sans);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-cb-crit-pts {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
    font: 600 11px/1 var(--font-mono);
    color: var(--muted);
    font-feature-settings: var(--font-feature-tnum);
}

.ps-cb-crit li.is-met .ps-cb-crit-pts { color: var(--forest); }

.ps-cb-report {
    margin-top: 10px;
    width: 100%;
    border: 1px solid var(--indigo-200);
    background: var(--indigo-50);
    color: var(--indigo-600);
    border-radius: var(--r-md);
    padding: 8px 10px;
    font: 500 12px/1 var(--font-sans);
    cursor: pointer;
    transition: background 0.12s ease;
}

    .ps-cb-report:hover { background: var(--indigo-100); }

/* ---- Status filter row (Усі / ✓ Підтверджена / ⚠ Ймовірні / ? Окремі) ---- */
.ps-dc-status-tabs .ps-dc-seg--status-confirmed.ps-dc-seg--active { color: var(--forest); }
.ps-dc-status-tabs .ps-dc-seg--status-probable.ps-dc-seg--active { color: var(--amber); }

/* ---- Family split (Підтверджені vs Можливі родичі) ---- */
.ps-dc-fam-group-h {
    margin: var(--s-3) 0 var(--s-2);
    font: 600 11px/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

    .ps-dc-fam-group-h:first-child { margin-top: 0; }

/* Outlined avatar marks a *possible* (unconfirmed) relative — the inline
   style supplies the colour for border + text; background stays light. */
.ps-dc-fam-av--outline {
    box-sizing: border-box;
}

/* ===========================================
   Identity Resolution UX (slide 22)
   PersonPicker · picked-person verdict list · drill-in
   =========================================== */

/* ---- Крок 01: PersonPicker ---- */
.ps-pp { width: 100%; max-width: 760px; margin: var(--s-4) auto; }

.ps-pp-h { margin-bottom: var(--s-4); }

.ps-pp-eyebrow {
    display: block;
    color: var(--muted);
    font: 500 11px/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ps-pp-title { color: var(--ink); font: 600 18px/1.35 var(--font-sans); margin: 0; }

.ps-pp-list { display: flex; flex-direction: column; gap: var(--s-3); }

.ps-pp-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    text-align: left;
    padding: var(--s-4);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

    .ps-pp-card:hover { border-color: var(--indigo-200); box-shadow: var(--shadow-sm); }

.ps-pp-card.is-confirmed { border-left: 3px solid var(--forest); }
.ps-pp-card.is-probable { border-left: 3px solid var(--amber); }
.ps-pp-card.is-uncertain { border-left: 3px solid var(--border-2); }
.ps-pp-card--other { border-style: dashed; background: var(--paper); }

/* Section headers (Кандидати / Однофамільці) */
.ps-pp-section-h {
    margin: var(--s-4) 0 var(--s-2);
    color: var(--muted);
    font: 600 11px/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .ps-pp-section-h:first-of-type { margin-top: 0; }

.ps-pp-av {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 14px/1 var(--font-sans);
    box-sizing: border-box;
}

.ps-pp-av--muted { background: var(--surface); color: var(--muted); border: 2px dashed var(--border-2); }
.ps-pp-av--sm { width: 30px; height: 30px; font-size: 11px; }

.ps-pp-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.ps-pp-name {
    color: var(--ink); font: 600 15px/1.3 var(--font-sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ps-pp-sub { color: var(--body); font: 400 13px/1.35 var(--font-sans); }

.ps-pp-meta {
    color: var(--muted); font: 400 11px/1.4 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

.ps-pp-conf { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 200px; text-align: right; cursor: help; }
.ps-pp-conf-label { color: var(--muted); font: 500 10px/1 var(--font-mono); letter-spacing: 0.05em; }
.ps-pp-conf-score { font: 700 20px/1 var(--font-sans); color: var(--ink); }

/* Identity-resolution similarity — explains «88% of what» (profile match,
   NOT a risk score). Eyebrow + category word (big) + dots + % (small) + sub. */
.ps-pp-sim-eyebrow { color: var(--muted); font: 500 9px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ps-pp-sim-info { opacity: 0.6; }
.ps-pp-sim-cat { font: 700 14px/1.2 var(--font-sans); }
.ps-pp-sim-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 1px; }
.ps-pp-sim-dots { font-size: 9px; letter-spacing: 1px; }
.ps-pp-sim-score { font: 600 13px/1 var(--font-mono); color: var(--muted); font-feature-settings: var(--font-feature-tnum); }
.ps-pp-sim-sub { font: 400 10px/1.3 var(--font-sans); color: var(--muted); }
.ps-pp-sim-cat--high { color: var(--forest); }
.ps-pp-sim-cat--mid  { color: var(--amber); }
.ps-pp-sim-cat--low  { color: var(--coral); }

/* Confidence label + score color per status:
   ≥95 forest · 65–94 amber · 40–64 gray · <40 muted */
.ps-pp-card.is-confirmed .ps-pp-conf-score,
.ps-pp-card.is-confirmed .ps-pp-conf-label { color: var(--forest); }
.ps-pp-card.is-probable .ps-pp-conf-score,
.ps-pp-card.is-probable .ps-pp-conf-label { color: var(--amber); }
.ps-pp-card.is-uncertain .ps-pp-conf-score,
.ps-pp-card.is-uncertain .ps-pp-conf-label { color: var(--body); }
.ps-pp-conf-score--muted { color: var(--muted); font-size: 16px; }

.ps-pp-others { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) var(--s-3); }

.ps-pp-suboption {
    display: flex; align-items: center; gap: var(--s-2);
    width: 100%; text-align: left; padding: var(--s-2);
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--white); cursor: pointer;
}

    .ps-pp-suboption:hover { border-color: var(--indigo-200); }

.ps-pp-suboption-name {
    flex: 1; min-width: 0; color: var(--ink); font: 500 13px/1.3 var(--font-sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ps-pp-suboption-meta { color: var(--muted); font: 400 11px/1 var(--font-mono); }

.ps-pp-foot { margin-top: var(--s-4); color: var(--muted); font: 400 12px/1.5 var(--font-sans); }

/* ---- Крок 02: picked-person header ---- */
.ps-dc-person-h {
    display: flex; flex-direction: column; gap: var(--s-3);
    padding: var(--s-3); border-bottom: 1px solid var(--border);
}

.ps-dc-back-person {
    align-self: flex-start; border: none; background: transparent;
    color: var(--muted); font: 500 12px/1 var(--font-sans); cursor: pointer; padding: 4px 0;
}

    .ps-dc-back-person:hover { color: var(--indigo-600); }

.ps-dc-person-id { display: flex; align-items: center; gap: var(--s-3); }

.ps-dc-person-av {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 14px/1 var(--font-sans); box-sizing: border-box;
}

.ps-dc-person-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.ps-dc-person-name {
    color: var(--ink); font: 600 15px/1.3 var(--font-sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ps-dc-person-meta {
    color: var(--muted); font: 400 11px/1.4 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

/* ---- Крок 02: verdict rows ---- */
.ps-vrow {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
}

.ps-vrow--confirmed { border-left-color: var(--forest); }
.ps-vrow--review { border-left-color: var(--amber); background: var(--amber-bg); }
.ps-vrow--excluded { border-left-color: var(--border-2); opacity: 0.65; }
.ps-vrow.is-active { background: var(--indigo-50); border-left-color: var(--indigo-600); }

/* Read-only row (no manual verdict) — the whole row is a click-through to
   the declaration detail; year · ПІБ · посада · сума · → */
.ps-vrow--readonly {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
    .ps-vrow--readonly:hover { background: var(--surface); }
.ps-vrow-go { color: var(--muted); font-size: 13px; opacity: 0; transition: opacity 0.12s ease; }
    .ps-vrow--readonly:hover .ps-vrow-go,
    .ps-vrow--readonly.is-active .ps-vrow-go { opacity: 1; }

.ps-vrow-main {
    grid-column: 1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-2);
    border: none; background: transparent; text-align: left; cursor: pointer;
    padding: 0; min-width: 0;
}

.ps-vrow-yr {
    color: var(--muted); font: 500 11px/1.4 var(--font-mono);
    background: var(--surface); padding: 2px 6px; border-radius: var(--r-sm); text-align: center;
}

.ps-vrow-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.ps-vrow-name {
    color: var(--ink); font: 500 13px/1.35 var(--font-sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ps-vrow-sub {
    color: var(--muted); font: 400 11px/1.3 var(--font-sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ps-vrow-sum {
    color: var(--ink); font: 600 12px/1 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum); white-space: nowrap;
}

    .ps-vrow-sum.is-struck { text-decoration: line-through; color: var(--muted); }

.ps-vrow-verdict { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; }

/* "AI" chip on auto-confirmed (≥95%) rows — visual badge meaning
   "AI-confirmed, click a button to override". */
.ps-vbadge-ai {
    font: 700 9px/1 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--forest);
    background: var(--forest-bg);
    border: 1px solid var(--forest-border);
    border-radius: var(--r-sm);
    padding: 3px 5px;
    cursor: help;
}

.ps-vbtn {
    width: 26px; height: 26px;
    border: 1px solid var(--border-2); background: var(--white); border-radius: var(--r-sm);
    font-size: 12px; line-height: 1; cursor: pointer; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

    .ps-vbtn:disabled { opacity: 0.5; cursor: default; }

.ps-vbtn--ok.is-active { background: var(--forest-bg); border-color: var(--forest-border); color: var(--forest); }
.ps-vbtn--warn.is-active { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber); }
.ps-vbtn--ex.is-active { background: var(--coral-bg); border-color: var(--coral-border); color: var(--coral); }
.ps-vbtn--ok:hover:not(:disabled) { border-color: var(--forest-border); color: var(--forest); }
.ps-vbtn--warn:hover:not(:disabled) { border-color: var(--amber-border); color: var(--amber); }
.ps-vbtn--ex:hover:not(:disabled) { border-color: var(--coral-border); color: var(--coral); }

/* ---- Крок 02: footer ---- */
.ps-dc-verdict-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-3); border-top: 1px solid var(--border); background: var(--paper);
}

.ps-dc-verdict-counts {
    color: var(--muted); font: 400 11px/1.4 var(--font-mono);
    font-feature-settings: var(--font-feature-tnum);
}

    .ps-dc-verdict-counts b { color: var(--ink); }

.ps-dc-save-decision {
    border: 1px solid var(--indigo-200); background: var(--indigo-50); color: var(--indigo-600);
    border-radius: var(--r-md); padding: 7px 14px; font: 600 12px/1 var(--font-sans);
    cursor: pointer; transition: background 0.12s ease;
}

    .ps-dc-save-decision:hover:not(:disabled) { background: var(--indigo-100); }
    .ps-dc-save-decision:disabled { opacity: 0.5; cursor: default; }

/* ---- Крок 03: drill-in popup additions ---- */
.ps-cb-pop-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font: 600 12px/1 var(--font-sans); padding: 3px 8px; border-radius: var(--r-pill);
}

.ps-cb-pop-pill.is-confirmed { background: var(--forest-bg); color: var(--forest); }
.ps-cb-pop-pill.is-probable,
.ps-cb-pop-pill.is-uncertain { background: var(--amber-bg); color: var(--amber); }
.ps-cb-pop-pill.is-separate { background: var(--surface); color: var(--muted); }

.ps-cb-pop-eyebrow { color: var(--muted); font: 500 10px/1 var(--font-mono); letter-spacing: 0.05em; }

/* Single-row criterion layout (label+detail inline) overrides the earlier
   two-row variant now that detail is folded into the label. */
.ps-cb-crit li { grid-template-rows: auto; align-items: baseline; }
.ps-cb-crit-label { grid-row: 1; white-space: normal; }

.ps-cb-pop-actions {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    margin-top: 10px;
}

    .ps-cb-pop-actions .ps-cb-report { margin-top: 0; width: auto; }

.ps-cb-confirm {
    border: none; background: var(--indigo-600); color: var(--white);
    border-radius: var(--r-md); padding: 8px 12px; font: 600 12px/1 var(--font-sans); cursor: pointer;
}

    .ps-cb-confirm:hover { background: var(--indigo-800); }

.ps-cb-confirmed { color: var(--forest); font: 500 11px/1 var(--font-mono); }

/* ════════════════════════════════════════════════════════════════════
   Mobile: declaration detail opens as a slide-in sheet (like the Courts
   SidePanel) instead of stacking under the list. The list stays full-width
   and tapping a row slides the detail in from the right; ← / backdrop close
   it back to the list. All desktop detail rendering is reused as-is.
   ════════════════════════════════════════════════════════════════════ */
.ps-dc-detail-close { display: none; }
.ps-dc-detail-backdrop { display: none; }

@media (max-width: 768px) {
    .ps-dc-detail-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 12, 41, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 60;
    }
    .ps-dc-body.is-detail-open .ps-dc-detail-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .ps-dc-detail {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 61;
    }
    .ps-dc-body.is-detail-open .ps-dc-detail {
        transform: translateX(0);
    }

    .ps-dc-detail-close {
        position: sticky;
        top: 0;
        z-index: 2;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: -2px 0 8px -2px;
        padding: 8px 14px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 999px;
        font: 500 14px/1 var(--font-sans, inherit);
        color: var(--ink, #1a1830);
        cursor: pointer;
    }
    .ps-dc-detail-close:active { background: var(--paper); }
}

/* ===========================================
   Company-context declarations: scope + аномалії (.ps-dcs-*)
   Used by DeclarationsTabV2 only on a company (ЮО) card.
   =========================================== */
.ps-dcs { display: block; }

/* scope banner */
.ps-dcs-scope {
    display: flex; align-items: center; gap: 16px;
    background: var(--indigo-50, #EEEDFB); border: 1px solid var(--indigo-200, #C9C5F4);
    border-radius: 12px; padding: 14px 20px; margin-bottom: 18px;
}
.ps-dcs-scope-ic {
    width: 38px; height: 38px; border-radius: 10px; background: #fff;
    color: var(--indigo-600, #5B57DB); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ps-dcs-scope-ic svg { width: 20px; height: 20px; }
.ps-dcs-scope-txt { flex: 1; font-size: 13px; line-height: 1.5; color: var(--indigo-950, #1B1750); }
.ps-dcs-scope-txt b { font-weight: 700; }
.ps-dcs-scope-btn {
    font-size: 12px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--indigo-200, #C9C5F4);
    background: #fff; color: var(--indigo-800, #3F3BA8); border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.ps-dcs-scope-btn:hover { border-color: var(--indigo-600, #5B57DB); }

/* toolbar */
.ps-dcs-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.ps-dcs-search {
    flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--border-2, #D7D7D2); border-radius: 10px; padding: 9px 14px;
}
.ps-dcs-search svg { width: 16px; height: 16px; color: var(--muted, #8F8F8A); flex-shrink: 0; }
.ps-dcs-search input { border: 0; outline: 0; font-family: inherit; font-size: 13px; color: var(--ink, #1A1B22); width: 100%; background: transparent; }
.ps-dcs-sortbox { display: flex; align-items: center; gap: 5px; }
.ps-dcs-sort-h { font-size: 11px; color: var(--muted, #8F8F8A); }
.ps-dcs-sort-pill { font-family: var(--font-mono, monospace); font-size: 11px; padding: 6px 11px; border: 0; background: transparent; border-radius: 100px; color: var(--body, #42423E); cursor: pointer; }
.ps-dcs-sort-pill.on { background: var(--ink, #1A1B22); color: #fff; font-weight: 600; }

/* section labels */
.ps-dcs-sec { margin-bottom: 22px; }
.ps-dcs-sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ps-dcs-sec-t { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.ps-dcs-sec-t.warn { color: var(--coral, #C7372F); }
.ps-dcs-sec-t.normal { color: var(--muted, #8F8F8A); }
.ps-dcs-sec-ct { font-family: var(--font-mono, monospace); font-size: 11px; padding: 2px 8px; border-radius: 100px; }
.ps-dcs-sec-ct.warn { background: var(--coral-bg, #FDECEC); color: var(--coral, #C7372F); }
.ps-dcs-sec-ct.normal { background: var(--surface, #F1F1EE); color: var(--muted, #8F8F8A); }
.ps-dcs-sec-line { flex: 1; height: 1px; background: var(--border, #E4E4E0); }

/* person card */
.ps-dcs-card {
    background: #fff; border: 1px solid var(--border, #E4E4E0); border-radius: 13px;
    padding: 16px 18px; margin-bottom: 10px;
    display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center;
    cursor: pointer; transition: .12s;
}
.ps-dcs-card:hover { border-color: var(--indigo-200, #C9C5F4); box-shadow: 0 6px 20px -12px rgba(91,87,219,.2); }
.ps-dcs-card--warn { border-color: rgba(199,55,47,.25); background: linear-gradient(90deg, rgba(199,55,47,.03), #fff 45%); }
.ps-dcs-av { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; align-self: start; }
.ps-dcs-meta { min-width: 0; }
.ps-dcs-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink, #1A1B22); }
.ps-dcs-rel { font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 100px; letter-spacing: .02em; }
.ps-dcs-rel.rel-strong { background: var(--indigo-50, #EEEDFB); color: var(--indigo-800, #3F3BA8); }
.ps-dcs-rel.rel-weak { background: var(--surface, #F1F1EE); color: var(--muted, #8F8F8A); }
.ps-dcs-pos { font-size: 12px; color: var(--body, #42423E); margin-top: 4px; line-height: 1.4; }
.ps-dcs-stats { font-size: 11px; color: var(--muted, #8F8F8A); margin-top: 5px; }
.ps-dcs-anom { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--coral, #C7372F); background: var(--coral-bg, #FDECEC); padding: 4px 11px; border-radius: 100px; margin-top: 8px; margin-right: 6px; }
.ps-dcs-anom svg { width: 13px; height: 13px; flex-shrink: 0; }
.ps-dcs-right { display: flex; align-items: center; gap: 10px; align-self: start; }
.ps-dcs-decl { font-size: 13px; font-weight: 600; color: var(--ink, #1A1B22); background: var(--surface, #F1F1EE); padding: 6px 12px; border-radius: 9px; white-space: nowrap; }
.ps-dcs-arrow { color: var(--muted, #8F8F8A); font-size: 20px; line-height: 1; }

.ps-dcs-more { text-align: center; padding: 14px; border: 1px dashed var(--border-2, #D7D7D2); border-radius: 12px; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--muted, #8F8F8A); margin-top: 4px; }
.ps-dcs-inline-link { border: 0; background: none; color: var(--indigo-600, #5B57DB); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.ps-dcs-backscope { border: 0; background: none; color: var(--indigo-600, #5B57DB); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; margin-bottom: 12px; }

@media (max-width: 720px) {
    .ps-dcs-card { grid-template-columns: 40px 1fr; }
    .ps-dcs-right { grid-column: 1 / -1; justify-content: flex-end; }
    .ps-dcs-scope { flex-direction: column; align-items: flex-start; }
}