/* role profiles (feature 030) — ported from the v28 "Role Profiles - Explorations" Direction A, then
   reworked to a live directory + always-current profile (no generate card, no saved snapshots).
   Every colour resolves to an existing app :root token from layout.css (no raw hex — the brand-hex
   guard rejects it). The exploration's design-specific shades (derived tints) are expressed as a local
   token block that mixes the app tokens, so the rule bodies below stay token-only. These classes are
   GLOBAL (not a .razor.css) because the JD document and chips are emitted by the
   RoleProfiles/RoleProfileDoc markup and would otherwise miss scoped-CSS rewriting. */

:root {
    /* Map the exploration's design tokens onto the app's existing token set. */
    --rp-navy: var(--color-navy);
    --rp-blue: var(--color-blue);
    --rp-teal: var(--color-teal);
    --rp-grey: var(--v21-grey);
    --rp-white: var(--color-white);
    --rp-surface: var(--color-surface);
    --rp-border: var(--color-border);
    --rp-border-light: var(--color-border-light);
    --rp-success: var(--color-success);
    --rp-warning: var(--color-warning);
    --rp-error: var(--color-error);

    /* Derived shades (the exploration's bespoke hexes) expressed as mixes of app tokens. */
    --rp-surface2: color-mix(in srgb, var(--color-surface) 55%, var(--color-white));
    --rp-ink: color-mix(in srgb, var(--color-navy) 82%, var(--v21-grey));
    --rp-ink-soft: color-mix(in srgb, var(--color-navy) 60%, var(--v21-grey));
    --rp-muted: var(--color-text-secondary);
    --rp-row-line: color-mix(in srgb, var(--color-border-light) 70%, var(--color-white));
    --rp-row-hover: color-mix(in srgb, var(--color-surface) 45%, var(--color-white));
    --rp-head-grad-top: color-mix(in srgb, var(--color-surface) 40%, var(--color-white));
    --rp-ice: var(--color-ice-blue);
    --rp-ice-strong: color-mix(in srgb, var(--color-teal) 45%, var(--color-ice-blue));

    /* Tinted chip/tag backgrounds + borders. */
    --rp-standing-bg: color-mix(in srgb, var(--color-navy) 8%, transparent);
    --rp-standing-bd: color-mix(in srgb, var(--color-navy) 16%, transparent);
    --rp-conditional-bg: color-mix(in srgb, var(--color-warning) 10%, transparent);
    --rp-conditional-fg: color-mix(in srgb, var(--color-warning) 80%, var(--color-navy));
    --rp-conditional-bd: color-mix(in srgb, var(--color-warning) 20%, transparent);
    --rp-adhoc-bg: color-mix(in srgb, var(--color-blue) 12%, transparent);
    --rp-adhoc-fg: color-mix(in srgb, var(--color-blue) 70%, var(--color-navy));
    --rp-adhoc-bd: color-mix(in srgb, var(--color-blue) 22%, transparent);
    --rp-sc-bg: color-mix(in srgb, var(--color-error) 10%, transparent);
    --rp-sc-fg: color-mix(in srgb, var(--color-error) 86%, var(--color-navy));
    --rp-sc-bd: color-mix(in srgb, var(--color-error) 22%, transparent);
    --rp-blue-wash: color-mix(in srgb, var(--color-blue) 5%, transparent);
    --rp-ok-bg: color-mix(in srgb, var(--color-success) 10%, transparent);
    --rp-ok-fg: color-mix(in srgb, var(--color-success) 70%, var(--color-navy));
    --rp-ok-bd: color-mix(in srgb, var(--color-success) 22%, transparent);
}

/* ---------- nav NEW badge ---------- */
.nav-new {
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: var(--font-medium);
    letter-spacing: .05em;
    color: var(--color-navy);
    background: var(--rp-ice-strong);
    border-radius: var(--radius-full);
    padding: 2px 7px;
}

/* ---------- line button (detail action bar) ---------- */
.btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--rp-white);
    border: 1px solid var(--color-control-border);
    color: var(--rp-navy);
    font-size: 13.5px;
    font-weight: var(--font-medium);
    padding: 0 16px;
    height: 40px;
    border-radius: var(--radius-md);
    transition: background .14s;
}

.btn-line:hover { background: var(--rp-surface); }
.btn-line svg { width: 15px; height: 15px; }
.btn-line.sm { height: 34px; font-size: 12.5px; padding: 0 13px; }
.btn-line.sm svg { width: 14px; height: 14px; }
.btn-line[disabled] { opacity: .65; cursor: default; }
.btn-line[disabled]:hover { background: var(--rp-white); }

/* "Coming soon" marker inside the disabled Generate-job-description button. */
.rp-coming-pill {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 7px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--rp-ice);
    border: 1px solid var(--rp-ice-strong);
    color: var(--rp-navy);
}

/* ---------- type chips / sc tag ---------- */
.rp-chip {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 9px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.rp-chip.standing { background: var(--rp-standing-bg); color: var(--rp-navy); border-color: var(--rp-standing-bd); }
.rp-chip.conditional { background: var(--rp-conditional-bg); color: var(--rp-conditional-fg); border-color: var(--rp-conditional-bd); }
.rp-chip.adhoc { background: var(--rp-adhoc-bg); color: var(--rp-adhoc-fg); border-color: var(--rp-adhoc-bd); }

.rp-sc-tag {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--rp-sc-bg);
    color: var(--rp-sc-fg);
    border: 1px solid var(--rp-sc-bd);
}

/* ---------- directory table (overview) ---------- */
.rp-org-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--rp-navy);
    font-weight: var(--font-medium);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.rp-org-toggle input { accent-color: var(--rp-blue); width: 15px; height: 15px; cursor: pointer; }

.rp-shown { margin-left: auto; font-size: 12.5px; color: var(--color-text-secondary); white-space: nowrap; }

.rp-row { cursor: pointer; }

.rp-pending-sub { font-size: 11.5px; color: var(--rp-conditional-fg); margin-top: 1px; }

.rp-sc-count { color: var(--rp-sc-fg); font-weight: 600; }

.rp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 54px 24px;
    color: var(--rp-grey);
    background: var(--rp-white);
    border: 1px dashed var(--rp-border);
    border-radius: var(--radius-lg);
}

.rp-empty p { max-width: 48ch; margin: 0 auto; font-size: 13.5px; }

/* ---------- detail / JD document ---------- */
/* A readable document measure: the profile is a document, not a dashboard, so it caps at ~900px and
   centres; the action bar above matches so the buttons align with the page. */
.rp-detail-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 auto 18px;
    max-width: 900px;
}

.rp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-link);
    font-weight: var(--font-medium);
}

.rp-back svg { width: 16px; height: 16px; }
.rp-back:hover { color: var(--color-text-link-hover); }
.rp-detail-actions { display: flex; gap: 9px; }

.rp-doc {
    background: var(--rp-white);
    border: 1px solid var(--rp-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.rp-doc-head {
    padding: 32px 40px 24px;
    border-bottom: 1px solid var(--rp-border-light);
    background: linear-gradient(180deg, var(--rp-head-grad-top), var(--rp-white));
}

.rp-doc-eyebrow {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.rp-doc-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: var(--font-medium);
    letter-spacing: -.015em;
    color: var(--rp-navy);
    line-height: 1.15;
    margin: 0;
}

.rp-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-top: 11px;
    font-size: 13px;
    color: var(--rp-grey);
}

/* At-a-glance stat band under the title (replaces the old run-on meta sentence). */
.rp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.rp-stat {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--radius-md);
    background: var(--rp-surface2);
    border: 1px solid var(--rp-border-light);
}

.rp-stat-n {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--font-medium);
    line-height: 1;
    color: var(--rp-navy);
    letter-spacing: -.01em;
}

.rp-stat-l { font-size: 11.5px; color: var(--rp-grey); letter-spacing: .01em; white-space: nowrap; }

.rp-stat.ok { background: var(--rp-ok-bg); border-color: var(--rp-ok-bd); }
.rp-stat.ok .rp-stat-n { color: var(--rp-ok-fg); }
.rp-stat.pending { background: var(--rp-conditional-bg); border-color: var(--rp-conditional-bd); }
.rp-stat.pending .rp-stat-n { color: var(--rp-conditional-fg); }
.rp-stat.sc { background: var(--rp-sc-bg); border-color: var(--rp-sc-bd); }
.rp-stat.sc .rp-stat-n { color: var(--rp-sc-fg); }

.rp-provenance {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 16px 40px;
    background: var(--color-info-tint);
    border-bottom: 1px solid var(--rp-border-light);
    font-size: 13px;
    color: var(--color-navy);
}

.rp-provenance > svg { width: 18px; height: 18px; color: var(--rp-blue); flex-shrink: 0; margin-top: 1px; }
.rp-provenance strong { color: var(--rp-navy); }
.rp-prov-body { flex: 1; }

.rp-prov-toggle {
    color: var(--color-text-link);
    font-weight: var(--font-medium);
    font-size: 12.5px;
    margin-left: 4px;
    text-decoration: underline;
}

.rp-prov-toggle:hover { color: var(--color-text-link-hover); }

.rp-prov-docs {
    display: none;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    columns: 2;
    font-size: 12px;
    color: var(--rp-grey);
}

.rp-prov-docs.open { display: block; }
.rp-prov-docs li { padding: 2px 0; break-inside: avoid; }
.rp-docnum { font-family: var(--font-mono); font-size: 11px; color: var(--rp-navy); font-weight: var(--font-medium); }

.rp-gen-stamp {
    margin-left: auto;
    text-align: right;
    font-size: 11.5px;
    color: var(--rp-muted);
    flex-shrink: 0;
    line-height: 1.4;
}

.rp-gen-stamp span { font-family: var(--font-mono); font-size: 10.5px; }

.rp-purpose { padding: 24px 40px 4px; }

.rp-purpose-label {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 7px;
}

.rp-purpose p { font-size: 1.06rem; line-height: 1.6; color: var(--rp-ink); max-width: 74ch; }

.rp-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 18px 40px 6px;
    font-size: 11.5px;
    color: var(--rp-grey);
}

.rp-section { padding: 14px 40px 8px; }
.rp-section:last-child { padding-bottom: 34px; }

.rp-sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--rp-border-light);
    margin-bottom: 6px;
}

.rp-sec-no { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary); font-weight: var(--font-medium); }

.rp-sec-head h3 {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: var(--font-medium);
    color: var(--rp-navy);
    flex: 1;
}

.rp-sec-count {
    font-size: 11.5px;
    color: var(--rp-grey);
    background: var(--rp-surface);
    border-radius: var(--radius-full);
    padding: 1px 9px;
}

.rp-item-list { list-style: none; margin: 0; padding: 0; }
.rp-item { border-bottom: 1px solid var(--rp-row-line); cursor: pointer; }
.rp-item:last-child { border-bottom: none; }
.rp-item-head { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; }
.rp-item:hover .rp-item-text { color: var(--rp-navy); }

.rp-item-text {
    flex: 1;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--rp-ink);
    transition: color .12s;
}

.rp-item-meta { display: flex; align-items: center; gap: 7px; flex-shrink: 0; padding-top: 1px; }
.rp-item-chev { width: 15px; height: 15px; color: var(--color-text-secondary); transition: transform .18s; }
.rp-item.open .rp-item-chev { transform: rotate(180deg); }

.rp-item-sources { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.rp-item.open .rp-item-sources { max-height: 280px; }

.rp-src-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 2px 0 7px;
}

.rp-src-list { list-style: none; margin: 0; padding: 0 0 13px 14px; border-left: 2px solid var(--rp-border-light); }
.rp-src-list li { padding: 3px 0; }
.rp-src-list .rp-docnum { flex-shrink: 0; min-width: 74px; }

/* The row itself is the flex line (so both the <button> and <div> wrappers lay out identically). */
.rp-src-row { display: flex; gap: 9px; align-items: baseline; width: 100%; font-size: 12.5px; color: var(--rp-ink-soft); }

/* An openable source row is a real <button> that opens the shared source-PDF viewer (drill-down).
   Token-only per the brand-hex guard. */
button.rp-src-row { background: none; border: none; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); padding: 0 6px 0 0; margin-right: -6px; }
button.rp-src-row.rp-src-open:hover { background: var(--rp-row-hover); }
button.rp-src-row.rp-src-open:hover .rp-docnum { text-decoration: underline; }
.rp-src-open-ic { width: 13px; height: 13px; color: var(--color-text-secondary); flex-shrink: 0; align-self: center; margin-left: auto; }

/* Two-level hierarchy: a responsibility-type accordion inside a RACI area. */
.rp-subsec {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 5px 0 0 22px;
    padding: 9px 0 7px;
    cursor: pointer;
    user-select: none;
}

.rp-subsec:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.rp-subsec-name { color: var(--rp-ink-soft); font-size: 12.5px; font-weight: var(--font-medium); }
.rp-subsec-count { margin-left: auto; font-size: 11px; color: var(--rp-grey); background: var(--rp-surface); border-radius: var(--radius-full); padding: 1px 8px; }
.rp-subsec-chevron { width: 14px; height: 14px; color: var(--color-text-secondary); transition: transform .18s; }
.rp-subsec.collapsed .rp-subsec-chevron { transform: rotate(-90deg); }
.rp-item-list-nested { margin-left: 22px; }

/* Merged-wording count on a de-duped responsibility (several verbatim variants collapsed to one line). */
.rp-variants {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--rp-grey);
    background: var(--rp-surface);
    border: 1px solid var(--rp-border-light);
}

/* ---------- print (US3 — T021) ---------- */
@media print {
    /* Hide the app chrome; print only the open JD document as a clean job description. */
    .sidebar,
    .topbar,
    .breadcrumbs,
    .main-footer,
    .rp-detail-bar {
        display: none !important;
    }

    body { background: var(--rp-white); }

    .rp-doc {
        border: none;
        box-shadow: none;
        border-radius: 0;
        max-width: none;
    }

    .rp-doc-head { background: var(--rp-white); }

    /* Reveal all sources and provenance docs in the printed document. */
    .rp-item-sources { max-height: none !important; overflow: visible !important; }
    .rp-prov-docs { display: block !important; }
    .rp-item-chev { display: none; }

    .rp-section { break-inside: avoid; }
}

/* Feature 031 — LLM synthesis surface. Token-only (the brand-hex guard rejects raw hex). */
.rp-ai-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    padding: 11px 14px;
    border: 1px solid var(--color-info-tint-border);
    background: var(--color-info-tint);
    border-radius: var(--radius-md);
    color: var(--color-navy);
    font-size: 13px;
    line-height: 1.45;
}

    .rp-ai-banner svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        margin-top: 1px;
        color: var(--color-info);
    }

    .rp-ai-banner strong {
        color: var(--rp-navy);
    }

.rp-src-quote {
    display: block;
    margin-top: 3px;
    color: var(--rp-ink-soft);
    font-style: italic;
    font-size: 12px;
    line-height: 1.4;
}

/* Reader directory filters and document-only vocabulary. */
.role-profiles-page .table-toolbar { background: transparent; border: none; border-radius: 0; padding-left: 0; padding-right: 0; }
.role-profiles-page .rl-unmatched { color: var(--rp-muted); background: var(--rp-surface); border: 1px solid var(--rp-border-light); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Calm profile detail: the headline stats are inline facts, not status tiles. */
.rp-stats { gap: 18px; margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--rp-border-light); }
.rp-stat, .rp-stat.ok, .rp-stat.pending, .rp-stat.sc { padding: 0; border: 0; border-radius: 0; background: transparent; }
.rp-stat-n, .rp-stat.ok .rp-stat-n, .rp-stat.pending .rp-stat-n, .rp-stat.sc .rp-stat-n { color: var(--rp-navy); font-size: 1.12rem; }
.rp-stat-l { color: var(--rp-muted); }

.rp-sec-head { cursor: pointer; }
.rp-sec-head:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.rp-sec-head .rp-sec-chevron { width: 15px; height: 15px; color: var(--color-text-secondary); transition: transform .18s; }
.rp-sec-head.collapsed .rp-sec-chevron { transform: rotate(-90deg); }

@media (max-width: 720px) {
    .rp-purpose, .rp-section { padding-left: 22px; padding-right: 22px; }
    .rp-subsec { margin-left: 14px; }
    .rp-item-list-nested { margin-left: 14px; }
}