/* Rep detail page — extracted from rep_overview.html (slice 7).

   These classes used to live in an inline <style> in the shell, which meant a
   tab pane fetched on its own rendered completely unstyled. Every tab is a real
   URL now, so a pane MUST be able to stand alone — that is why this file exists.

   Loaded from base.html alongside core.css.
*/
/* ── Shared rd-* classes used by all tab partials ───────────────────── */
.rd-row            { display:flex; align-items:center; gap:8px; }
.rd-row-between    { display:flex; justify-content:space-between; align-items:center; }
.rd-row-mb         { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.rd-row-mb-15      { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.rd-row-mb-10      { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.rd-tls-id         { color:#999; font-size:0.9rem; }
.rd-text-muted     { font-size:0.78rem; color:#888; }
.rd-text-muted-xs  { font-size:0.72rem; color:#888; }
.rd-text-mono      { font-family:monospace; letter-spacing:.1em; }
.rd-empty          { color:#999; }
.rd-section-divider{ margin-top:20px; padding-top:15px; border-top:1px solid #eee; }
.rd-mt-15          { margin-top:15px; }
.rd-mt-20          { margin-top:20px; }
.rd-doc-row        { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid #f5f5f5; }
.rd-doc-row:last-child { border-bottom:none; }
.rd-doc-title      { font-weight:600; font-size:0.88rem; }
.rd-doc-desc       { font-size:0.78rem; color:#888; }
.rd-doc-ok         { font-size:0.75rem; color:#16a34a; margin-top:4px; }
/* Task #22 Phase 2G: a present-but-unverifiable tax form. Amber, not green --
   the tick above says a file exists, this says we cannot confirm which form. */
.rd-doc-warn       { font-size:0.75rem; color:#b45309; margin-top:4px;
                     line-height:1.45; }
.rd-doc-pending    { font-size:0.75rem; color:#d97706; margin-top:4px; }
.rd-pill-active    { padding:3px 8px; border-radius:12px; font-size:0.75rem; background:#d4edda; color:#155724; display:inline-block; }
.rd-pill-expired   { padding:3px 8px; border-radius:12px; font-size:0.75rem; background:#f8d7da; color:#721c24; display:inline-block; }
.rd-status-ok      { color:green; font-size:0.8rem; }
.rd-status-pending { color:#999; font-size:0.8rem; }
.rd-days-left      { font-size:0.75rem; color:green; }
.rd-days-expired   { font-size:0.75rem; color:red; }
.btn-mini          { padding:3px 8px; font-size:0.75rem; }
.btn-sm            { padding:4px 10px; font-size:0.8rem; }
.btn-sm-alt        { padding:4px 10px; font-size:0.78rem; }
.rd-cred-card      { border:1px solid #ddd; border-radius:8px; padding:20px; margin-bottom:20px; }
.rd-cred-title     { margin:0; font-size:1.1rem; }
.rd-cred-section   { margin-bottom:15px; }
.rd-cred-pwd-cell  { display:flex; align-items:center; gap:6px; margin:0; flex-wrap:nowrap; }
.rd-cred-pwd-eye   { border:none; background:none; cursor:pointer; padding:2px 4px; font-size:0.9rem; }
.rd-order-box      { margin-bottom:15px; padding:10px 14px; background:#f0f4ff; border-radius:6px; border:1px solid #d0d8f0; }
.rd-order-label    { font-weight:bold; font-size:0.85rem; color:var(--brand-primary); margin-bottom:6px; display:block; }
.rd-order-code     { font-size:0.75rem; background:#fff; padding:4px 8px; border-radius:4px; border:1px solid #ddd; word-break:break-all; }
.rd-asset-block    { margin-bottom:15px; padding:10px; background:#f9f9f9; border-radius:6px; }
.rd-asset-thumb    { width:120px; height:80px; object-fit:cover; border-radius:6px; border:2px solid #ddd; display:block; margin-bottom:8px; }
.rd-asset-empty    { width:120px; height:80px; background:#ddd; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#999; font-size:0.75rem; margin-bottom:8px; }
.rd-photo          { width:80px; height:80px; border-radius:50%; object-fit:cover; border:2px solid #ddd; }
.rd-photo-empty    { width:80px; height:80px; border-radius:50%; background:#ddd; display:flex; align-items:center; justify-content:center; color:#999; font-size:0.8rem; }
.rd-onb-bar-bg     { background:#e5e7eb; border-radius:8px; height:8px; margin-bottom:8px; }
.rd-onb-bar-fill   { background:#16a34a; border-radius:8px; height:8px; transition:width 0.3s; }
.rd-pipeline-grid  { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.rd-bal-form       { display:none; background:#f8f9fa; border-radius:6px; padding:14px; margin-bottom:14px; }
.rd-flex-gap-8     { display:flex; gap:8px; flex-wrap:wrap; }
.rd-flex-gap-5     { display:flex; gap:5px; }
.rd-flex-photo     { display:flex; align-items:center; gap:20px; margin-top:10px; }
.rd-flex-upload    { display:flex; gap:8px; align-items:center; }
.rd-employment-pill{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; font-size:0.72rem; font-weight:600; }
.rd-employment-ft  { background:#cce5ff; color:#004085; }
.rd-employment-pt  { background:#fff3cd; color:#856404; }
.rd-table-sm       { font-size:0.85rem; }
.rd-table-xs       { font-size:0.83rem; }
.rd-capitalize     { text-transform:capitalize; }
/* ── Tab navigation ─────────────────────────────────────────────────── */
.rov-tabs          { display:flex; gap:0; border-bottom:2px solid #e5e7eb; margin-bottom:24px; overflow-x:auto; }
.rov-tab-btn       { padding:10px 18px; font-size:0.88rem; font-weight:500; color:#6b7280; border:none;
                     background:none; cursor:pointer; border-bottom:3px solid transparent;
                     margin-bottom:-2px; white-space:nowrap; transition:all .15s; }
.rov-tab-btn:hover { color:#1a56c4; }
.rov-tab-btn.active{ color:#1a56c4; border-bottom-color:#1a56c4; font-weight:600; }
/* ── Header KPI chips ───────────────────────────────────────────────── */
.rov-kpi-chip      { display:inline-flex; flex-direction:column; align-items:center;
                     padding:6px 14px; border-radius:8px; background:#f3f4f6;
                     border:1px solid #e5e7eb; min-width:80px; }
.rov-kpi-val       { font-size:1.1rem; font-weight:700; color:#111; line-height:1.2; }
.rov-kpi-lbl       { font-size:0.68rem; color:#9ca3af; text-transform:uppercase; letter-spacing:0.05em; }
/* ── Loading skeleton ───────────────────────────────────────────────── */
.rov-loading       { padding:48px; text-align:center; color:#9ca3af; }
@media (max-width:900px) {
  .rov-tab-btn     { padding:8px 12px; font-size:0.8rem; }
  .rd-pipeline-grid{ grid-template-columns:1fr 1fr; }
}

/* ── Slice 7: tabbed shell ─────────────────────────────────────────── */
.rp-header             { margin-bottom:20px; }
.rp-header-main        { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.rp-header-id          { flex:1; min-width:220px; }
.rp-header-name        { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.rp-header-name h2     { margin:0; font-size:1.25rem; }
.rp-header-meta        { display:flex; gap:16px; flex-wrap:wrap; font-size:0.82rem; color:#666; }
.rp-badge              { padding:2px 10px; border-radius:12px; font-size:0.78rem; font-weight:600; }
.rp-badge-review       { background:#fef3c7; color:#92400e; }
.rp-badges             { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.rp-badge-chip         { background:#f3f4f6; border:1px solid var(--brand-border,#e5e7eb); border-radius:12px;
                         padding:2px 10px; font-size:0.75rem; white-space:nowrap; }
.rp-denied             { padding:30px; text-align:center; color:#9ca3af; }

/* Period snapshot blocks */
.rp-blocks             { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
                         gap:14px; margin-bottom:20px; }
.rp-block              { background:var(--brand-card-bg,#fff); border:1px solid var(--brand-border,#e5e7eb);
                         border-radius:var(--radius-lg,10px); padding:14px 16px; }
.rp-block-hd           { font-size:0.8rem; font-weight:700; color:var(--brand-text,#1a1a2e); }
.rp-block-sub          { font-size:0.7rem; color:var(--brand-text-muted,#9ca3af); margin-bottom:10px; }
.rp-row                { display:flex; justify-content:space-between; align-items:baseline;
                         padding:4px 0; font-size:0.85rem; border-bottom:1px solid #f3f4f6; }
.rp-row:last-child     { border-bottom:none; }
.rp-row a              { text-decoration:none; color:inherit; }
.rp-row a:hover        { text-decoration:underline; }
.rp-row-v              { font-weight:700; }
.rp-row.net            { margin-top:6px; padding-top:8px; border-top:2px solid var(--brand-border,#e5e7eb);
                         border-bottom:none; font-size:0.95rem; }
.rp-row.net .rp-row-v  { color:var(--brand-success,#16a34a); }
.rp-row.alarm .rp-row-v{ color:var(--brand-danger,#ef4444); }
.rp-muted              { color:var(--brand-text-muted,#9ca3af); font-weight:400; }
.rp-foot               { font-size:0.7rem; color:var(--brand-text-muted,#9ca3af); margin-top:6px; }

/* Two-column body */
.rp-cols               { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; }
@media (max-width:900px){ .rp-cols { grid-template-columns:1fr; } }
.rp-widget             { background:var(--brand-card-bg,#fff); border:1px solid var(--brand-border,#e5e7eb);
                         border-radius:var(--radius-lg,10px); padding:14px 16px; margin-bottom:16px; }
.rp-widget h3          { margin:0 0 10px; font-size:0.9rem; }
.rp-alerts             { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.rp-alert              { background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
                         border-radius:20px; padding:4px 12px; font-size:0.78rem; text-decoration:none; }
.rp-pipe               { display:flex; gap:6px; flex-wrap:wrap; }
.rp-pipe span          { padding:3px 10px; border-radius:12px; font-size:0.72rem; }
.rp-pipe .todo         { background:#f3f4f6; color:#9ca3af; }
.rp-pipe .current      { background:#1a56c4; color:#fff; font-weight:700; }
.rp-pipe .done         { background:#d1fae5; color:#065f46; }
.rp-bar                { background:#e5e7eb; border-radius:8px; height:8px; margin:6px 0; }
.rp-bar-fill           { background:var(--brand-success,#16a34a); border-radius:8px; height:8px; }

/* ═══════════════════════════════════════════════════════════════════════
   REP MANAGEMENT DESIGN SYSTEM (v1.7.1)

   One set of primitives for every rep surface — All Reps cards and all eight
   profile tabs. The rule that drives all of it:

     BORDERS DELIMIT, SPACE GROUPS, COLOUR MEANS SOMETHING.

   Nested boxes were doing the job whitespace should do, and every badge was
   coloured so none of them stood out. Here colour is reserved for a state a
   manager must act on; everything else is neutral.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  --rp-s1:4px;  --rp-s2:8px;  --rp-s3:12px; --rp-s4:16px;
  --rp-s5:20px; --rp-s6:24px; --rp-s7:32px;
  --rp-line:#eef0f3;              /* hairline separator — never a full box   */
  --rp-edge:#e3e6ea;              /* the ONE border a card is allowed        */
  --rp-ink:#111827;               /* primary text                            */
  --rp-ink-2:#4b5563;             /* secondary                               */
  --rp-ink-3:#9099a6;             /* tertiary / labels                       */
  --rp-good:#16a34a; --rp-good-bg:#dcfce7;
  --rp-warn:#d97706; --rp-warn-bg:#fef3c7;
  --rp-bad:#dc2626;  --rp-bad-bg:#fee2e2;
  --rp-accent:#2563eb; --rp-accent-bg:#dbeafe;
  --rp-r:10px;
}

/* ── Surfaces ─────────────────────────────────────────────────────────
   ONE border per card. Sections inside are separated by a hairline, never
   by another box — that is the ~50% border reduction. */
.rpx-card{ background:#fff; border:1px solid var(--rp-edge); border-radius:var(--rp-r);
           padding:var(--rp-s5); margin-bottom:var(--rp-s5); }
.rpx-card.tight{ padding:var(--rp-s4); }
.rpx-sec{ padding-top:var(--rp-s4); margin-top:var(--rp-s4); border-top:1px solid var(--rp-line); }
.rpx-sec:first-child{ padding-top:0; margin-top:0; border-top:none; }
.rpx-hd{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
         color:var(--rp-ink-3); margin:0 0 var(--rp-s3); }
.rpx-row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--rp-s3);
          padding:var(--rp-s2) 0; }
.rpx-row + .rpx-row{ border-top:1px solid var(--rp-line); }

/* ── Typography ───────────────────────────────────────────────────────
   One dominant element per surface; everything else recedes. */
.rpx-title{ font-size:1.45rem; font-weight:700; color:var(--rp-ink); line-height:1.15; margin:0; }
.rpx-sub{ font-size:.82rem; color:var(--rp-ink-2); }
.rpx-meta{ font-size:.76rem; color:var(--rp-ink-3); }
.rpx-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.74rem;
           color:var(--rp-ink-3); letter-spacing:.02em; }

/* ── Tags. Neutral BY DEFAULT — colour is opt-in and means something. ── */
.rpx-tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px;
          font-size:.72rem; font-weight:600; background:#f3f4f6; color:var(--rp-ink-2);
          border:1px solid transparent; white-space:nowrap; }
.rpx-tag--good{ background:var(--rp-good-bg); color:#14532d; }
.rpx-tag--warn{ background:var(--rp-warn-bg); color:#78350f; }
.rpx-tag--bad { background:var(--rp-bad-bg);  color:#7f1d1d; }
.rpx-tag--info{ background:var(--rp-accent-bg); color:#1e3a8a; }
.rpx-tag--ghost{ background:transparent; border-color:var(--rp-edge); color:var(--rp-ink-3); }

/* ── KPI emphasis tiers. Size and weight carry the hierarchy, not colour. ── */
.rpx-kpi{ display:flex; flex-direction:column; gap:2px; }
.rpx-kpi-l{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
            color:var(--rp-ink-3); }
.rpx-kpi-v{ font-weight:700; color:var(--rp-ink); line-height:1; }
.rpx-kpi--lg .rpx-kpi-v{ font-size:2.1rem; }
.rpx-kpi--md .rpx-kpi-v{ font-size:1.35rem; }
.rpx-kpi--sm .rpx-kpi-v{ font-size:1rem; color:var(--rp-ink-2); }
.rpx-kpi-d{ font-size:.72rem; color:var(--rp-ink-3); }
.rpx-up{ color:var(--rp-good); } .rpx-down{ color:var(--rp-bad); }

/* ── Progress ────────────────────────────────────────────────────────── */
.rpx-prog{ background:#eef0f3; border-radius:999px; height:6px; overflow:hidden; }
.rpx-prog > i{ display:block; height:100%; border-radius:999px; background:var(--rp-accent); }
.rpx-prog.lg{ height:10px; }

/* ── Pipeline states ─────────────────────────────────────────────────── */
.rpx-steps{ display:flex; gap:6px; flex-wrap:wrap; }
.rpx-step{ padding:4px 11px; border-radius:999px; font-size:.72rem; font-weight:600; }
.rpx-step.done   { background:var(--rp-good-bg); color:#14532d; }
.rpx-step.current{ background:var(--rp-accent);  color:#fff; }
.rpx-step.blocked{ background:var(--rp-bad-bg);  color:#7f1d1d; }
.rpx-step.todo   { background:#f3f4f6; color:var(--rp-ink-3); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.rpx-btn{ display:inline-flex; align-items:center; gap:5px; padding:6px 13px; border-radius:7px;
          font-size:.8rem; font-weight:600; cursor:pointer; border:1px solid var(--rp-edge);
          background:#fff; color:var(--rp-ink-2); text-decoration:none; transition:.12s; }
.rpx-btn:hover{ background:#f9fafb; border-color:#cbd2da; color:var(--rp-ink); }
.rpx-btn--primary{ background:var(--rp-accent); border-color:var(--rp-accent); color:#fff; }
.rpx-btn--primary:hover{ background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.rpx-btn--sm{ padding:3px 9px; font-size:.74rem; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.rpx-empty{ padding:var(--rp-s6); text-align:center; color:var(--rp-ink-3); font-size:.85rem; }

/* ── Grids ───────────────────────────────────────────────────────────── */
.rpx-grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--rp-s4); }
.rpx-grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--rp-s4); }

/* ── Profile header (v1.7.1) ──────────────────────────────────────────
   Was a flat run where status, tier, hire date, email, phone and id all had
   the same weight. Now: one dominant name, contact demoted to a quiet line,
   and the rest grouped into a labelled fact block. Height is unchanged —
   the facts sit beside the name rather than below it. */
.rp-header{ background:#fff; border:1px solid var(--rp-edge); border-radius:var(--rp-r);
            padding:var(--rp-s5); margin-bottom:var(--rp-s5); }
.rp-header-main{ display:flex; align-items:center; gap:var(--rp-s5); flex-wrap:wrap; }
.rp-av{ width:60px; height:60px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.rp-av-ph{ background:#eef1f5; display:flex; align-items:center; justify-content:center;
           font-size:1.15rem; font-weight:700; color:#98a2b3; }
.rp-header-id{ flex:1; min-width:200px; }
.rp-contact{ display:flex; gap:var(--rp-s3); flex-wrap:wrap; align-items:center;
             font-size:.8rem; color:var(--rp-ink-3); margin-top:3px; }
.rp-contact a{ color:var(--rp-ink-2); text-decoration:none; }
.rp-contact a:hover{ color:var(--rp-accent); text-decoration:underline; }

.rp-facts{ display:flex; gap:var(--rp-s6); flex-wrap:wrap; margin:0; }
.rp-facts > div{ min-width:64px; }
.rp-facts dt{ font-size:.63rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
              color:var(--rp-ink-3); margin-bottom:3px; }
.rp-facts dd{ margin:0; font-size:.83rem; font-weight:600; color:var(--rp-ink); }

.rp-review{ margin-top:var(--rp-s3); padding:7px 12px; border-radius:7px;
            background:var(--rp-warn-bg); color:#78350f; font-size:.78rem; }

.rp-badges{ display:flex; gap:6px; flex-wrap:wrap; align-items:center;
            margin-top:var(--rp-s4); padding-top:var(--rp-s3); border-top:1px solid var(--rp-line); }
.rp-badge-count{ font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
                 color:var(--rp-ink-3); margin-right:var(--rp-s2); }
/* Unearned badges stay visible at half strength — the set reads as progress. */
.rp-badge-chip{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
                border-radius:999px; font-size:.74rem; white-space:nowrap;
                background:#f3f4f6; color:var(--rp-ink-3); border:1px solid transparent;
                opacity:.5; filter:grayscale(1); transition:.15s; }
.rp-badge-chip.earned{ opacity:1; filter:none; background:var(--rp-warn-bg); color:#78350f;
                       border-color:#fcd34d; font-weight:600; }

/* ── Overview emphasis (v1.7.1) ───────────────────────────────────────
   Week is what a manager acts on today; month is medium; YTD is context.
   The hierarchy is carried by SIZE and placement, not by colour. */
.rp-week{ border-left:3px solid var(--rp-accent); }
.rp-week-hd{ display:flex; justify-content:space-between; align-items:flex-start;
             gap:var(--rp-s4); margin-bottom:var(--rp-s4); }
.rp-week-range{ font-size:.9rem; font-weight:600; color:var(--rp-ink); }
.rp-week-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
               gap:var(--rp-s5); }
.rp-week-kpis a{ color:inherit; text-decoration:none; }
.rp-week-kpis a:hover{ color:var(--rp-accent); }
.rp-week-net{ border-left:1px solid var(--rp-line); padding-left:var(--rp-s5); }
.rp-periods .rpx-card{ margin-bottom:0; }
.rp-periods{ margin-bottom:var(--rp-s5); }
.rp-mini-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(74px,1fr)); gap:var(--rp-s4); }
.rp-mini-kpis a{ color:inherit; text-decoration:none; }
.rp-mini-kpis a:hover{ color:var(--rp-accent); }
.rp-cols{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--rp-s5); }
@media (max-width:900px){ .rp-cols{ grid-template-columns:1fr; } }
.rp-alerts{ display:flex; gap:var(--rp-s2); flex-wrap:wrap; margin-bottom:var(--rp-s5); }
.rp-alert{ background:var(--rp-bad-bg); color:#7f1d1d; border-radius:999px;
           padding:5px 13px; font-size:.78rem; font-weight:600; text-decoration:none; }
.rp-alert:hover{ background:#fecaca; }

/* ── Sales pane ──────────────────────────────────────────────────────── */
.rp-sales-bar{ display:flex; justify-content:space-between; align-items:center;
               gap:var(--rp-s3); flex-wrap:wrap; margin-bottom:var(--rp-s3); }
.rp-sales-bar input, .rp-sales-bar select{ padding:6px 10px; border:1px solid var(--rp-edge);
    border-radius:7px; font-size:.82rem; color:var(--rp-ink-2); }
.rp-tbl{ width:100%; border-collapse:collapse; font-size:.82rem; }
.rp-tbl th{ text-align:left; padding:7px 8px; font-size:.68rem; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; color:var(--rp-ink-3);
    border-bottom:1px solid var(--rp-edge); }
.rp-tbl td{ padding:8px; border-bottom:1px solid var(--rp-line); color:var(--rp-ink-2); }
.rp-tbl tr:last-child td{ border-bottom:none; }
.rp-tbl tbody tr:hover{ background:#fafbfc; }
.rp-tbl a{ color:var(--rp-ink); text-decoration:none; font-weight:600; }
.rp-tbl a:hover{ color:var(--rp-accent); }

/* ── Notes & Activity ─────────────────────────────────────────────────
   Event TYPE is carried by a small icon and a quiet label, not by five
   competing background colours. Timestamps recede; the text leads. */
.rep-note-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--rp-s4);
                   padding-bottom:var(--rp-s3); border-bottom:1px solid var(--rp-line); }
.rp-pill{ padding:5px 13px; border-radius:999px; border:1px solid var(--rp-edge);
          background:#fff; color:var(--rp-ink-2); font-size:.76rem; font-weight:600;
          cursor:pointer; transition:.12s; }
.rp-pill:hover{ background:#f9fafb; border-color:#cbd2da; }
.rp-pill.active{ background:var(--rp-ink); border-color:var(--rp-ink); color:#fff; }
#rep-notes-feed .log-entry,
.rep-note-item{ padding:var(--rp-s4) 0; border-bottom:1px solid var(--rp-line); }
#rep-notes-feed .log-entry:last-child,
.rep-note-item:last-child{ border-bottom:none; }
.rp-ev{ display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700;
        letter-spacing:.04em; text-transform:uppercase; color:var(--rp-ink-3); }
.rp-ev-time{ font-size:.72rem; color:var(--rp-ink-3); font-variant-numeric:tabular-nums; }

/* ── HR sections ─────────────────────────────────────────────────────── */
.rp-hr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--rp-s5); }
.rp-hr-sec > summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between;
                      align-items:center; gap:var(--rp-s3); }
.rp-hr-sec > summary::-webkit-details-marker{ display:none; }
.rp-hr-sec > summary::after{ content:'\25be'; color:var(--rp-ink-3); font-size:.8rem; transition:.15s; }
.rp-hr-sec[open] > summary::after{ transform:rotate(180deg); }
.rp-hr-sec[open] > summary{ margin-bottom:var(--rp-s4); }
/* A card can host more than one editable section, so the summary carries a
   group of Edit buttons. margin-left:auto keeps them right-aligned against the
   disclosure caret regardless of how many there are. */
.rp-hr-secbtns{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }

/* ── Applications history (slice 9) ──────────────────────────────────── */
/* Cards, not rows. Screener answers are free text of unpredictable length —
   any column layout collapses the moment someone writes a paragraph. */
.rp-appcard{ border:1px solid var(--rp-edge); border-radius:10px; padding:12px 14px;
             margin-bottom:12px; background:var(--rp-surface, #fff); }
.rp-appcard:last-child{ margin-bottom:0; }
/* The first application gets a quieter left rule so the chain reads oldest-last
   without needing a label on every card. */
.rp-appcard--first{ border-left:3px solid var(--rp-edge); }
.rp-appcard-hd{ display:flex; justify-content:space-between; align-items:baseline;
                gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.rp-appcard-date{ font-weight:600; font-size:.9rem; color:var(--rp-ink); }
.rp-appcard-job{ font-size:.8rem; color:var(--rp-ink-3); margin-left:8px; }
.rp-appcard-body{ display:flex; flex-direction:column; gap:8px; }
.rp-appfield{ font-size:.82rem; color:var(--rp-ink-2); }
.rp-appfield-l{ display:inline-block; font-size:.68rem; font-weight:700;
                letter-spacing:.05em; text-transform:uppercase;
                color:var(--rp-ink-3); margin-right:6px; }
.rp-appscreener{ font-size:.8rem; color:var(--rp-ink-2); padding:6px 0 0 10px;
                 border-left:2px solid var(--rp-edge); margin-top:6px; }
.rp-appdiff{ background:var(--rp-warn-bg, #fffbeb); border-radius:8px;
             padding:8px 10px; margin-bottom:10px; }
.rp-appdiff-hd{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.05em;
                text-transform:uppercase; color:#92400e; margin-bottom:4px; }
.rp-appdiff-row{ display:flex; gap:10px; font-size:.8rem; color:#78350f;
                 padding:2px 0; flex-wrap:wrap; }
.rp-appdiff-l{ min-width:96px; font-weight:600; }
@media (max-width:600px){
  .rp-appdiff-l{ min-width:0; }
  .rp-appcard-job{ margin-left:0; display:block; }
}

/* ── Vendor credentials dashboard ────────────────────────────────────── */
.rp-vend{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--rp-s4); }
.rp-vend-card{ background:#fff; border:1px solid var(--rp-edge); border-radius:var(--rp-r);
               padding:var(--rp-s4); }
.rp-vend-hd{ display:flex; justify-content:space-between; align-items:center;
             gap:var(--rp-s2); margin-bottom:var(--rp-s3); }
.rp-vend-name{ font-size:.95rem; font-weight:700; color:var(--rp-ink); }
.rp-vend-row{ display:flex; justify-content:space-between; gap:var(--rp-s3);
              padding:5px 0; font-size:.79rem; border-top:1px solid var(--rp-line); }
.rp-vend-row:first-of-type{ border-top:none; }
.rp-vend-k{ color:var(--rp-ink-3); }
.rp-vend-v{ color:var(--rp-ink); font-weight:600; text-align:right;
            overflow-wrap:anywhere; }

/* Badge / flyer thumbnails on each credential card. */
.rp-vend-assets{ display:grid; grid-template-columns:1fr 1fr; gap:var(--rp-s3);
                 margin-top:var(--rp-s3); }
.rp-vend-asset{ min-width:0; text-align:center; }
.rp-vend-thumb{ width:100%; height:64px; object-fit:contain; display:block;
                border:1px solid var(--rp-line); border-radius:6px;
                background:#fafafa; padding:3px; box-sizing:border-box; }
.rp-vend-thumb--none{ border-style:dashed; color:var(--rp-ink-3); font-size:.68rem;
                      display:flex; align-items:center; justify-content:center; }
.rp-vend-asset-k{ display:block; margin-top:3px; font-size:.68rem; color:var(--rp-ink-3); }

/* ── Header overflow menu ─────────────────────────────────────────────
   <details>/<summary> so it needs no JS and closes on Escape natively. */
.rp-more{ position:relative; }
.rp-more > summary{ list-style:none; cursor:pointer; width:30px; height:30px; border-radius:7px;
                    display:flex; align-items:center; justify-content:center;
                    color:var(--rp-ink-3); font-size:1.1rem; border:1px solid transparent; }
.rp-more > summary::-webkit-details-marker{ display:none; }
.rp-more > summary:hover{ background:#f3f4f6; color:var(--rp-ink); }
.rp-more[open] > summary{ background:#f3f4f6; border-color:var(--rp-edge); }
.rp-more-menu{ position:absolute; right:0; top:34px; z-index:30; min-width:190px;
               background:#fff; border:1px solid var(--rp-edge); border-radius:9px;
               box-shadow:0 8px 24px rgba(16,24,40,.12); padding:5px; }
.rp-more-menu a{ display:block; padding:7px 11px; border-radius:6px; font-size:.82rem;
                 color:var(--rp-ink-2); text-decoration:none; white-space:nowrap; }
.rp-more-menu a:hover{ background:#f3f4f6; color:var(--rp-ink); }