/* REMprofile.
   ----------------------------------------------------------------------------------------------
   A global sheet, not a component's .razor.css - the same reasoning as remeasure.css. These rules
   style markup rendered across the list, the editor, the pickers and the comments panel, and
   Blazor's CSS isolation only matches elements authored in the same .razor file, so as scoped
   files most of this would apply to nothing. The rp- prefix carries the scope instead.

   Every colour below is lifted from the artboards in "REMprofile App UI" (read straight out of the
   SVG fills rather than eyeballed):

     #18181F  ink, and the black pill buttons          #585865  secondary text
     #F3F3F3  page ground                              #E5E5E5  neutral rules
     #9F4731  sidebar sienna                           #ECDAD6  banner / tint wash
     #F37020  accent - active tab ring, count badge    #F6EDEB  faintest wash
     #C59183  field outline on the editor              #A0A3AB  neutral field outline

   Status pills are solid fills, never tinted washes - the artboards are consistent about this on
   both the list and the editor, and the two had drifted apart in the build:
     #A3A3A3 not started  #2563EB in progress  #EA580C pending  #16A34A published  #B91C1C rejected

   The accent is deliberately scarce. It marks the tab you are on and the count of the filter you
   have chosen, and nothing else - so orange means "this is where you are", not "this is REMprofile".
   The sienna belongs to the navigation rail; it never appears in the content column. */

.rp-page {
    --rp-ink: #18181F;
    --rp-body: #35353B;
    --rp-muted: #585865;
    --rp-faint: #787582;

    --rp-ground: #F3F3F3;
    --rp-surface: #FFFFFF;
    --rp-line: #E5E5E5;
    --rp-hairline: #F1F1F1;

    --rp-accent: #F37020;
    --rp-accent-wash: #FDF1E9;
    --rp-sienna: #9F4731;
    --rp-tint: #ECDAD6;
    --rp-tint-faint: #F6EDEB;

    --rp-field-line: #C59183;
    --rp-field-line-neutral: #A0A3AB;

    --rp-not-started: #A3A3A3;
    --rp-in-progress: #2563EB;
    --rp-pending: #EA580C;
    --rp-published: #16A34A;
    --rp-rejected: #B91C1C;

    color: var(--rp-body);
    padding-bottom: 40px;
}

/* ---------------------------------------------------------------- primitives */

/* The design has exactly three button weights: a black pill for the primary action, an
   outlined pill for the secondary one beside it, and a small outlined pill ("Add", "View",
   "Preview template") inside a card. */

.rp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 11px 22px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.rp-btn:focus-visible {
    outline: 2px solid var(--rp-accent);
    outline-offset: 2px;
}

.rp-btn-primary {
    background: var(--rp-ink);
    color: #FFFFFF;
}

.rp-btn-primary:hover:not(:disabled) { background: #2C2C34; }

.rp-btn-secondary {
    background: var(--rp-surface);
    color: var(--rp-ink);
    border-color: var(--rp-ink);
}

.rp-btn-secondary:hover:not(:disabled) { background: var(--rp-hairline); }

.rp-btn-small {
    font-size: 12px;
    padding: 7px 16px;
    background: var(--rp-surface);
    color: var(--rp-ink);
    border-color: var(--rp-line);
}

.rp-btn-small:hover:not(:disabled) { background: var(--rp-hairline); }

.rp-btn:disabled {
    cursor: not-allowed;
    background: #D8D8D8;
    color: #FFFFFF;
    border-color: transparent;
}

.rp-btn-small:disabled {
    background: var(--rp-hairline);
    color: var(--rem-fill-neutral, #757575);
    border-color: var(--rp-line);
}

/* Icon-only action, used in the editor header and the list toolbar. */
.rp-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--rp-ink);
    cursor: pointer;
}

.rp-iconbtn:hover:not(:disabled) { background: var(--rp-hairline); }
.rp-iconbtn:disabled { color: #C4C4C4; cursor: not-allowed; }
.rp-iconbtn:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 1px; }

/* Status pill. Solid fill, white text, on both the list and the editor. */
.rp-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    color: #FFFFFF;
    white-space: nowrap;
}

.rp-pill.not_started      { background: var(--rp-not-started); }
.rp-pill.in_progress      { background: var(--rp-in-progress); }
.rp-pill.pending_approval { background: var(--rp-pending); }
.rp-pill.published        { background: var(--rp-published); }
.rp-pill.rejected         { background: var(--rp-rejected); }

.rp-pill.template { background: var(--rp-published); }

/* ---------------------------------------------------------------- tabs */

/* Text chips on the grey band; the active one is an accent-outlined pill. Used by the editor
   and by the read-only template view. */

.rp-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 10px 0 16px;
}

.rp-tab {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 999px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--rp-body);
    cursor: pointer;
    white-space: nowrap;
}

.rp-tab:hover { background: rgba(0, 0, 0, .04); }

.rp-tab.active {
    border-color: var(--rp-accent);
    background: var(--rp-surface);
    font-weight: 700;
    color: var(--rp-ink);
}

.rp-tab:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; }

/* Status filter tabs on the list: a count badge, then the label. */

.rp-statustabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.rp-statustab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 999px;
    padding: 7px 18px 7px 7px;
    font-family: inherit;
    font-size: 14px;
    color: var(--rp-body);
    cursor: pointer;
}

.rp-statustab:hover { background: rgba(0, 0, 0, .04); }

.rp-statustab.active {
    border-color: var(--rp-accent);
    background: var(--rp-surface);
    font-weight: 600;
    color: var(--rp-ink);
}

.rp-statustab:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; }

.rp-statuscount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--rp-hairline);
    color: var(--rp-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rp-statustab.active .rp-statuscount {
    background: var(--rp-accent);
    color: #FFFFFF;
}

/* ---------------------------------------------------------------- editor shell */

.rp-editor-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 0 6px;
}

.rp-editor-title {
    font-size: 30px;
    font-weight: 500;
    color: var(--rp-ink);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rp-editor-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.rp-editor-divider {
    width: 1px;
    height: 24px;
    background: var(--rp-line);
    margin: 0 10px;
}

/* "Pick a template or start from scratch" */
.rp-banner {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    background: var(--rp-tint);
    border-radius: 10px;
    padding: 20px 26px;
    margin-bottom: 6px;
}

.rp-banner-copy { flex: 1 1 320px; min-width: 0; }
.rp-banner-title { font-size: 17px; font-weight: 700; color: var(--rp-ink); margin: 0 0 6px; }
.rp-banner-text { font-size: 14px; color: var(--rp-body); margin: 0; max-width: 46ch; }
.rp-banner-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* The white card each tab's content sits in. */
.rp-card {
    background: var(--rp-surface);
    border-radius: 10px;
    padding: 26px 30px;
}

/* ---------------------------------------------------------------- two-column form */

/* Label plus helper sentence on the left, the control on the right - one field per row, which
   is how every General/Reporting artboard is laid out. */

.rp-field {
    display: grid;
    grid-template-columns: minmax(240px, 5fr) minmax(280px, 7fr);
    gap: 12px 40px;
    align-items: start;
    padding: 14px 0;
}

@media (max-width: 900px) {
    .rp-field { grid-template-columns: 1fr; gap: 6px; }
}

.rp-field-label { font-size: 15px; font-weight: 500; color: var(--rp-ink); }
.rp-field-help { font-size: 13px; color: var(--rp-muted); margin-top: 2px; max-width: 52ch; }
.rp-field-control { min-width: 0; }

/* Outlined control with the label notched into the top border, as drawn. Applied to a wrapper
   so it can hold an input, a textarea or a select without three sets of rules. */

.rp-input {
    position: relative;
    display: block;
    border: 1px solid var(--rp-field-line-neutral);
    border-radius: 6px;
    background: var(--rp-surface);
    padding: 12px 14px;
}

.rp-input.filled { border-color: var(--rp-field-line); }
.rp-input:focus-within { border-color: var(--rp-accent); }

.rp-input > .rp-input-label {
    position: absolute;
    top: -8px;
    left: 10px;
    padding: 0 5px;
    background: var(--rp-surface);
    font-size: 11px;
    color: var(--rp-muted);
    pointer-events: none;
}

.rp-input input,
.rp-input textarea,
.rp-input select {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--rp-ink);
    padding: 0;
}

.rp-input textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.rp-input select { appearance: none; cursor: pointer; padding-right: 22px; }

.rp-input-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--rp-ink);
}

/* Clears an AI-populated value - the ⊗ the artboards put inside a populated textarea. */
.rp-input-clear {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    color: var(--rp-muted);
    cursor: pointer;
    padding: 2px;
    line-height: 0;
}

.rp-input-clear:hover { color: var(--rp-ink); }

/* ---------------------------------------------------------------- factor sections */

/* White accordion header over grey sub-rows. Every profile factor section is this shape. */

.rp-section {
    margin-bottom: 8px;
}

.rp-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--rp-surface);
    border-radius: 8px;
    padding: 18px 22px;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    font-family: inherit;
}

.rp-section-head:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: -2px; }

.rp-section-title { font-size: 19px; font-weight: 500; color: var(--rp-ink); }
.rp-section-desc { font-size: 13px; color: var(--rp-muted); margin-top: 2px; }

.rp-subrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
}

.rp-subrow-title { font-size: 14px; font-weight: 700; color: var(--rp-ink); }
.rp-subrow .rp-btn-small { margin-left: auto; }

/* The little grey "i" beside every sub-row label. */
.rp-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #B4B4B8;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    cursor: help;
}

/* A saved entry inside a section. */
.rp-item {
    background: var(--rp-surface);
    border-radius: 8px;
    padding: 16px 22px;
    margin: 0 0 8px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.rp-item-body { flex: 1; min-width: 0; }
.rp-item-title { font-size: 15px; color: var(--rp-ink); }
.rp-item-desc { font-size: 13px; color: var(--rp-muted); margin-top: 4px; }

/* Qualification and study-direction entries sit two across, not one per row - see the
   populated Profile input factors frames. Everything else in a section stays full width. */
.rp-item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
    align-items: start;
}

@media (max-width: 900px) { .rp-item-grid { grid-template-columns: 1fr; } }

/* Essential / Preferred, and the study-direction option triples. */
.rp-choices { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; }

.rp-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--rp-body);
    cursor: pointer;
}

.rp-choice input { accent-color: var(--rp-ink); width: 16px; height: 16px; cursor: pointer; }

/* ---------------------------------------------------------------- KPA / KPI weighting */

.rp-kpa {
    padding: 6px 22px 18px;
}

.rp-kpa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0 10px;
}

.rp-kpa-name { font-size: 15px; color: var(--rp-ink); }

.rp-kpi {
    background: var(--rp-surface);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 10px;
}

.rp-kpi-name { font-size: 13px; color: var(--rp-muted); margin-bottom: 6px; }

.rp-kpi-row { display: flex; align-items: center; gap: 12px; }

.rp-weight {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rp-field-line-neutral);
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 120px;
}

.rp-weight input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--rp-ink);
    font-variant-numeric: tabular-nums;
}

.rp-weight-suffix { color: var(--rp-muted); font-size: 15px; }

.rp-slider { width: 100%; accent-color: var(--rp-ink); margin-top: 12px; }

/* The "KPA Total / Must equal 100%" row. Turns red only once the numbers actually disagree,
   so a half-built set reads as unfinished rather than broken. */
.rp-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-top: 1px solid var(--rp-line);
    margin-top: 6px;
}

.rp-total-label { font-size: 15px; color: var(--rp-ink); }
.rp-total-help { font-size: 13px; color: var(--rp-muted); }
.rp-total-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rp-ink); }
.rp-total.over .rp-total-value,
.rp-total.under .rp-total-value { color: var(--rp-rejected); }

/* ---------------------------------------------------------------- comments panel */

.rp-comments {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.rp-comments-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 14px;
}

.rp-comments-title { font-size: 19px; font-weight: 700; color: var(--rp-ink); margin: 0; }
.rp-comments-sub { font-size: 14px; color: var(--rp-body); margin: 2px 0 0; }

.rp-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 24px 16px;
    min-height: 0;
}

.rp-comment { padding: 14px 0; }
.rp-comment.reply { margin-left: 34px; }

.rp-comment-top { display: flex; align-items: center; gap: 8px; }

.rp-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rp-tint);
    color: var(--rp-sienna);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.rp-comment-author { font-size: 14px; font-weight: 600; color: var(--rp-ink); }
.rp-comment-date { font-size: 12px; color: var(--rp-faint); }
.rp-comment-body { font-size: 14px; color: var(--rp-body); margin: 6px 0 0 34px; white-space: pre-wrap; }

.rp-comment-actions { display: flex; gap: 14px; margin: 6px 0 0 34px; }

.rp-comment-action {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--rp-ink);
    cursor: pointer;
}

.rp-comment-action:hover { text-decoration: underline; }

/* The divider the design draws above the first comment this user has not seen. */
.rp-comment-new {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 4px;
    font-size: 12px;
    color: var(--rp-faint);
}

.rp-comment-new::before,
.rp-comment-new::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rp-line);
}

.rp-comments-composer { border-top: 1px solid var(--rp-line); padding: 16px 24px 20px; }

.rp-composer-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--rp-line);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 6px 8px;
    background: var(--rp-hairline);
}

.rp-composer-toolbar .rp-iconbtn { width: 26px; height: 26px; }
.rp-composer-spacer { margin-left: auto; }

.rp-composer-input {
    width: 100%;
    border: 1px solid var(--rp-line);
    border-radius: 0 0 6px 6px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--rp-ink);
    resize: vertical;
    min-height: 96px;
    outline: none;
}

.rp-composer-input:focus { border-color: var(--rp-accent); }
.rp-composer-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* ---------------------------------------------------------------- empty states */

.rp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 16px;
}

.rp-empty-bubble {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--rp-tint-faint);
    border: 1px solid #F1DED8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    color: var(--rp-sienna);
}

.rp-empty-title { font-size: 19px; color: var(--rp-ink); margin: 0; }
.rp-empty-text { font-size: 17px; color: var(--rp-body); margin: 4px 0 26px; }
.rp-empty-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- list table */

.rp-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.rp-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--rp-field-line-neutral);
    border-radius: 6px;
    padding: 12px 16px;
    background: var(--rp-surface);
    color: var(--rp-muted);
}

.rp-search:focus-within { border-color: var(--rp-accent); }

.rp-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--rp-ink);
}

.rp-actionbar {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding-bottom: 6px;
}

.rp-actionbar-count { font-size: 14px; color: var(--rp-body); margin: 0 10px 0 4px; }

.rp-actionbar-divider {
    width: 1px;
    height: 22px;
    background: var(--rp-line);
    margin: 0 8px;
}

/* Columns are declared once and shared by the header and the rows, so the two cannot drift.
   Set by JobProfilesList.ColumnStyle: Actions - Job profile - Holders - Status - Comments - Open. */
.rp-table { --rp-cols: 76px minmax(240px, 2.4fr) 84px 128px 104px 88px; }

.rp-thead,
.rp-row {
    display: grid;
    grid-template-columns: var(--rp-cols);
    gap: 14px;
    align-items: center;
    padding: 12px 18px;
}

/* Heading block, primary action top-right (design frame 01). */
.rp-head { padding: 4px 0 2px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rp-title { font-size: 28px; font-weight: 700; color: var(--rp-ink); margin: 0; }
.rp-subtitle { font-size: 14px; color: var(--rp-muted); margin: 4px 0 14px; }

/* Status tabs when they live inline on the toolbar row: push to the right, drop the block margin. */
.rp-statustabs-inline { margin-bottom: 0; margin-left: auto; flex-wrap: nowrap; }

/* Numeric columns (Holders, Comments) read right, like the design. */
.rp-num { text-align: right; }
.rp-thead .rp-num { justify-self: end; }
.rp-muted { color: var(--rp-muted); }

/* Row grows to two lines: name + subtitle. */
.rp-cell-job { min-width: 0; display: block; }
.rp-cell-job .rp-row-title { display: block; font-weight: 600; }
.rp-row-sub { font-size: 12.5px; color: var(--rp-muted); margin-top: 2px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-row-sub .rp-truncate { min-width: 0; }
.rp-sub-calc {
    background: none; border: none; padding: 0; font: inherit; font-size: 12.5px;
    color: var(--rp-accent, #A14732); cursor: pointer; text-decoration: underline; white-space: nowrap;
}

/* Comments cell: icon + count, quiet until hovered. */
.rp-comments {
    display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; width: 100%;
    background: none; border: none; padding: 0; font: inherit; color: var(--rp-muted); cursor: pointer;
}
.rp-comments:hover { color: var(--rp-ink); }

/* Open button per row (design's primary row action). */
.rp-open { white-space: nowrap; }

.rp-thead {
    font-size: 13px;
    color: var(--rp-muted);
    border-bottom: 1px solid var(--rp-line);
}

.rp-sortable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

.rp-sortable:hover { color: var(--rp-ink); }

.rp-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--rp-surface);
    border-radius: 8px 8px 0 0;
    padding: 18px 22px;
    margin-top: 14px;
    cursor: pointer;
    font-size: 19px;
    font-weight: 500;
    color: var(--rp-ink);
    width: 100%;
    border: none;
    text-align: left;
    font-family: inherit;
}

.rp-row {
    background: var(--rp-surface);
    border-bottom: 1px solid var(--rp-hairline);
    font-size: 14px;
}

.rp-row:hover { background: var(--rp-tint-faint); }
.rp-row-actions { display: flex; align-items: center; gap: 2px; }

.rp-row-title {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--rp-ink);
    text-align: left;
}

.rp-row-title:hover { text-decoration: underline; }

.rp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- side panel */

/* Both the Comments panel and the Filters panel are anchored to the right edge with the
   screen behind them still visible - not centred modals. One shell serves both.

   Fixed rather than absolute so it spans the viewport regardless of where in the scrolled
   content column it was opened from. */

.rp-scrim {
    position: fixed;
    inset: 0;
    background: rgba(24, 24, 31, .28);
    z-index: 1300;
    animation: rp-fade .12s ease-out;
}

.rp-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 100vw);
    background: var(--rp-surface);
    z-index: 1301;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(24, 24, 31, .14);
    animation: rp-slide-in .16s ease-out;
}

.rp-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 12px;
}

.rp-panel-title { font-size: 19px; font-weight: 700; color: var(--rp-ink); margin: 0; }
.rp-panel-sub { font-size: 14px; color: var(--rp-body); margin: 2px 0 0; }
.rp-panel-body { flex: 1; overflow-y: auto; min-height: 0; }

@keyframes rp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-slide-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .rp-scrim, .rp-panel { animation: none; }
}

/* ---------------------------------------------------------------- filters drawer */

.rp-drawer-body { padding: 4px 26px 20px; }

.rp-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--rp-line);
}

.rp-filter { margin-bottom: 22px; }
.rp-filter-label { font-size: 15px; color: var(--rp-ink); margin-bottom: 8px; }

.rp-multiselect {
    position: relative;
    border: 1px solid var(--rp-field-line-neutral);
    border-radius: 6px;
    background: var(--rp-surface);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 48px;
    cursor: text;
}

.rp-multiselect:focus-within { border-color: var(--rp-accent); }

.rp-multiselect input {
    flex: 1;
    min-width: 80px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--rp-ink);
}

.rp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rp-ink);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 5px 8px 5px 12px;
    font-size: 12px;
    font-weight: 600;
}

.rp-chip button {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.rp-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--rp-surface);
    border: 1px solid var(--rp-line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(24, 24, 31, .12);
    padding: 6px 0;
}

.rp-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 14px;
    color: var(--rp-body);
    cursor: pointer;
}

.rp-option:hover { background: var(--rp-hairline); }
.rp-option input { accent-color: var(--rp-ink); width: 16px; height: 16px; }

/* ---------------------------------------------------------------- pickers */

/* The searchable checkbox modal behind every "Add" pill, and behind Select a template. */

.rp-picker { display: flex; flex-direction: column; min-height: 420px; }

.rp-picker-list {
    flex: 1;
    overflow-y: auto;
    max-height: 46vh;
    margin-top: 14px;
    padding-right: 4px;
}

.rp-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rp-hairline);
    cursor: pointer;
}

.rp-picker-item:hover { background: var(--rp-hairline); }
.rp-picker-item input { accent-color: var(--rp-ink); width: 17px; height: 17px; margin-top: 2px; }
.rp-picker-name { font-size: 15px; color: var(--rp-ink); }
.rp-picker-desc { font-size: 13px; color: var(--rp-muted); margin-top: 2px; }

.rp-picker-empty { text-align: center; color: var(--rp-muted); padding: 64px 16px; font-size: 15px; }

.rp-picker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rp-line);
}

/* Template row inside the picker and on the Job Templates library screen. */

.rp-tpl {
    background: var(--rp-surface);
    border: 1px solid var(--rp-line);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.rp-tpl-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.rp-tpl-name { flex: 1; font-size: 15px; color: var(--rp-ink); min-width: 0; }
.rp-tpl-body { border-top: 1px solid var(--rp-hairline); padding: 20px 18px 16px; }

.rp-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 900px) { .rp-tpl-grid { grid-template-columns: 1fr; } }

.rp-tpl-label { font-size: 14px; font-weight: 700; color: var(--rp-ink); margin-bottom: 2px; }
.rp-tpl-value { font-size: 14px; color: var(--rp-body); margin-bottom: 18px; }
.rp-tpl-actions { display: flex; justify-content: flex-end; gap: 12px; }

/* ---------------------------------------------------------------- drop zone */

.rp-dropzone {
    border: 2px dashed #F0CFC4;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    background: #FFFDFC;
    position: relative;
}

.rp-dropzone.loaded { border-color: var(--rp-published); background: #F2FBF5; }

.rp-dropzone-bubble {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: var(--rp-tint-faint);
    color: var(--rp-sienna);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.rp-dropzone-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--rp-ink);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rp-dropzone-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rp-published);
    font-weight: 700;
    font-size: 15px;
}

.rp-progress {
    height: 8px;
    border-radius: 999px;
    background: #E6F6EC;
    overflow: hidden;
    margin-top: 8px;
}

.rp-progress-bar { height: 100%; background: var(--rp-published); border-radius: 999px; }
.rp-progress-pct { text-align: right; font-size: 12px; color: var(--rp-muted); margin-top: 4px; }

/* ---------------------------------------------------------------- full-page step */

/* "Add new job profile" replaces the content area rather than opening a modal. */

.rp-step-head { display: flex; align-items: center; gap: 16px; padding: 16px 0 14px; }
.rp-step-title { font-size: 30px; font-weight: 500; color: var(--rp-ink); margin: 0; }

.rp-step-progress {
    height: 4px;
    background: var(--rp-tint);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 24px;
}

.rp-step-progress-bar { height: 100%; background: var(--rp-sienna); border-radius: 999px; transition: width .2s ease; }
.rp-step-actions { display: flex; justify-content: flex-end; padding: 26px 0 0; }

/* Three-dot "Creating job profile" wait, which is what the artboard shows on submit. */
.rp-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }

.rp-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rp-sienna);
    opacity: .35;
    animation: rp-dot-pulse 1.05s infinite ease-in-out;
}

.rp-dot:nth-child(2) { animation-delay: .18s; }
.rp-dot:nth-child(3) { animation-delay: .36s; }

@keyframes rp-dot-pulse {
    0%, 80%, 100% { opacity: .3; }
    40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rp-dot { animation: none; opacity: .6; }
}


/* ---------------------------------------------------------------- breadcrumb

   Components/Shared/Breadcrumb.razor is scoped, so its own sheet cannot know what it sits above.
   This is the one thing the host has to say: the trail takes the top padding that .rp-editor-head
   used to carry on its own. */

.rp-crumb {
    padding-top: 14px;
}