/* 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-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid var(--rp-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    background: var(--rp-surface2);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.rp-state.current { color: var(--rp-ok-fg); border-color: var(--rp-ok-bd); background: var(--rp-ok-bg); }
.rp-state.stale { color: var(--rp-conditional-fg); border-color: var(--rp-conditional-bd); background: var(--rp-conditional-bg); }
.rp-state.failed { color: var(--rp-sc-fg); border-color: var(--rp-sc-bd); background: var(--rp-sc-bg); }
.rp-state.generating { color: var(--color-text-link); border-color: var(--rp-ice-strong); background: var(--rp-ice); }

.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 ---------- */
/* The detail is a working surface rather than a printable sheet. It follows the wide comparison
   workspace at desktop sizes, while the prose column keeps a readable measure of its own. */
.rp-detail-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 auto 18px;
    max-width: 1440px;
}

.rp-generation-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1440px;
    min-height: 58px;
    margin: 0 auto 14px;
    padding: 8px 12px 8px 16px;
    border: 1px solid var(--rp-border-light);
    border-radius: var(--radius-lg);
    background: var(--rp-white);
}

.rp-generation-message { margin-left: 10px; color: var(--color-text-secondary); font-size: 12.5px; }
.rp-generation-model { white-space: nowrap; }

/* ui-reuse-allow: role coverage is a second lifecycle axis, so it reuses the existing profile strip,
   badge palette and button primitives rather than overloading the generation-state badge. */
.rp-coverage-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 52px;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rp-border-light);
    border-radius: var(--radius-lg);
    background: var(--rp-white);
}

.rp-coverage-label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid var(--rp-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    background: var(--rp-surface2);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.rp-coverage-strip.complete .rp-coverage-label { color: var(--rp-ok-fg); border-color: var(--rp-ok-bd); background: var(--rp-ok-bg); }
.rp-coverage-strip.partial .rp-coverage-label { color: var(--rp-conditional-fg); border-color: var(--rp-conditional-bd); background: var(--rp-conditional-bg); }
.rp-view-missing { flex-shrink: 0; }
.rp-missing-sources {
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--rp-border-light);
    border-radius: var(--radius-lg);
    background: var(--rp-surface2);
}
.rp-missing-sources ul { margin: 0; padding-left: var(--space-5); }
.rp-missing-sources li + li { margin-top: var(--space-2); }
.rp-missing-sources li strong { font-size: var(--text-subhead); font-weight: var(--font-medium); }
.rp-missing-sources li span { display: block; color: var(--color-text-secondary); font-size: var(--text-caption1); }
.rp-coverage-provenance { display: block; margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-caption1); }

.rp-back {
    display: inline-flex;
    min-height: 44px;
    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: 1440px;
    margin: 0 auto;
}

.rp-doc-workspace {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    align-items: start;
}

.rp-contents {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-5));
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-6) 0;
    padding: 0 var(--space-5) 0 var(--space-6);
    border-right: 1px solid var(--rp-border-light);
}

.rp-contents-label {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-caption2);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rp-contents a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
    line-height: 1.3;
}

.rp-contents a:hover { background: var(--rp-surface); color: var(--rp-navy); }
.rp-contents-count { flex: 0 0 auto; font-size: var(--text-caption2); }
.rp-doc-content { min-width: 0; padding: 0 clamp(32px, 4vw, 64px) var(--space-8); }

.rp-competency-section { background: var(--rp-surface2); }
.rp-area-kind { margin-left: auto; color: var(--color-text-secondary); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 720px) {
    .rp-generation-strip { align-items: flex-start; flex-direction: column; }
    .rp-coverage-strip { align-items: flex-start; flex-direction: column; }
    .rp-generation-message { display: block; margin: 6px 0 0; }
    .rp-doc-head { padding-inline: 22px; }
}

@media (max-width: 1200px) {
    .rp-doc-workspace { display: block; }
    .rp-contents { display: none; }
    .rp-doc-content { padding-inline: clamp(22px, 4vw, 40px); }
}

.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 0 4px; scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }

.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 0 8px; scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }
.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); }
.rp-item:last-child { border-bottom: none; }
.rp-item-head { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 11px 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.rp-item-head::marker { content: ""; }
.rp-item-head::-webkit-details-marker { display: none; }
.rp-item-head:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.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 details[open] .rp-item-chev { transform: rotate(180deg); }

.rp-item-sources { padding-bottom: 2px; }

.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; }

@media (max-width: 1200px) {
    .role-profiles-page .search-field input { min-height: 44px; }
    .role-profiles-page .sort-th button { min-width: 44px; min-height: 44px; }
}

/* 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; }
}

/* ---------- organisation-role workspace (approved role-profile deck) ---------- */
.rp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1440px;
    margin: 0 auto var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
}

.rp-breadcrumb button {
    min-height: 36px;
    color: var(--color-text-link);
    font-weight: var(--font-medium);
}

.rp-breadcrumb button:hover { color: var(--color-text-link-hover); text-decoration: underline; }
.rp-breadcrumb [aria-current="page"] { color: var(--color-text-primary); }

.rp-role-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    max-width: 1440px;
    margin: 0 auto var(--space-3);
}

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

.rp-role-title {
    margin: 0;
    color: var(--rp-navy);
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    font-weight: var(--font-medium);
    line-height: 1.15;
}

.rp-role-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 10px;
    color: var(--color-text-secondary);
    font-size: var(--text-caption1);
}

.rp-generate-action { flex-shrink: 0; min-height: 44px; }
.rp-view-jd { flex-shrink: 0; }
.rp-detail-tabs { max-width: 1440px; margin: 0 auto; }
.rp-detail-panel { max-width: 1440px; margin: 0 auto; }
.rp-detail-tabs .tabs { margin-bottom: var(--space-4); }
.rp-detail-panel .rp-generation-strip { max-width: none; margin-bottom: var(--space-4); }
.role-profiles-page .tab-btn:disabled {
    color: var(--color-text-secondary);
    opacity: .55;
    cursor: not-allowed;
    border-bottom-color: transparent;
}
.role-profiles-page .tab-btn:disabled:hover { color: var(--color-text-secondary); }

/* ui-reuse-allow: this is the approved grouped-assignment summary row; its expanded originals use
   the same native details pattern as AssignmentTable and RoleProfileDoc. */
.rp-assignment-workspace {
    display: grid;
    grid-template-columns: minmax(190px, 225px) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.rp-scope-list,
.rp-assignment-panel {
    overflow: hidden;
    border: 1px solid var(--rp-border);
    border-radius: var(--radius-lg);
    background: var(--rp-white);
}

.rp-scope-list { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
.rp-scope-title {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 12px 14px;
    border-bottom: 1px solid var(--rp-border-light);
    color: var(--rp-navy);
    font-size: var(--text-caption2);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.rp-scope-title span { color: var(--color-text-secondary); font-size: 9px; font-weight: 500; letter-spacing: .04em; }
.rp-scope-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    gap: var(--space-2);
    padding: 8px 13px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--text-caption1);
    text-align: left;
}
.rp-scope-row:hover { background: var(--rp-row-hover); }
.rp-scope-row.active { border-left-color: var(--rp-blue); background: var(--rp-blue-wash); font-weight: var(--font-medium); }
.rp-scope-label { min-width: 0; overflow-wrap: anywhere; }
.rp-scope-child-marker { margin-right: 5px; color: var(--color-text-secondary); }
.rp-scope-num { flex: 0 0 auto; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 11px; }

.rp-assignment-quality {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 53px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--rp-border-light);
    background: var(--color-info-tint);
    color: var(--color-text-primary);
    font-size: var(--text-caption2);
}
.rp-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--rp-border-light);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    background: var(--rp-surface2);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.rp-badge-info { border-color: var(--rp-ice-strong); color: var(--color-text-link); background: var(--rp-ice); }
.rp-badge-warn { border-color: var(--rp-conditional-bd); color: var(--rp-conditional-fg); background: var(--rp-conditional-bg); }
.rp-badge-quiet { min-height: 21px; }

.rp-assignment-section + .rp-assignment-section { border-top: 1px solid var(--rp-border-light); }
.rp-assignment-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px 11px;
    border-bottom: 1px solid var(--rp-border-light);
}
.rp-assignment-section-head h2 { margin: 0; color: var(--rp-navy); font-size: 15px; font-weight: var(--font-medium); }
.rp-assignment-group { border-bottom: 1px solid var(--rp-row-line); }
.rp-assignment-group:last-child { border-bottom: 0; }
.rp-assignment-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 9px 14px;
    list-style: none;
    cursor: pointer;
}
.rp-assignment-row::-webkit-details-marker { display: none; }
.rp-assignment-row:hover { background: var(--rp-row-hover); }
.rp-assignment-row:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rp-assignment-chevron { color: var(--color-text-secondary); font-size: 14px; transition: transform .18s; }
.rp-assignment-group[open] .rp-assignment-chevron { transform: rotate(180deg); }
.rp-assignment-copy { min-width: 0; }
.rp-assignment-copy strong { display: block; overflow-wrap: anywhere; color: var(--rp-ink); font-size: 13px; font-weight: var(--font-medium); line-height: 1.4; }
.rp-assignment-source { display: block; margin-top: 3px; color: var(--color-text-secondary); font-size: 10.5px; }
.rp-context-summary { max-width: min(36ch, 100%); white-space: nowrap; line-height: 1.35; }
.rp-assignment-originals { padding: 2px 14px 12px 43px; background: var(--rp-surface2); }
.rp-assignment-original { padding: 10px 0; border-bottom: 1px solid var(--rp-border-light); }
.rp-assignment-original:last-child { border-bottom: 0; }
.rp-original-text { color: var(--rp-ink); font-size: 12.5px; line-height: 1.5; }
.rp-original-meta,
.rp-original-source { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 5px; color: var(--color-text-secondary); font-size: 10.5px; }
.rp-original-scope { color: var(--rp-navy); font-weight: var(--font-medium); }
.rp-original-id { color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 10px; }
.rp-item-scope { display: block; margin-top: 3px; color: var(--color-text-secondary); font-size: 10.5px; font-weight: var(--font-regular); }
.rp-review-state { color: var(--color-text-secondary); }
.rp-context-state { color: var(--color-text-secondary); }
.rp-source-link { min-height: 30px; padding: 0; color: var(--color-text-link); font-size: 10.5px; font-weight: var(--font-medium); text-decoration: underline; }
.rp-source-link:hover { color: var(--color-text-link-hover); }
.rp-jd-strip { margin-bottom: var(--space-4) !important; }

@media (max-width: 900px) {
    .rp-assignment-workspace { grid-template-columns: 1fr; }
    .rp-scope-list { position: static; display: flex; flex-wrap: wrap; }
    .rp-scope-title { width: 100%; }
    .rp-scope-row { width: auto; flex: 1 1 145px; border-left: 0; border-bottom: 3px solid transparent; }
    .rp-scope-row.active { border-left: 0; border-bottom-color: var(--rp-blue); }
}

@media (max-width: 720px) {
    .rp-role-head { flex-direction: column; }
    .rp-generate-action { width: 100%; }
    .rp-assignment-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
    .rp-assignment-row > .rp-badge-info { grid-column: 2; justify-self: start; }
    .rp-assignment-originals { padding-left: 28px; }
    .rp-breadcrumb, .rp-role-head, .rp-detail-panel { margin-left: 0; margin-right: 0; }
}