/* RRCC interface system, 2026
   Loaded after each page's legacy styles so this is the single final visual layer. */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --rr-red: #b4232b;
  --rr-red-hover: #941c23;
  --rr-red-soft: #fdf0f0;
  --rr-red-line: #f0cdcd;
  --rr-navy: #17233d;

  /* THE HEADER BAR. One token decides the colour the whole product wears. Deep red
     rather than the brand red, so white on it clears AA at 8.9:1 and the brighter
     --rr-red stays free to mean "this needs you" instead of being the furniture.
     Change --rr-header alone to restyle every page's header. */
  --rr-header: #17233d;
  --rr-header-ink: #ffffff;
  --rr-header-ink-2: #9fabc2;
  --rr-header-line: rgba(255, 255, 255, .12);
  --rr-header-chip: rgba(255, 255, 255, .15);

  /* Neutrals warmed a touch toward the red rather than the usual blue-slate. Small
     move, and it is most of why the panels stop looking like a stock template. */
  --rr-ink: #171514;
  --rr-body-copy: #3d3733;
  --rr-muted: #5d5551;
  --rr-faint: #8b817b;
  --rr-line: #e5e0dd;
  --rr-line-strong: #d3ccc7;
  --rr-surface: #ffffff;
  --rr-surface-soft: #faf8f7;
  --rr-page: #f7f5f4;
  --rr-green: #186b45;
  --rr-green-soft: #e9f4ee;
  --rr-green-line: #c2e0d0;
  --rr-amber: #8a5a12;
  --rr-amber-soft: #fdf3e3;
  --rr-amber-line: #efd9b4;
  --rr-blue: #1f4a9c;
  --rr-blue-soft: #edf2fd;
  --rr-blue-line: #c8d7f5;
  --rr-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rr-display: "Poppins", var(--rr-body);
  --rr-radius-sm: 10px;
  --rr-radius: 16px;
  --rr-radius-lg: 22px;
  --rr-shadow-sm: 0 1px 2px rgba(23, 21, 20, .04), 0 7px 18px rgba(23, 21, 20, .04);
  --rr-shadow: 0 2px 3px rgba(23, 21, 20, .05), 0 16px 38px rgba(23, 21, 20, .08);
  --rr-shadow-pop: 0 24px 72px rgba(23, 21, 20, .26);
  --rr-content: 1200px;
  --rr-gutter: 24px;
  --rr-mobile-nav-height: 0px;
}

html.rrcc-ui {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}

html.rrcc-ui *,
html.rrcc-ui *::before,
html.rrcc-ui *::after { box-sizing: border-box; }

html.rrcc-ui:not(.rrcc-page-recruitment) body {
  color: var(--rr-ink);
  background-color: var(--rr-page);
  background-image:
    radial-gradient(circle at 10% -10%, rgba(180, 35, 43, .055), transparent 28rem),
    radial-gradient(circle at 96% 8%, rgba(23, 35, 61, .035), transparent 24rem);
  background-attachment: fixed;
  font-family: var(--rr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.rrcc-ui body { min-width: 0; }
html.rrcc-ui [hidden] { display: none !important; }
html.rrcc-ui img, html.rrcc-ui svg { max-width: 100%; }
html.rrcc-ui button, html.rrcc-ui input, html.rrcc-ui select, html.rrcc-ui textarea { font-family: inherit; }

html.rrcc-ui :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--rr-red) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

html.rrcc-ui :where(button, a, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .56;
}

html.rrcc-ui .skip-link,
html.rrcc-ui .rrcc-skip-link {
  position: fixed;
  left: 14px;
  top: 10px;
  z-index: 2147483647;
  transform: translateY(-170%);
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--rr-navy);
  color: #fff;
  font: 700 13px/1.2 var(--rr-display);
  text-decoration: none;
  box-shadow: var(--rr-shadow-pop);
}

html.rrcc-ui .skip-link:focus,
html.rrcc-ui .rrcc-skip-link:focus { transform: translateY(0); }

/* Shared header and navigation */
html.rrcc-ui body .sitehdr {
  position: sticky;
  top: 0;
  z-index: 240;
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 8px 0;
  background: rgba(255, 255, 255, .96);
  border-top: 3px solid var(--rr-red);
  border-bottom: 1px solid rgba(199, 208, 220, .88);
  box-shadow: 0 8px 24px rgba(23, 35, 61, .055);
  backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
}

html.rrcc-ui body .sitehdr .logolink {
  width: 100%;
  max-width: var(--rr-content);
  margin: 0 auto;
  padding: 0 var(--rr-gutter);
  display: flex;
  align-items: center;
  text-decoration: none;
}

html.rrcc-ui body .sitehdr .sitelogo {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
}

html.rrcc-ui body .sitehdr #featBtn,
html.rrcc-ui body .sitehdr .hdrcta {
  position: absolute;
  right: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter)));
  top: 50%;
  transform: translateY(-50%);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 1px solid var(--rr-line-strong);
  border-radius: 999px;
  color: var(--rr-navy);
  background: #fff;
  box-shadow: 0 3px 10px rgba(23, 35, 61, .06);
  font: 600 13px/1 var(--rr-display);
  cursor: pointer;
}

html.rrcc-ui body .sitehdr #featBtn:hover,
html.rrcc-ui body .sitehdr .hdrcta:hover { color: var(--rr-red); background: var(--rr-red-soft); border-color: var(--rr-red-line); }

html.rrcc-ui body .progtabs {
  width: fit-content;
  max-width: calc(100% - 2 * var(--rr-gutter));
  margin: 16px auto 9px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: linear-gradient(145deg, #1d2a46, #111a2d);
  box-shadow: 0 11px 28px rgba(17, 24, 39, .2);
  scrollbar-width: none;
}

html.rrcc-ui body .progtabs::-webkit-scrollbar { display: none; }

html.rrcc-ui body .progtabs :where(.progtab, .feattab) {
  position: static;
  flex: none;
  min-height: 40px;
  margin: 0;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(255, 255, 255, .78);
  background: transparent;
  box-shadow: none;
  font: 500 13px/1.2 var(--rr-display);
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

html.rrcc-ui body .progtabs :where(.progtab, .feattab):hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

html.rrcc-ui body .progtabs .progtab.active,
html.rrcc-ui body .progtabs .progtab[aria-current="page"] {
  color: #fff;
  background: var(--rr-red);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 6px 18px rgba(180, 35, 43, .38);
  font-weight: 600;
}

html.rrcc-ui body .progtabs .feattab {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

html.rrcc-ui body .topnav {
  width: calc(100% - 2 * var(--rr-gutter));
  max-width: calc(var(--rr-content) - 2 * var(--rr-gutter));
  min-height: 54px;
  margin: 0 auto 18px;
  padding: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
  border: 1px solid var(--rr-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--rr-shadow-sm);
}

html.rrcc-ui body .topnav .nav-links {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

html.rrcc-ui body .topnav :where(.navlink, button.navlink) {
  flex: none;
  min-height: 40px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #4b5568;
  background: transparent;
  font: 500 12.5px/1.2 var(--rr-display);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

html.rrcc-ui body .topnav :where(.navlink, button.navlink):hover {
  color: var(--rr-ink);
  background: #f1f3f6;
}

html.rrcc-ui body .topnav .navlink.active,
html.rrcc-ui body .topnav .navlink[aria-current="page"] {
  color: var(--rr-navy);
  border-color: var(--rr-red);
  background: #eef2f7;
  box-shadow: inset 0 -3px 0 var(--rr-red);
  font-weight: 600;
}

html.rrcc-ui body .subtabs {
  width: 100%;
  max-width: var(--rr-content);
  margin: -4px auto 18px;
  padding: 0 var(--rr-gutter);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

html.rrcc-ui body .subtabs .subtab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--rr-muted);
  background: transparent;
  font: 600 12.5px/1.2 var(--rr-display);
  text-decoration: none;
}

html.rrcc-ui body .subtabs .subtab:hover { color: var(--rr-ink); background: rgba(255, 255, 255, .8); }
html.rrcc-ui body .subtabs .subtab.active,
html.rrcc-ui body .subtabs .subtab[aria-current="page"] {
  color: var(--rr-red);
  border-color: var(--rr-red-line);
  background: var(--rr-red-soft);
}

/* Content rhythm and typography */
html.rrcc-ui body main.pwrap,
html.rrcc-ui body main.rwrap,
html.rrcc-ui body main.iwrap {
  width: 100%;
  max-width: var(--rr-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rr-gutter);
  padding-right: var(--rr-gutter);
}

html.rrcc-ui body :where(.phead, header.head, .head):not(.sitehdr) h1,
html.rrcc-ui body :where(.phead, header.head, .head):not(.sitehdr) h2,
html.rrcc-ui body .top h1 {
  color: var(--rr-navy);
  font-family: var(--rr-display);
  font-weight: 700;
  letter-spacing: -.025em;
}

html.rrcc-ui body :where(.phead, header.head, .head):not(.sitehdr) h1 {
  font-size: clamp(25px, 3.2vw, 34px);
  line-height: 1.12;
}

html.rrcc-ui body :where(.sub, .hint, .meta, .stamp) { color: var(--rr-muted); }
html.rrcc-ui body :where(.meta, .stamp, .hint) { line-height: 1.45; }

/* Cards and panels */
html.rrcc-ui body :where(.card, .panel, .tile, .sv-card, .listing, .ovsec, .personcard) {
  border-color: var(--rr-line);
  border-radius: var(--rr-radius);
  box-shadow: var(--rr-shadow-sm);
}

html.rrcc-ui body :where(.card, .panel, .tile, .sv-card, .listing, .ovsec, .personcard):not(.card-archived) {
  background-color: var(--rr-surface);
}

html.rrcc-ui body :where(.card, .panel, .tile, .sv-card, .listing, .ovsec, .personcard) {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

html.rrcc-ui body :where(.card, .panel, .sv-card)[role="button"]:hover,
html.rrcc-ui body a.org:hover {
  border-color: #cbd2dc;
  box-shadow: var(--rr-shadow);
}

html.rrcc-ui body .stat {
  min-height: 78px;
  border: 1px solid var(--rr-line);
  border-radius: 14px;
  background: var(--rr-surface);
  box-shadow: var(--rr-shadow-sm);
}

html.rrcc-ui body .stat .n { color: var(--rr-navy); font-family: var(--rr-display); }
html.rrcc-ui body .stat .l {
  min-height: 0;
  color: var(--rr-muted);
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: .035em;
}

/* Buttons and fields */
html.rrcc-ui body :where(button, .btn, a.btn, .ghost, .clearf) {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 700;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

html.rrcc-ui body :where(.btn.primary, button.primary, button.red, #addBtn, .apply) {
  border-color: var(--rr-red);
  color: #fff;
  background: var(--rr-red);
  box-shadow: 0 7px 18px rgba(180, 35, 43, .2);
}

html.rrcc-ui body :where(.btn.primary, button.primary, button.red, #addBtn, .apply):hover:not(:disabled) {
  border-color: var(--rr-red-hover);
  color: #fff;
  background: var(--rr-red-hover);
}

html.rrcc-ui body :where(.ghost, .clearf, button:not(.primary):not(.red):not(.rrcc-mobile-nav-item):not(.rrcc-mobile-close)) {
  border-color: var(--rr-line-strong);
}

html.rrcc-ui body :where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], input:not([type]), select, textarea) {
  min-height: 44px;
  border-color: var(--rr-line-strong);
  border-radius: 10px;
  color: var(--rr-ink);
  background: #fff;
  box-shadow: 0 1px 1px rgba(23, 35, 61, .025);
}

html.rrcc-ui body :where(input, select, textarea)::placeholder { color: #737d8f; opacity: 1; }

html.rrcc-ui body :where(input, select, textarea):focus {
  border-color: var(--rr-red) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(180, 35, 43, .11) !important;
}

html.rrcc-ui body input[type="checkbox"],
html.rrcc-ui body input[type="radio"] { accent-color: var(--rr-red); }

/* Status and feedback */
html.rrcc-ui body :where(.loading, .gate, .empty, .pempty) {
  color: var(--rr-muted);
  font-size: 14px;
}

html.rrcc-ui body :where(.pill, .chip, .tag, .badge, .srctag, .ntag, .latechip) {
  line-height: 1.35;
}

html.rrcc-ui body :where(.mou-line, .ok-cell, .o-sent, .stmt-sent) { color: var(--rr-green); }
html.rrcc-ui body :where(.mou-wait, .todo, .warn) { color: var(--rr-amber); }
html.rrcc-ui body .status.requested { color: #536276; background: #eef1f5; }
html.rrcc-ui body .status.open { color: #7a4c00; background: var(--rr-amber-soft); }

html.rrcc-ui body :where(.toast, #status) {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: var(--rr-navy);
  color: #fff;
  box-shadow: var(--rr-shadow-pop);
}

/* Tables */
html.rrcc-ui .rrcc-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-radius: inherit;
  scrollbar-width: thin;
  scrollbar-color: #abb3c0 transparent;
}

html.rrcc-ui .rrcc-table-scroll:focus-visible {
  outline: 3px solid rgba(180, 35, 43, .25);
  outline-offset: 2px;
}

html.rrcc-ui body table { color: var(--rr-ink); }
html.rrcc-ui body table th {
  color: #566176;
  background-color: #f6f8fa;
  font-size: 11px;
  letter-spacing: .045em;
}
html.rrcc-ui body table td { color: var(--rr-body-copy); }

/* Shared dialog and bottom-sheet treatment */
html.rrcc-ui body .rrcc-dialog-backdrop {
  z-index: 1000 !important;
  background-color: rgba(12, 19, 34, .62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

html.rrcc-ui body .rrcc-fullscreen-dialog { z-index: 1000 !important; }

html.rrcc-ui body .rrcc-dialog {
  max-height: min(88dvh, 900px);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--rr-radius-lg);
  box-shadow: var(--rr-shadow-pop);
}

html.rrcc-ui body :where(.hub-x, .pm-x, .close, .x, .modal-close, .sheet-x) {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Authentication is part of the product, not an unstyled wall in front of it. */
html.rrcc-ui #rrccAuthOverlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 18% 12%, rgba(218, 55, 64, .34), transparent 27rem),
    radial-gradient(circle at 90% 86%, rgba(82, 102, 143, .23), transparent 25rem),
    linear-gradient(145deg, #18243d 0%, #111827 58%, #0c1322 100%);
}

html.rrcc-ui #rrccAuthOverlay .card {
  position: relative;
  width: min(100%, 430px);
  max-width: 430px;
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  padding: 31px 30px 28px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 24px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}

html.rrcc-ui #rrccAuthOverlay .auth-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rr-line);
}

html.rrcc-ui #rrccAuthOverlay .auth-brand img { width: auto; height: 43px; }
html.rrcc-ui #rrccAuthOverlay .auth-brand span {
  color: var(--rr-red);
  font: 700 10.5px/1.2 var(--rr-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

html.rrcc-ui #rrccAuthOverlay h2 {
  margin: 0 0 6px;
  color: var(--rr-navy);
  font: 700 25px/1.18 var(--rr-display);
  letter-spacing: -.025em;
}

html.rrcc-ui #rrccAuthOverlay p.sub { margin-bottom: 21px; color: var(--rr-muted); font-size: 14px; }
html.rrcc-ui #rrccAuthOverlay label {
  margin: 14px 0 6px;
  color: #465167;
  font: 700 12px/1.3 var(--rr-display);
  letter-spacing: 0;
  text-transform: none;
}
html.rrcc-ui #rrccAuthOverlay input { min-height: 48px; border-radius: 12px; font-size: 16px; }
html.rrcc-ui #rrccAuthOverlay button.primary { min-height: 49px; margin-top: 20px; border-radius: 12px; font-family: var(--rr-display); }
html.rrcc-ui #rrccAuthOverlay .err { color: var(--rr-red); font-weight: 600; }
html.rrcc-ui #rrccAuthOverlay .hint { margin-top: 17px; color: var(--rr-muted); font-size: 13px; }

html.rrcc-ui #rrccSignedBar {
  z-index: 820 !important;
  bottom: calc(12px + var(--rr-mobile-nav-height) + env(safe-area-inset-bottom));
}
html.rrcc-ui #rrccSignedInner { border-color: var(--rr-line); border-radius: 17px; box-shadow: var(--rr-shadow-pop); }
html.rrcc-ui #rrccBarTog { min-width: 44px; min-height: 44px; border-color: var(--rr-line-strong); }

html.rrcc-ui .rrcc-confirm-backdrop {
  overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(12, 19, 34, .64) !important;
  backdrop-filter: blur(5px);
}
html.rrcc-ui .rrcc-confirm-dialog { max-height: calc(100dvh - 36px); overflow-y: auto; border-radius: 20px !important; }

/* Public Service Opportunities */
html.rrcc-page-jobs body .wrap { max-width: 1080px; padding: 22px var(--rr-gutter) 48px; }
html.rrcc-page-jobs body header.hero {
  padding: 42px 30px 37px;
  border-radius: 24px;
  background: radial-gradient(120% 150% at 50% -25%, #df4c54 0%, #b4232b 45%, #78151b 100%);
  box-shadow: 0 18px 46px rgba(122, 21, 27, .25);
}
html.rrcc-page-jobs body header.hero h1 { font: 700 clamp(38px, 5vw, 50px)/1.03 var(--rr-display); }
html.rrcc-page-jobs body header.hero .tag { font-size: clamp(18px, 2.2vw, 21px); }
html.rrcc-page-jobs body .hero-stats { margin-top: 18px; padding: 11px 5px; backdrop-filter: blur(4px); }
html.rrcc-page-jobs body .hero-cta { min-height: 48px; margin-top: 18px; display: inline-flex; align-items: center; }
html.rrcc-page-jobs body .controls {
  position: sticky;
  top: var(--rr-stick, 60px);
  z-index: 32;
  margin: 15px 0;
  padding: 10px;
  border: 1px solid var(--rr-line);
  border-radius: 15px;
  background: rgba(247, 249, 251, .94);
  box-shadow: var(--rr-shadow-sm);
  backdrop-filter: blur(12px);
}
html.rrcc-page-jobs body .org {
  margin: 15px 0;
  padding: 18px 20px;
  border: 1px solid var(--rr-line);
  border-left: 5px solid var(--rr-red);
  border-radius: 18px;
  box-shadow: var(--rr-shadow-sm);
}
html.rrcc-page-jobs body .org:hover { box-shadow: var(--rr-shadow); }
html.rrcc-page-jobs body .org h2 { color: var(--rr-navy); font-family: var(--rr-display); font-size: 20px; }
html.rrcc-page-jobs body .apply { min-height: 44px; border-radius: 11px; }

/* Core staff workflows — one visual language across dashboard, visits, review,
   recruitment, and VISTA. The hero establishes place; the white command surfaces
   below it establish what to do next. */
html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries, .rrcc-page-vista, .rrcc-page-vista-dashboard) body :where(.top, .sv-top, .bd-top, .phead) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(218, 55, 64, .32), transparent 19rem),
    linear-gradient(135deg, #1d2a47 0%, #17233d 54%, #10182a 100%);
  box-shadow: 0 18px 42px rgba(23, 35, 61, .2);
}

html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries, .rrcc-page-vista, .rrcc-page-vista-dashboard) body :where(.top, .sv-top, .bd-top, .phead)::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -76px;
  z-index: -1;
  width: 210px;
  height: 170px;
  border: 28px solid rgba(255, 255, 255, .045);
  border-radius: 50%;
  transform: rotate(-16deg);
}

html.rrcc-page-index body .top h1,
html.rrcc-page-site-visit body .sv-top h1,
html.rrcc-page-job-admin body .bd-top h1,
html.rrcc-page-inquiries body .phead h1,
html.rrcc-page-vista body .phead h1,
html.rrcc-page-vista-dashboard body .phead h1 {
  margin: 3px 0 6px;
  color: #fff;
  font: 700 clamp(26px, 3.2vw, 36px)/1.12 var(--rr-display);
  letter-spacing: -.035em;
}

html.rrcc-ui body :where(.page-kicker, .bd-kicker, .phead-kicker, .sv-eyebrow) {
  color: #ffb7bb;
  font: 700 10.5px/1.3 var(--rr-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

html.rrcc-ui body :where(.top-sub, .bd-lede, .phead p),
html.rrcc-page-site-visit body .sv-top .sv-status {
  max-width: 720px;
  color: rgba(255, 255, 255, .76);
  font-size: 13.5px;
  line-height: 1.55;
}

html.rrcc-ui body :where(.top, .sv-top, .bd-top, .phead) :where(label, .muted) { color: rgba(255, 255, 255, .72); }

/* Dashboard */
html.rrcc-page-index body .top {
  width: calc(100% - 2 * var(--rr-gutter));
  max-width: var(--rr-content);
  margin: 0 auto 16px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  backdrop-filter: none;
}
html.rrcc-page-index body .top-sub { margin: 0; }
html.rrcc-page-index body .top .yearpick { min-width: 220px; text-align: left; }
html.rrcc-page-index body .top .yearpick > label { color: rgba(255, 255, 255, .72); }
html.rrcc-page-index body .top .yearrow { margin-top: 7px; }
html.rrcc-page-index body .top #yearSel { flex: 1; border-color: rgba(255, 255, 255, .22); }
html.rrcc-page-index body .top #addYearBtn { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); }
html.rrcc-page-index body .top #addYearBtn:hover { background: rgba(255, 255, 255, .16); }

html.rrcc-page-index body .summary,
html.rrcc-page-index body .tabs,
html.rrcc-page-index body .controls,
html.rrcc-page-index body .list,
html.rrcc-page-index body .mappanel,
html.rrcc-page-index body .foot { max-width: var(--rr-content); }

html.rrcc-page-index body .summary {
  padding: 0 var(--rr-gutter) 14px;
  display: grid;
  grid-template-columns: 1.8fr 4.8fr 2.7fr;
  gap: 12px;
}
html.rrcc-page-index body .sumgroup {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--rr-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--rr-shadow-sm);
}
html.rrcc-page-index body .sumgroup + .sumgroup { padding-left: 14px; border-left: 1px solid var(--rr-line); }
html.rrcc-page-index body .sumlabel { min-height: 21px; margin: 0 0 9px; color: #566176; font-size: 10.5px; }
html.rrcc-page-index body .sumcards { gap: 7px; }
html.rrcc-page-index body .stat {
  position: relative;
  min-height: 76px;
  padding: 12px 10px;
  overflow: hidden;
  text-align: left;
  appearance: none;
  border: 1px solid #e3e8ef;
  border-radius: 13px;
  background: #f8fafc;
  box-shadow: none;
}
html.rrcc-page-index body button.stat { width: 100%; cursor: pointer; }
html.rrcc-page-index body .stat > :where(.n, .l) { display: block; }
html.rrcc-page-index body button.stat:hover { border-color: #bac5d2; background: #fff; box-shadow: 0 7px 18px rgba(23, 35, 61, .08); }
html.rrcc-page-index body .stat.todo { border-color: #efd9a6; background: var(--rr-amber-soft); }
html.rrcc-page-index body .stat.todo::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #d49622;
}
html.rrcc-page-index body .stat[aria-pressed="true"] {
  color: var(--rr-red);
  border-color: var(--rr-red);
  background: var(--rr-red-soft);
}
html.rrcc-page-index body .stat[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--rr-red);
  font: 700 12px/1 var(--rr-display);
}
html.rrcc-page-index body .stat .n { font-size: 23px; }
html.rrcc-page-index body .stat .l { margin-top: 7px; font-size: 10px; }

html.rrcc-page-index body .mappanel { margin-top: 0; }
html.rrcc-page-index body .mappanel > summary { color: var(--rr-navy); border-color: var(--rr-line); border-radius: 11px; background: rgba(255, 255, 255, .88); }
html.rrcc-page-index body .tabs { padding-top: 8px; }
html.rrcc-page-index body .tabs .tab { min-height: 40px; border-radius: 11px; }
html.rrcc-page-index body .tabs .tab.active { background: var(--rr-navy); border-color: var(--rr-navy); }
html.rrcc-page-index body .controls {
  margin-top: 9px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--rr-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--rr-shadow-sm);
}
html.rrcc-page-index body .controls #search { min-height: 46px; border-radius: 11px; }
html.rrcc-page-index body .controls #addBtn { min-height: 46px; padding-inline: 18px; }
html.rrcc-page-index body .sortwrap { min-height: 46px; padding-left: 4px; }
html.rrcc-page-index body .sortsel { min-height: 44px; border-radius: 10px; }
html.rrcc-page-index body .card {
  overflow: hidden;
  border-color: var(--rr-line);
  border-radius: 18px;
  box-shadow: var(--rr-shadow-sm);
}
html.rrcc-page-index body .card:hover { border-color: #cad2dc; box-shadow: var(--rr-shadow); }
html.rrcc-page-index body .card-head { padding: 17px 18px 14px; }
html.rrcc-page-index body .avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--rr-navy); box-shadow: none; }
html.rrcc-page-index body .card-id h3 { color: var(--rr-navy); font-family: var(--rr-display); font-size: 16px; }
html.rrcc-page-index body .mou-line { margin-top: 7px; padding: 6px 9px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; background: var(--rr-green-soft); font-size: 11.5px; }
html.rrcc-page-index body .mou-line.mou-wait { color: var(--rr-amber); background: var(--rr-amber-soft); }
html.rrcc-page-index body .mou-line.mou-none { color: var(--rr-red); background: var(--rr-red-soft); }
html.rrcc-page-index body .progress { height: 6px; }
html.rrcc-page-index body .supbar { background: #f8fafc; }
html.rrcc-page-index body .supsum { min-height: 48px; }
html.rrcc-page-index body .srow { position: relative; min-height: 62px; background: #fff; }
html.rrcc-page-index body .srow.s-OPEN,
html.rrcc-page-index body .srow.s-REQUESTED { background: #fff; box-shadow: inset 4px 0 0 #d39a2a; }
html.rrcc-page-index body .srow.s-PENDING { box-shadow: inset 4px 0 0 var(--rr-blue); }
html.rrcc-page-index body .srow.s-FILLED { box-shadow: inset 4px 0 0 var(--rr-green); }

/* Site visits */
html.rrcc-page-site-visit body .sv-wrap { max-width: var(--rr-content); padding: 0 var(--rr-gutter) 46px; }
html.rrcc-page-site-visit body .sv-top { margin: 0 0 14px; padding: 24px 26px; }
html.rrcc-page-site-visit body .sv-top .sv-status { margin: 4px 0 0; }
html.rrcc-page-site-visit body .sv-top .sv-yearrow { position: relative; z-index: 1; }
html.rrcc-page-site-visit body .sv-top .sv-yearrow :where(select, button) { min-height: 44px; }
html.rrcc-page-site-visit body .sv-top .sv-yearrow button { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); }
html.rrcc-page-site-visit body .sv-workspace {
  padding: 17px;
  border: 1px solid var(--rr-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .74);
  box-shadow: var(--rr-shadow-sm);
}
html.rrcc-page-site-visit body .sv-workhead {
  margin: 0 0 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
html.rrcc-page-site-visit body .sv-workhead h2,
html.rrcc-page-job-admin body .bd-workhead h2 {
  margin: 2px 0 0;
  color: var(--rr-navy);
  font: 700 20px/1.25 var(--rr-display);
  letter-spacing: -.025em;
}
html.rrcc-page-site-visit body .sv-workhead p,
html.rrcc-page-job-admin body .bd-workhead p { max-width: 470px; margin: 0; color: var(--rr-muted); font-size: 12.5px; line-height: 1.5; }
html.rrcc-page-site-visit body .sv-section-kicker,
html.rrcc-page-job-admin body .bd-section-kicker { color: var(--rr-red); font: 700 10px/1.3 var(--rr-display); letter-spacing: .1em; text-transform: uppercase; }
html.rrcc-page-site-visit body .sv-cards { margin: 0 0 10px; gap: 10px; }
html.rrcc-page-site-visit body .sv-card {
  position: relative;
  min-height: 94px;
  padding: 16px;
  overflow: hidden;
  border-color: var(--rr-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--rr-shadow-sm);
  text-align: left;
}
html.rrcc-page-site-visit body .sv-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #8491a5; }
html.rrcc-page-site-visit body .sv-card.ok::before { background: var(--rr-green); }
html.rrcc-page-site-visit body .sv-card.todo::before { background: #d49722; }
html.rrcc-page-site-visit body .sv-card .n { color: var(--rr-navy); font-size: 28px; }
html.rrcc-page-site-visit body .sv-card .l { color: var(--rr-muted); font-size: 10.5px; }
html.rrcc-page-site-visit body .sv-card[aria-pressed="true"] { border-color: var(--rr-red); background: var(--rr-red-soft); }
html.rrcc-page-site-visit body .sv-progress { height: 10px; margin: 0 0 12px; background: #dfe5ec; }
html.rrcc-page-site-visit body .sv-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 11px;
  border: 1px solid var(--rr-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--rr-shadow-sm);
}
html.rrcc-page-site-visit body .sv-controls #search { min-height: 46px; }
html.rrcc-page-site-visit body .sv-controls .btn { min-height: 44px; }
html.rrcc-page-site-visit body .sv-tools-more { position: relative; display: block; min-width: 0; }
html.rrcc-page-site-visit body .sv-tools-more > .sv-tools-summary { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html.rrcc-page-site-visit body .sv-tools-more > .sv-tools-summary::after { content: "▾"; font-size: 11px; }
html.rrcc-page-site-visit body .sv-tools-more.is-open > .sv-tools-summary::after { content: "▴"; }
html.rrcc-page-site-visit body .sv-tools-menu { display: none; }
html.rrcc-page-site-visit body .sv-tools-more.is-open > .sv-tools-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 40;
  width: min(330px, calc(100vw - 2 * var(--rr-gutter)));
  padding: 9px;
  display: grid;
  gap: 7px;
  border: 1px solid var(--rr-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--rr-shadow-pop);
}
html.rrcc-page-site-visit body .sv-tools-menu :where(.btn, select) { width: 100%; text-align: left; }
html.rrcc-page-site-visit body .sv-task-panel { margin: 10px 0 16px; padding: 16px; border-radius: 17px; box-shadow: var(--rr-shadow-sm); }
html.rrcc-page-site-visit body table.sv { border-color: var(--rr-line); border-radius: 16px; box-shadow: var(--rr-shadow-sm); }
html.rrcc-page-site-visit body table.sv th { padding: 12px; background: #f3f6f9; }
html.rrcc-page-site-visit body table.sv td { padding: 12px; background: #fff; }
html.rrcc-page-site-visit body table.sv tr.done td { background: #fff; }
html.rrcc-page-site-visit body table.sv tr.todo td { background: #fff; }
html.rrcc-page-site-visit body table.sv tr.done td:first-child { box-shadow: inset 5px 0 0 var(--rr-green); }
html.rrcc-page-site-visit body table.sv tr.todo td:first-child { box-shadow: inset 5px 0 0 #d49722; }
html.rrcc-page-site-visit body .pill.ok { color: var(--rr-green); border: 1px solid #b9dfc8; background: var(--rr-green-soft); }
html.rrcc-page-site-visit body .pill.todo { color: var(--rr-amber); border-color: #efd9a6; background: var(--rr-amber-soft); }
html.rrcc-page-site-visit body .sv-modal { background: rgba(12, 19, 34, .66); backdrop-filter: blur(6px); }
html.rrcc-page-site-visit body .sv-sheet { border: 1px solid rgba(255, 255, 255, .55); border-radius: 22px; box-shadow: var(--rr-shadow-pop); }
html.rrcc-page-site-visit body .sv-sheet h2 { color: var(--rr-navy); font-family: var(--rr-display); }
html.rrcc-page-site-visit body .sv-sheet-head { margin: -2px 0 8px; padding-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rr-line); }
html.rrcc-page-site-visit body .sv-sheet-kicker { margin-bottom: 3px; color: var(--rr-red); font: 700 10px/1.25 var(--rr-display); letter-spacing: .1em; text-transform: uppercase; }
html.rrcc-page-site-visit body .sv-sheet-close { width: 44px; min-width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--rr-line-strong); border-radius: 12px; color: var(--rr-muted); background: #fff; font-size: 24px; line-height: 1; }
html.rrcc-page-site-visit body .sv-sheet-close:hover { color: var(--rr-red); border-color: var(--rr-red-line); background: var(--rr-red-soft); }
html.rrcc-page-site-visit body .sv-form-guide { margin: 10px 0 12px; padding: 9px 11px; border: 1px solid #cbdaf0; border-radius: 10px; color: #315783; background: var(--rr-blue-soft); font-size: 12px; font-weight: 600; line-height: 1.45; }
html.rrcc-page-site-visit body .sv-check { border-color: var(--rr-line); border-radius: 12px; background: #f8fafc; }
html.rrcc-page-site-visit body .qchip.active { color: #fff; border-color: var(--rr-blue); background: var(--rr-blue); }

/* Position review */
html.rrcc-page-app-review body > .wrap,
html.rrcc-page-job-admin body > .wrap { max-width: var(--rr-content); padding-left: var(--rr-gutter); padding-right: var(--rr-gutter); }
html.rrcc-page-job-admin body .bd-wrap { max-width: var(--rr-content); padding: 0 var(--rr-gutter) 48px; }
html.rrcc-page-job-admin body .bd-top { margin: 0 0 14px; padding: 24px 26px; }
html.rrcc-page-job-admin body .bd-top .bd-lede { margin-top: 2px; }
html.rrcc-page-job-admin body .bd-unplaced { margin: 0 0 14px; border: 1px solid #efc4c8; border-left: 5px solid var(--rr-red); border-radius: 16px; background: #fff7f7; box-shadow: var(--rr-shadow-sm); }
html.rrcc-page-job-admin body .bd-tools {
  position: sticky;
  top: var(--rr-stick, 60px);
  z-index: 32;
  margin: 0 0 14px;
  padding: 11px;
  border: 1px solid var(--rr-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--rr-shadow-sm);
  backdrop-filter: blur(12px);
}
html.rrcc-page-job-admin body .bd-tools :where(.bd-field, label) { color: var(--rr-muted); font-size: 11px; font-weight: 700; }
html.rrcc-page-job-admin body .bd-tools :where(input, select) { margin-top: 4px; }
html.rrcc-page-job-admin body .bd-tool-field { display: grid; gap: 2px; }
html.rrcc-page-job-admin body .bd-tool-search { flex: 1 1 420px; }
html.rrcc-page-job-admin body .bd-tool-year { flex: 0 0 190px; }
html.rrcc-page-job-admin body .bd-tool-field :where(input, select) { width: 100%; }
html.rrcc-page-job-admin body .bd-workhead { margin: 22px 0 12px; display: flex; align-items: end; gap: 16px 28px; flex-wrap: wrap; }
html.rrcc-page-job-admin body .bd-workhead > p { margin-left: auto; }
html.rrcc-page-job-admin body .bd-queue-tabs { display: none; }
html.rrcc-page-job-admin body .bd-cols { gap: 18px; }
html.rrcc-page-job-admin body .bd-col {
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--rr-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--rr-shadow-sm);
}
html.rrcc-page-job-admin body .bd-col.todo { border-top: 5px solid #d49722; }
html.rrcc-page-job-admin body .bd-col.live { border-top: 5px solid var(--rr-green); }
html.rrcc-page-job-admin body .bd-colh { position: static; z-index: 2; padding: 17px 18px 15px; background: rgba(255, 255, 255, .96); }
html.rrcc-page-job-admin body .bd-col.todo .bd-colh { background: linear-gradient(180deg, #fffaf0, #fff); }
html.rrcc-page-job-admin body .bd-col.live .bd-colh { background: linear-gradient(180deg, #eef9f2, #fff); }
html.rrcc-page-job-admin body .bd-colh .n { font-family: var(--rr-display); font-size: 30px; }
html.rrcc-page-job-admin body .bd-colh .t { color: var(--rr-navy); font-family: var(--rr-display); font-size: 15px; }
html.rrcc-page-job-admin body .bd-body { padding: 10px; }
html.rrcc-page-job-admin body .orgcard { margin: 0 0 10px; border-color: var(--rr-line); border-radius: 15px; background: #fff; box-shadow: 0 2px 9px rgba(23, 35, 61, .055); }
html.rrcc-page-job-admin body .orgcard:hover { border-color: #c7d0dc; box-shadow: var(--rr-shadow-sm); }
html.rrcc-page-job-admin body .bd-approved-contacts,
html.rrcc-page-job-admin body .bd-attn { margin-bottom: 14px; border: 1px solid var(--rr-line); border-radius: 15px; background: #fff; box-shadow: var(--rr-shadow-sm); }
html.rrcc-page-app-review body .rev { border-radius: 18px; box-shadow: var(--rr-shadow-sm); }

/* Recruitment and VISTA pipelines */
html.rrcc-ui body .rrcc-stage-filter { display: none; }
html.rrcc-page-inquiries body main.pwrap,
html.rrcc-page-vista body main.pwrap,
html.rrcc-page-vista-dashboard body main.pwrap { max-width: 1380px; padding: 0 18px 48px; }
html.rrcc-page-inquiries body .phead,
html.rrcc-page-vista body .phead,
html.rrcc-page-vista-dashboard body .phead { margin: 0 0 14px; padding: 24px 26px; align-items: center; }
html.rrcc-page-inquiries body .phead p,
html.rrcc-page-vista body .phead p,
html.rrcc-page-vista-dashboard body .phead p { margin: 5px 0 0; }
html.rrcc-page-inquiries body .phead .pyear { position: relative; z-index: 1; min-width: 235px; }
html.rrcc-page-inquiries body .phead .pyear-field { min-width: 165px; display: grid; gap: 4px; color: rgba(255, 255, 255, .72); font: 700 10px/1.2 var(--rr-display); letter-spacing: .07em; text-transform: uppercase; }
html.rrcc-page-inquiries body .phead .pyear-field select { width: 100%; color: var(--rr-ink); font-size: 13px; letter-spacing: 0; text-transform: none; }
html.rrcc-page-inquiries body .phead .pyear .btn { color: #fff; border-color: var(--rr-red); background: var(--rr-red); }
html.rrcc-page-inquiries body .phead .plink { color: rgba(255, 255, 255, .82); }
html.rrcc-page-vista body .phead .archtoggle { color: rgba(255, 255, 255, .8); }
html.rrcc-page-vista body .phead .edcount { color: #ffe5a8; }
/* Written for the navy hero, which section 7 later removed, so this note was white text on
   the light page and nobody could read it on the Partners board. Page colours now. */
html.rrcc-page-vista body .phead-note,
html.rrcc-page-vista-dashboard body .phead-note {
  width: fit-content;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid var(--rr-line);
  border-radius: 9px;
  color: var(--rr-muted);
  background: var(--rr-surface-soft);
  font-size: 11.5px;
  line-height: 1.4;
}
html.rrcc-page-inquiries body .pstatus,
html.rrcc-page-vista body .pstatus { margin: 0 0 10px; }
html.rrcc-page-inquiries body .pboard,
html.rrcc-page-vista body .pboard,
html.rrcc-page-vista-recruitment body .pboard { gap: 10px; }
html.rrcc-page-inquiries body .pcol,
html.rrcc-page-vista body .pcol,
html.rrcc-page-vista-recruitment body .pcol {
  --c: #718096;
  overflow: hidden;
  border: 1px solid var(--rr-line);
  border-top: 5px solid var(--c);
  border-radius: 17px;
  background: #f2f5f8;
  background: color-mix(in srgb, var(--c) 6%, white);
  box-shadow: var(--rr-shadow-sm);
}
html.rrcc-page-inquiries body .pcol:nth-child(1) { --c: #6d4bc3; }
html.rrcc-page-inquiries body .pcol:nth-child(2) { --c: #ba7817; }
html.rrcc-page-inquiries body .pcol:nth-child(3) { --c: #2d67b1; }
html.rrcc-page-inquiries body .pcol:nth-child(4) { --c: #7a4a10; }
html.rrcc-page-inquiries body .pcol:nth-child(5) { --c: #3658a8; }
html.rrcc-page-inquiries body .pcol:nth-child(6) { --c: #237446; }
html.rrcc-page-vista body .pcol:nth-child(1) { --c: #25776f; }
html.rrcc-page-vista body .pcol:nth-child(2) { --c: #326eb9; }
html.rrcc-page-vista body .pcol:nth-child(3) { --c: #7355b7; }
html.rrcc-page-vista body .pcol:nth-child(4) { --c: #b47618; }
html.rrcc-page-vista body .pcol:nth-child(5) { --c: #4e5faa; }
html.rrcc-page-vista body .pcol:nth-child(6) { --c: #267648; }
html.rrcc-page-inquiries body .pcol-h,
html.rrcc-page-vista body .pcol-h,
html.rrcc-page-vista-recruitment body .pcol-h {
  min-height: 86px;
  padding: 12px 12px 11px;
  display: block;
  border: 0;
  border-radius: 0;
  color: var(--rr-navy);
  background: rgba(255, 255, 255, .68);
  font-family: var(--rr-display);
  font-size: 13px;
  line-height: 1.28;
}
html.rrcc-ui body .pcol-step { display: block; margin-bottom: 5px; color: var(--c); font: 700 9.5px/1.2 var(--rr-display); letter-spacing: .09em; text-transform: uppercase; }
html.rrcc-ui body :where(.pcol-title, .pcol-label) { display: block; overflow-wrap: anywhere; }
html.rrcc-ui body .pcol-desc { display: block; margin-top: 6px; color: #5d687a; font: 500 10.5px/1.4 var(--rr-body); }
html.rrcc-ui body .pcol-h .n { color: var(--c); }
html.rrcc-ui body .pcol-list { padding: 8px; }
html.rrcc-ui body .pcard {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--rr-line);
  border-left: 4px solid var(--c);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(23, 35, 61, .055);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
html.rrcc-ui body .pcard:hover { border-color: #bec8d4; box-shadow: 0 10px 24px rgba(23, 35, 61, .11); transform: translateY(-1px); }
html.rrcc-ui body .pcard .org { color: var(--rr-navy); font-family: var(--rr-display); }
html.rrcc-ui body .pcard .meta { color: var(--rr-muted); line-height: 1.4; }
html.rrcc-ui body .pcol-add { padding: 8px; border-color: rgba(23, 35, 61, .08); }
html.rrcc-ui body .pcol-add button { min-height: 40px; color: var(--c); border-color: color-mix(in srgb, var(--c) 35%, white); background: rgba(255, 255, 255, .72); }
html.rrcc-ui body .pcol-add button:hover { color: #fff; border-color: var(--c); background: var(--c); }
html.rrcc-ui body .pm-back { background: rgba(12, 19, 34, .66); backdrop-filter: blur(6px); }
/* Kwasha Lane, 2026-09-03: "can't scroll within the open tabs so some
   information is cut off / can't see it." Real bug, not a viewport fluke: this
   rule and the generic .rrcc-dialog rule above both target .pm (rrcc-ui.js
   tags every .pm-back's .pm child as .rrcc-dialog at runtime) at IDENTICAL
   specificity - html.rrcc-ui body .X, two classes each. .rrcc-dialog sets the
   height cap AND overflow-y:auto so a tall card scrolls; this rule, being
   LATER in the file, used the `overflow` SHORTHAND, which silently rewrote
   overflow-y back to hidden. Measured on a real card (vista.html): content
   1607px tall in a 632px box, and everything past the fold - Their
   information, Documents, Notes, eGrants - was not just visually cut, it was
   UNREACHABLE, no scrollbar existed. Same .pm modal is shared by inquiries,
   vista, vista-recruitment and vista-members, so this affected all four.
   overflow-x:hidden keeps the rounded-corner clipping this rule wanted;
   overflow-y is left to .rrcc-dialog, which already gets it right. */
html.rrcc-ui body .pm { max-width: 680px; overflow-x: hidden; border: 1px solid rgba(255, 255, 255, .5); border-radius: 22px; box-shadow: var(--rr-shadow-pop); }
html.rrcc-ui body .pm-h { position: sticky; top: 0; z-index: 2; padding: 19px 22px 17px; background: linear-gradient(180deg, #fff, #f7f9fb); }
html.rrcc-ui body .pm-h h2 { color: var(--rr-navy); font-family: var(--rr-display); }
html.rrcc-ui body .pm-body { padding: 18px 22px 24px; }
html.rrcc-ui body .pm-sec { margin-bottom: 20px; padding: 14px; border: 1px solid var(--rr-line); border-radius: 14px; background: #fff; }
html.rrcc-ui body .stagechip.on { border-color: var(--rr-navy); background: var(--rr-navy); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html.rrcc-ui *, html.rrcc-ui *::before, html.rrcc-ui *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Standalone staff tools now share the same header and content proportions. */
html.rrcc-ui body .rrcc-auto-header + .wrap,
html.rrcc-ui body .rrcc-auto-header + main { margin-top: 0; }
html.rrcc-page-admin-users body > .wrap,
html.rrcc-page-audit body > .wrap,
html.rrcc-page-payments body > .wrap,
html.rrcc-page-payments-org body > .wrap,
html.rrcc-page-member-hours body > .wrap,
html.rrcc-page-prospect-finder body > .wrap {
  width: 100%;
  max-width: 1080px;
  padding: 24px var(--rr-gutter) 82px;
}

html.rrcc-page-form-setup body main.pwrap,
html.rrcc-page-people-setup body main.pwrap { padding-top: 24px; }

html.rrcc-page-admin-users body h1,
html.rrcc-page-audit body h1,
html.rrcc-page-member-hours body h1,
html.rrcc-page-prospect-finder body h1 {
  color: var(--rr-navy);
  font-family: var(--rr-display);
  font-size: clamp(25px, 3.2vw, 34px);
  letter-spacing: -.025em;
}

/* Compact KPI rows on data-heavy pages. */
html.rrcc-page-placement-income body .heroes,
html.rrcc-page-board-members body .countbar,
html.rrcc-page-vista-members body .countbar,
html.rrcc-page-vista-recruitment body .countbar { scrollbar-width: none; }

/* Persistent controls look selected without moving the layout. */
html.rrcc-ui body :where(button, .btn, [role="button"])[aria-pressed="true"] {
  transform: none;
  border-color: var(--rr-red);
  box-shadow: inset 0 0 0 1px var(--rr-red), 0 4px 12px rgba(180, 35, 43, .12) !important;
}
html.rrcc-ui body .tab.active[aria-pressed="true"] {
  border-color: var(--rr-navy);
  background: var(--rr-navy);
  box-shadow: 0 5px 13px rgba(23, 35, 61, .18) !important;
}
html.rrcc-ui body .stagechip.on[aria-pressed="true"]:disabled {
  opacity: 1;
  cursor: default;
  border-color: var(--rr-navy);
  color: #fff;
  background: var(--rr-navy);
  box-shadow: none !important;
}
html.rrcc-ui body .bd-term.is-on[aria-pressed="true"] {
  border-color: #111;
  color: #fff;
  background: #111;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .28) !important;
}
html.rrcc-ui body :where(button, .btn, [role="button"])[aria-expanded="true"]:not(.primary):not(.red):not(#addBtn) {
  border-color: var(--rr-red-line);
  color: var(--rr-red);
  background-color: var(--rr-red-soft);
  box-shadow: inset 4px 0 0 var(--rr-red) !important;
}

/* The four core staff workflows use a denser desktop shell. This restores the
   useful first screen without undoing the visual system or shrinking touch UI. */
@media (min-width: 821px) {
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .sitehdr {
    min-height: 54px;
    padding: 5px 0;
  }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .sitehdr .sitelogo { height: 38px; }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .sitehdr :where(#featBtn, .hdrcta) {
    min-height: 38px;
    padding: 8px 16px;
  }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .progtabs {
    margin: 10px auto 6px;
    padding: 4px;
    border-radius: 15px;
  }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .progtabs :where(.progtab, .feattab) {
    min-height: 36px;
    padding: 7px 14px;
  }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .topnav {
    min-height: 48px;
    margin-bottom: 12px;
    padding: 5px;
    border-radius: 14px;
  }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .topnav .nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .topnav .nav-links::-webkit-scrollbar { display: none; }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .topnav :where(.navlink, button.navlink) {
    min-height: 36px;
    padding: 7px 12px;
  }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries) body .subtabs {
    margin-top: 0;
    margin-bottom: 12px;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  html.rrcc-page-index body .summary { grid-template-columns: 1.7fr 4.8fr; }
  html.rrcc-page-index body .sumgroup-msy { grid-column: 1 / -1; }
  html.rrcc-page-index body .sumgroup-msy .sumcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  html.rrcc-page-inquiries body .pboard,
  html.rrcc-page-vista body .pboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
  }
  html.rrcc-page-inquiries body .pcol,
  html.rrcc-page-vista body .pcol { min-width: 0; max-height: none; }
  html.rrcc-page-inquiries body .pcol-list,
  html.rrcc-page-vista body .pcol-list { max-height: 430px; }
}

@media (max-width: 900px) {
  html.rrcc-page-job-admin body .bd-queue-tabs {
    margin: 0 0 10px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid var(--rr-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--rr-shadow-sm);
  }
  html.rrcc-page-job-admin body .bd-queue-tabs button {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--rr-muted);
    background: transparent;
    font: 600 12px/1.2 var(--rr-display);
  }
  html.rrcc-page-job-admin body .bd-queue-tabs button strong { margin-left: 4px; font-size: 13px; }
  html.rrcc-page-job-admin body .bd-queue-tabs button[aria-selected="true"] { color: #fff; border-color: var(--rr-navy); background: var(--rr-navy); box-shadow: 0 5px 13px rgba(23, 35, 61, .2); }
  html.rrcc-page-job-admin body #bdQueues[data-mobile-view="todo"] > .bd-cols > .bd-col.live,
  html.rrcc-page-job-admin body #bdQueues[data-mobile-view="live"] > .bd-cols > .bd-col.todo { display: none; }
  html.rrcc-page-job-admin body .bd-col { min-height: 0; }
}

/* Mobile application navigation */
.rrcc-mobile-nav,
.rrcc-mobile-menu { display: none; }

@media (max-width: 820px) {
  :root {
    --rr-gutter: 15px;
    --rr-mobile-nav-height: 68px;
  }

  html.rrcc-ui { scroll-padding-top: 64px; }
  html.rrcc-ui:not(.rrcc-page-recruitment) body { background-attachment: scroll; }

  html.rrcc-ui body .sitehdr { min-height: 57px; padding: 7px 0; }
  html.rrcc-ui body .sitehdr .sitelogo { height: 36px; }
  html.rrcc-ui body .sitehdr #featBtn,
  html.rrcc-ui body .sitehdr .hdrcta { display: none; }

  html.rrcc-ui body.rrcc-has-appnav { padding-bottom: calc(var(--rr-mobile-nav-height) + env(safe-area-inset-bottom)); }
  html.rrcc-ui body.rrcc-has-appnav > .progtabs,
  html.rrcc-ui body.rrcc-has-appnav > .topnav,
  html.rrcc-ui body.rrcc-has-appnav > div > .topnav { display: none !important; }

  html.rrcc-ui body .subtabs {
    margin: 9px auto 13px;
    padding: 0 var(--rr-gutter) 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  html.rrcc-ui body .subtabs::-webkit-scrollbar { display: none; }
  html.rrcc-ui body .subtabs .subtab { flex: none; min-height: 42px; scroll-snap-align: start; }

  .rrcc-mobile-nav {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 850;
    height: var(--rr-mobile-nav-height);
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    border: 1px solid rgba(205, 212, 222, .92);
    border-radius: 19px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 48px rgba(13, 22, 42, .24);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }

  .rrcc-mobile-nav-item {
    min-width: 0;
    min-height: 54px;
    padding: 5px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 13px;
    color: #626d80;
    background: transparent;
    font: 600 10.5px/1.15 var(--rr-display);
    letter-spacing: -.01em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
  }

  .rrcc-mobile-nav-item svg { width: 20px; height: 20px; flex: none; }
  .rrcc-mobile-nav-item span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rrcc-mobile-nav-item[aria-current="page"] {
    color: var(--rr-red);
    background: var(--rr-red-soft);
  }
  .rrcc-mobile-nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 4px;
    width: 20px;
    height: 3px;
    border-radius: 99px;
    background: var(--rr-red);
  }
  .rrcc-mobile-nav-item { position: relative; }

  .rrcc-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 10px max(10px, env(safe-area-inset-bottom));
    background: rgba(12, 19, 34, .62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .rrcc-mobile-menu[hidden] { display: none !important; }
  body.rrcc-mobile-menu-open { overflow: hidden !important; }

  .rrcc-mobile-sheet {
    width: min(100%, 560px);
    max-height: min(84dvh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--rr-shadow-pop);
  }

  .rrcc-mobile-sheet::before {
    content: "";
    width: 38px;
    height: 4px;
    flex: none;
    align-self: center;
    margin-top: 8px;
    border-radius: 99px;
    background: #d7dce4;
  }

  .rrcc-mobile-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid var(--rr-line);
  }

  .rrcc-mobile-kicker {
    display: block;
    margin-bottom: 2px;
    color: var(--rr-red);
    font: 700 10px/1.2 var(--rr-display);
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .rrcc-mobile-sheet h2 { margin: 0; color: var(--rr-navy); font: 700 22px/1.15 var(--rr-display); }
  .rrcc-mobile-close {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--rr-line);
    border-radius: 50%;
    color: var(--rr-navy);
    background: var(--rr-surface-soft);
  }
  .rrcc-mobile-close svg { width: 21px; height: 21px; }

  .rrcc-mobile-menu-body { overflow-y: auto; padding: 5px 18px 22px; }
  .rrcc-mobile-menu-group { padding-top: 17px; }
  .rrcc-mobile-menu-group h3 {
    margin: 0 0 9px;
    color: var(--rr-muted);
    font: 700 10.5px/1.2 var(--rr-display);
    letter-spacing: .075em;
    text-transform: uppercase;
  }
  .rrcc-mobile-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rrcc-mobile-menu-link {
    min-height: 54px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--rr-line);
    border-radius: 13px;
    color: var(--rr-ink);
    background: var(--rr-surface-soft);
    font: 600 12px/1.25 var(--rr-display);
    text-decoration: none;
  }
  button.rrcc-mobile-menu-link { width: 100%; cursor: pointer; text-align: left; }
  .rrcc-mobile-menu-link svg { width: 19px; height: 19px; flex: none; color: var(--rr-muted); }
  .rrcc-mobile-menu-link[aria-current="page"] {
    color: var(--rr-red);
    border-color: var(--rr-red-line);
    background: var(--rr-red-soft);
  }
  .rrcc-mobile-menu-link[aria-current="page"] svg { color: var(--rr-red); }

  /* All touch controls meet the 44px mobile target. */
  html.rrcc-ui body :where(button, .btn, a.btn, .ghost, .clearf, .tab, .cardbtn, .pdown, .stagearrow, .commchip, .orgbtn, .hub-x, .pm-x) {
    min-height: 44px !important;
  }
  html.rrcc-ui body :where(.stagearrow, .commchip, .orgbtn.archive, .hub-x, .pm-x) { min-width: 44px !important; }

  html.rrcc-ui body :where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input:not([type]), select, textarea) {
    font-size: 16px !important;
  }

  /* Dialogs become reachable bottom sheets when the keyboard or a short screen is involved. */
  html.rrcc-ui body .rrcc-dialog-backdrop {
    align-items: flex-end !important;
    padding: 10px 8px max(8px, env(safe-area-inset-bottom)) !important;
  }
  html.rrcc-ui body .rrcc-dialog:not(#rrccAuthOverlay) {
    width: 100% !important;
    max-width: 680px !important;
    max-height: 90dvh !important;
    margin: 0 !important;
    border-radius: 22px 22px 14px 14px !important;
  }

  html.rrcc-ui #rrccSignedBar { right: 12px; }
  html.rrcc-ui body :where(.toast, #status) { bottom: calc(var(--rr-mobile-nav-height) + 18px + env(safe-area-inset-bottom)) !important; }
  html.rrcc-page-site-visit #rrccSignedBar { bottom: calc(var(--rr-mobile-nav-height) + 84px + env(safe-area-inset-bottom)); }
  html.rrcc-page-site-visit body .route-fab {
    left: var(--rr-gutter);
    right: var(--rr-gutter);
    bottom: calc(var(--rr-mobile-nav-height) + 13px + env(safe-area-inset-bottom));
  }
  html.rrcc-page-site-visit body #list { padding-bottom: calc(var(--rr-mobile-nav-height) + 100px); }

  /* Core heroes become compact, useful mobile headers rather than desktop cards
     squeezed into a phone. */
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries, .rrcc-page-vista, .rrcc-page-vista-dashboard) body :where(.top, .sv-top, .bd-top, .phead) {
    border-radius: 19px;
    padding: 18px;
  }
  html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin, .rrcc-page-inquiries, .rrcc-page-vista, .rrcc-page-vista-dashboard) body :where(.top, .sv-top, .bd-top, .phead) h1 { font-size: 24px; }

  /* Dashboard: every metric remains visible without a hidden horizontal rail. */
  html.rrcc-page-index body .subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }
  html.rrcc-page-index body .subtabs .subtab { justify-content: center; text-align: center; white-space: normal; }
  html.rrcc-page-index body .top { width: calc(100% - 2 * var(--rr-gutter)); margin-bottom: 12px; display: block; }
  html.rrcc-page-index body .top .top-sub { font-size: 12.5px; }
  html.rrcc-page-index body .top .yearpick { width: 100%; min-width: 0; margin-top: 14px; }
  html.rrcc-page-index body .top .yearrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  html.rrcc-page-index body .summary {
    padding: 0 var(--rr-gutter) 11px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    overflow: visible;
  }
  html.rrcc-page-index body .sumgroup { min-width: 0; padding: 11px; }
  html.rrcc-page-index body .sumgroup + .sumgroup { padding-left: 11px; }
  html.rrcc-page-index body .sumgroup-members { order: -1; }
  html.rrcc-page-index body .sumcards { display: grid; grid-auto-flow: row; gap: 6px; }
  html.rrcc-page-index body .sumgroup-members .sumcards,
  html.rrcc-page-index body .sumgroup-msy .sumcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.rrcc-page-index body .sumgroup-sites .sumcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.rrcc-page-index body .sumcards .stat { width: 100%; min-height: 66px; padding: 9px 8px; }
  html.rrcc-page-index body .stat .n { font-size: 19px; }
  html.rrcc-page-index body .stat .l { font-size: 9.5px; line-height: 1.2; }
  html.rrcc-page-index body .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html.rrcc-page-index body .tabs .tab { flex: none; }
  html.rrcc-page-index body .controls { margin: 8px var(--rr-gutter) 13px; padding: 10px; display: block; }
  html.rrcc-page-index body .control-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html.rrcc-page-index body .controls #search { grid-column: 1 / -1; width: 100%; min-width: 0; }
  html.rrcc-page-index body .sortwrap { min-width: 0; display: grid; gap: 3px; }
  html.rrcc-page-index body .sortsel { width: 100%; min-width: 0; }
  html.rrcc-page-index body .control-primary #addBtn { align-self: end; }
  html.rrcc-page-index body .control-primary #assignBtn { grid-column: 1 / -1; }
  html.rrcc-page-index body .control-secondary { margin-top: 8px; justify-content: flex-end; }
  html.rrcc-page-index body .card { border-radius: 16px; }
  html.rrcc-page-index body .card-head { padding: 15px; }
  html.rrcc-page-index body .list { padding-bottom: calc(var(--rr-mobile-nav-height) + 38px); }

  /* Site visit worklist */
  html.rrcc-page-site-visit body .sv-wrap { padding: 0 var(--rr-gutter) 32px; }
  html.rrcc-page-site-visit body .sv-top { margin-bottom: 11px; }
  html.rrcc-page-site-visit body .sv-top .sv-status { white-space: normal; font-size: 12.5px; }
  html.rrcc-page-site-visit body .sv-top .sv-yearrow { margin-top: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  html.rrcc-page-site-visit body .sv-workspace { padding: 11px; border-radius: 17px; }
  html.rrcc-page-site-visit body .sv-workhead { display: block; margin-bottom: 11px; }
  html.rrcc-page-site-visit body .sv-workhead h2 { font-size: 18px; }
  html.rrcc-page-site-visit body .sv-workhead p { margin-top: 5px; font-size: 11.5px; }
  html.rrcc-page-site-visit body .sv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.rrcc-page-site-visit body .sv-card { min-height: 78px; padding: 12px; }
  html.rrcc-page-site-visit body .sv-card .n { font-size: 23px; }
  html.rrcc-page-site-visit body .sv-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px; }
  html.rrcc-page-site-visit body .sv-controls #search { grid-column: 1 / -1; }
  html.rrcc-page-site-visit body .sv-controls #planRouteBtn { grid-column: 1 / -1; }
  html.rrcc-page-site-visit body .sv-sheet-head { position: sticky; top: -18px; z-index: 5; margin: -18px -16px 9px; padding: 16px 16px 12px; background: rgba(255, 255, 255, .98); backdrop-filter: blur(10px); }
  html.rrcc-page-site-visit body table.sv tr { overflow: hidden; border-color: var(--rr-line); border-radius: 14px; background: #fff; box-shadow: var(--rr-shadow-sm); }
  html.rrcc-page-site-visit body table.sv tr.done,
  html.rrcc-page-site-visit body table.sv tr.todo { background: #fff; }

  /* Position review */
  html.rrcc-page-job-admin body .bd-wrap { padding: 0 var(--rr-gutter) 32px; }
  html.rrcc-page-job-admin body .bd-top { margin-bottom: 11px; }
  html.rrcc-page-job-admin body .bd-tools { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  html.rrcc-page-job-admin body .bd-tool-search { grid-column: 1 / -1; }
  html.rrcc-page-job-admin body .bd-tool-year { min-width: 0; }
  html.rrcc-page-job-admin body .bd-tools #refreshBtn { align-self: end; min-height: 44px; padding: 0 11px; border: 1px solid var(--rr-line-strong); border-radius: 10px; text-decoration: none; }
  html.rrcc-page-job-admin body .bd-tools :where(#inflight, #upd) { grid-column: 1 / -1; }
  html.rrcc-page-job-admin body .bd-workhead { display: block; margin-top: 18px; }
  html.rrcc-page-job-admin body .bd-workhead h2 { font-size: 18px; }
  html.rrcc-page-job-admin body .bd-workhead p { margin-top: 5px; }
  html.rrcc-page-job-admin body .bd-cols { grid-template-columns: 1fr; gap: 13px; }
  html.rrcc-page-job-admin body .bd-colh { position: static; }
  html.rrcc-page-job-admin body .bd-col { border-radius: 16px; }

  /* Pipeline headers and cards */
  html.rrcc-page-inquiries body main.pwrap,
  html.rrcc-page-vista body main.pwrap,
  html.rrcc-page-vista-dashboard body main.pwrap { padding: 0 var(--rr-gutter) 34px; }
  html.rrcc-page-inquiries body .phead,
  html.rrcc-page-vista body .phead,
  html.rrcc-page-vista-dashboard body .phead { align-items: stretch; gap: 14px; }
  html.rrcc-page-inquiries body .phead > *,
  html.rrcc-page-vista body .phead > *,
  html.rrcc-page-vista-dashboard body .phead > * { width: 100%; }
  html.rrcc-page-inquiries body .phead p,
  html.rrcc-page-vista body .phead p,
  html.rrcc-page-vista-dashboard body .phead p { font-size: 12.5px; }
  html.rrcc-page-inquiries body .pyear { display: grid; grid-template-columns: 1fr; gap: 7px; }
  html.rrcc-page-inquiries body .pyear :where(select, button, a) { width: 100%; justify-content: center; text-align: center; }
  html.rrcc-page-vista body .vhead-tools { justify-content: flex-start; }
  html.rrcc-page-vista body .phead-note,
  html.rrcc-page-vista-dashboard body .phead-note { width: 100%; }

  /* Public jobs: first opportunity is now visible much sooner. */
  html.rrcc-page-jobs body .wrap { padding: 12px var(--rr-gutter) 38px; }
  html.rrcc-page-jobs body header.hero { padding: 27px 17px 24px; border-radius: 19px; }
  html.rrcc-page-jobs body header.hero h1 { margin: 7px 0 5px; font-size: 31px; }
  html.rrcc-page-jobs body header.hero .tag { font-size: 16px; }
  html.rrcc-page-jobs body header.hero .lead { font-size: 13.5px; line-height: 1.45; }
  html.rrcc-page-jobs body .zig { width: 150px; height: 10px; margin: 10px auto 8px; }
  html.rrcc-page-jobs body .hero-stats {
    width: 100%;
    margin: 14px auto 2px;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  html.rrcc-page-jobs body .hero-stats div { padding: 7px 4px; }
  html.rrcc-page-jobs body .hero-stats div + div { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .22); }
  html.rrcc-page-jobs body .hero-stats b { font-size: 19px; }
  html.rrcc-page-jobs body .hero-stats span { font-size: 9.5px; }
  html.rrcc-page-jobs body .hero-cta { width: 100%; min-height: 45px; margin-top: 13px; justify-content: center; padding: 11px 18px; }
  html.rrcc-page-jobs body .controls { top: 61px; margin: 10px 0; padding: 8px; gap: 7px; }
  html.rrcc-page-jobs body .controls input { flex-basis: 100%; }
  html.rrcc-page-jobs body .controls select,
  html.rrcc-page-jobs body .controls .clearf { flex: 1 1 calc(50% - 4px); min-width: 0; }
  html.rrcc-page-jobs body .org { margin: 11px 0; padding: 15px; }
  html.rrcc-page-jobs body .job-map { width: 100%; height: 150px; }

  /* Recruitment boards: one clear stage at a time, vertical cards, no hidden page scroll. */
  html.rrcc-page-inquiries body .rrcc-stage-filter,
  html.rrcc-page-vista body .rrcc-stage-filter,
  html.rrcc-page-vista-recruitment body .rrcc-stage-filter {
    position: sticky;
    top: var(--rr-stick, 60px);
    z-index: 34;
    display: block;
    margin: 0 0 10px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(23, 35, 61, .96);
    box-shadow: 0 10px 25px rgba(23, 35, 61, .2);
    backdrop-filter: blur(10px);
  }
  html.rrcc-ui body .rrcc-stage-filter label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .76);
    font: 700 11px/1.2 var(--rr-display);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  html.rrcc-ui body .rrcc-stage-filter label > span { flex: none; }
  html.rrcc-ui body .rrcc-stage-filter select { flex: 1; min-width: 0; border-color: rgba(255, 255, 255, .22); text-transform: none; letter-spacing: 0; }
  html.rrcc-page-inquiries body .pboard,
  html.rrcc-page-vista body .pboard,
  html.rrcc-page-vista-recruitment body .pboard {
    display: block;
    min-height: 0;
    overflow: visible;
    padding-bottom: 18px;
  }
  html.rrcc-page-inquiries body .pcol,
  html.rrcc-page-vista body .pcol,
  html.rrcc-page-vista-recruitment body .pcol {
    width: 100%;
    min-width: 0;
    max-height: none;
  }
  html.rrcc-page-inquiries body .pcol.rrcc-stage-off,
  html.rrcc-page-vista body .pcol.rrcc-stage-off,
  html.rrcc-page-vista-recruitment body .pcol.rrcc-stage-off { display: none; }
  html.rrcc-page-inquiries body .pcol-list,
  html.rrcc-page-vista body .pcol-list,
  html.rrcc-page-vista-recruitment body .pcol-list { overflow: visible; max-height: none; }
  html.rrcc-page-inquiries body .pcol-h { min-height: 82px; }
  html.rrcc-page-vista body .pcol-h { min-height: 118px; }
  html.rrcc-ui body .pcol-list { padding: 9px; }
  html.rrcc-ui body .pcard { min-height: 78px; padding: 13px; }
  html.rrcc-ui body .pm-back { align-items: flex-end; padding: 8px 7px max(7px, env(safe-area-inset-bottom)); }
  html.rrcc-ui body .pm { max-width: none; max-height: 91dvh; overflow-y: auto; border-radius: 22px 22px 14px 14px; }
  html.rrcc-ui body .pm-h { padding: 17px; }
  html.rrcc-ui body .pm-body { padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); }
  html.rrcc-ui body .pm-sec { padding: 12px; }
  html.rrcc-page-vista-recruitment,
  html.rrcc-page-vista-recruitment body {
    height: auto !important;
    min-height: 100%;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  html.rrcc-page-vista-recruitment body main.pwrap { display: block; min-height: 0; padding-bottom: calc(var(--rr-mobile-nav-height) + 28px); }

  /* KPI bands remain scannable without taking half the phone. */
  html.rrcc-page-placement-income body .heroes,
  html.rrcc-page-board-members body .countbar,
  html.rrcc-page-vista-members body .countbar,
  html.rrcc-page-vista-recruitment body .countbar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 5px;
  }
  html.rrcc-page-placement-income body .heroes > *,
  html.rrcc-page-board-members body .countbar > *,
  html.rrcc-page-vista-members body .countbar > *,
  html.rrcc-page-vista-recruitment body .countbar > * { flex: 0 0 min(44vw, 170px); scroll-snap-align: start; }

  /* Admin action tables become labeled cards instead of clipped rows. */
  html.rrcc-page-admin-users body .rrcc-table-scroll,
  html.rrcc-page-audit body .rrcc-table-scroll { overflow: visible; }
  html.rrcc-page-admin-users body table,
  html.rrcc-page-admin-users body tbody,
  html.rrcc-page-admin-users body tr,
  html.rrcc-page-admin-users body td,
  html.rrcc-page-audit body table,
  html.rrcc-page-audit body tbody,
  html.rrcc-page-audit body tr,
  html.rrcc-page-audit body td { display: block; width: 100%; }
  html.rrcc-page-admin-users body thead,
  html.rrcc-page-audit body thead { display: none; }
  html.rrcc-page-admin-users body tr,
  html.rrcc-page-audit body tr {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--rr-line);
    border-radius: 13px;
    background: #fff;
  }
  html.rrcc-page-admin-users body td,
  html.rrcc-page-audit body td {
    min-height: 34px;
    padding: 7px 2px;
    border-bottom: 1px solid #edf0f4;
    white-space: normal;
    text-align: left;
  }
  html.rrcc-page-admin-users body td:last-child,
  html.rrcc-page-audit body td:last-child { border-bottom: 0; }
  html.rrcc-page-admin-users body td::before,
  html.rrcc-page-audit body td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--rr-muted);
    font: 700 10.5px/1.2 var(--rr-display);
    letter-spacing: .055em;
    text-transform: uppercase;
  }
  html.rrcc-page-admin-users body td.acts button { width: 100%; margin: 3px 0; }

  html.rrcc-ui #rrccAuthOverlay { align-items: flex-start; }
  html.rrcc-ui #rrccAuthOverlay .card { margin: auto 0; padding: 25px 21px 22px; border-radius: 21px; }
  html.rrcc-ui #rrccAuthOverlay .auth-brand { margin-bottom: 20px; padding-bottom: 17px; }
  html.rrcc-ui #rrccAuthOverlay .auth-brand img { height: 38px; }
}

@media (max-width: 420px) {
  .rrcc-mobile-nav { left: 5px; right: 5px; bottom: max(5px, env(safe-area-inset-bottom)); }
  .rrcc-mobile-nav-item { font-size: 9.5px; }
  .rrcc-mobile-menu-grid { grid-template-columns: 1fr; }
  html.rrcc-ui #rrccAuthOverlay .auth-brand span { display: none; }
}

@media (max-height: 620px) and (max-width: 900px) {
  html.rrcc-ui #rrccAuthOverlay { align-items: flex-start; }
  html.rrcc-ui body .rrcc-dialog:not(#rrccAuthOverlay) { max-height: 96dvh !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.rrcc-ui { scroll-behavior: auto !important; }
  html.rrcc-ui *,
  html.rrcc-ui *::before,
  html.rrcc-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.rrcc-ui .vinebg { display: none !important; }
}

@media print {
  .rrcc-mobile-nav,
  .rrcc-mobile-menu,
  .rrcc-stage-filter,
  .rrcc-auto-header,
  #rrccSignedBar,
  #rrccAuthOverlay { display: none !important; }
  html.rrcc-ui body { background: #fff !important; }
}

/* ============================================================================
   REDESIGN LAYER, 2026-08-27
   Anthony: "full rework and design improvement... visually with set up, not
   functions." Everything below is presentation. No selector here changes what a
   control does, only what it looks like.

   It sits last on purpose. Every rule matches the specificity of the rule it
   replaces (html.rrcc-ui body ...) and wins on source order, so nothing above
   had to be deleted and this whole block can be removed to undo the redesign.
   ========================================================================== */

/* ---- 1. THE HEADER ------------------------------------------------------
   Three stacked rows of pills became one coloured block plus one quiet row.
   .sitehdr and .progtabs are siblings in the markup on all 36 pages, so rather
   than move anything they are painted as a single continuous bar: the logo row
   on top, the program switcher directly beneath it with no seam. The tool rail
   below then reads as the context row it always was. */
html.rrcc-ui body .sitehdr {
  background: var(--rr-header);
  border-bottom: 0;
  box-shadow: none;
  /* This said `relative` and silently un-stuck the header on every page - see 38. */
  position: sticky;
  top: 0;
  z-index: 241;
}
html.rrcc-ui body .sitehdr .sitelogo {
  /* The mark is dark ink on transparent. On a coloured bar it has to invert, and
     brightness(0) first flattens it so invert() gives a clean white rather than a
     colour-shifted one. The red river stroke goes white with it, which is correct
     here: a red zigzag on deep red would disappear. */
  filter: brightness(0) invert(1);
}
html.rrcc-ui body .sitehdr :where(#featBtn, .hdrcta) {
  background: var(--rr-header-chip);
  border-color: var(--rr-header-line);
  color: var(--rr-header-ink);
}
html.rrcc-ui body .sitehdr :where(#featBtn, .hdrcta):hover {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .34);
  color: var(--rr-header-ink);
}

/* The program switcher, continuing the same bar. */
html.rrcc-ui body .progtabs {
  background: var(--rr-header);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(0, 0, 0, .16);
}
/* Tabs on the bar are underlined text, not pills. A pill inside a coloured block
   reads as a button; these are places, and places get an underline. */
html.rrcc-ui body .progtabs :where(.progtab, .feattab) {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--rr-header-ink-2);
  box-shadow: none;
  padding: 12px 15px;
  font-family: var(--rr-body);
  font-weight: 600;
  font-size: 13px;
  position: relative;
}
html.rrcc-ui body .progtabs :where(.progtab, .feattab):hover {
  background: rgba(255, 255, 255, .08);
  color: var(--rr-header-ink);
  border: 0;
}
html.rrcc-ui body .progtabs .progtab.active,
html.rrcc-ui body .progtabs .progtab[aria-current="page"] {
  background: transparent;
  color: var(--rr-header-ink);
  box-shadow: none;
}
html.rrcc-ui body .progtabs .progtab.active::after,
html.rrcc-ui body .progtabs .progtab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #fff;
}
html.rrcc-ui body .progtabs .feattab {
  margin-left: auto;
  color: var(--rr-header-ink-2);
  background: transparent;
}

/* ---- 2. THE TOOL RAIL becomes the context row ---------------------------
   It was a floating white card holding six pills. Now it is one quiet strip of
   text with the current page underlined, so the eye reaches the page title in
   one step instead of three. */
html.rrcc-ui body .topnav {
  background: var(--rr-surface);
  border: 0;
  border-bottom: 1px solid var(--rr-line);
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  max-width: none;
}
html.rrcc-ui body .topnav .nav-links { gap: 0; }
html.rrcc-ui body .topnav :where(.navlink, button.navlink) {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--rr-muted);
  box-shadow: none;
  padding: 13px 14px;
  font-weight: 600;
  font-size: 13px;
  position: relative;
}
html.rrcc-ui body .topnav :where(.navlink, button.navlink):hover {
  background: transparent;
  color: var(--rr-ink);
  border: 0;
}
html.rrcc-ui body .topnav .navlink.active,
html.rrcc-ui body .topnav .navlink[aria-current="page"] {
  background: transparent;
  color: var(--rr-ink);
  box-shadow: none;
}
html.rrcc-ui body .topnav .navlink.active::after,
html.rrcc-ui body .topnav .navlink[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--rr-ink);
}

/* ---- 3. TYPE ------------------------------------------------------------
   The page title was barely bigger than a card title and the same weight, so
   nothing told the eye where to start. */
html.rrcc-ui body :where(.phead, header.head, .head):not(.sitehdr) h1 {
  font-family: var(--rr-display);
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 34px);
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--rr-ink);
}

/* Numbers line up on the decimal wherever they are stacked. */
html.rrcc-ui body :where(.stat, .tile, .t-cell, .kpi) :where(.n, .num, b, strong),
html.rrcc-ui body :where(td, th):where(.num, .n) {
  font-variant-numeric: tabular-nums;
}

/* ---- 4. CARDS STAY ON THEIR LINES ---------------------------------------
   Anthony: "as the sites with different numbers of members fill out, the tops of
   each of these sections stay even... I don't like how they were all over the
   place." A host site whose name wrapped to two lines used to push its own body
   down and stop agreeing with the card beside it. Subgrid hands that decision to
   the row, so every card in a row shares the same band positions and the same
   height regardless of how many members it holds. */
@supports (grid-template-rows: subgrid) {
  html.rrcc-ui body .bd-cols,
  html.rrcc-ui body .pboard,
  html.rrcc-ui body .cards {
    align-items: stretch;
  }
}

/* ---- 5. QUIETER SURFACES ------------------------------------------------
   Cards carried a border AND a shadow AND a radius, on a grey page, which is
   three ways of saying the same thing. One hairline is enough; the shadow is
   kept only for things that genuinely float. */
html.rrcc-ui body :where(.pcard, .card, .bd-card, .note, .tile, .stat) {
  box-shadow: none;
  border-color: var(--rr-line);
}
html.rrcc-ui body :where(.ov, .pm, .rrcc-dialog, dialog) {
  box-shadow: var(--rr-shadow-pop);
}

/* ---- 6. THE PROGRAM BAR MUST SPAN THE BAR -------------------------------
   styles.css sets .progtabs to width:fit-content with auto side margins, which
   was right when it was a floating pill group and wrong now that it is painting
   the header. Left as-is the deep red only reached the middle 564px of a 1440px
   screen. Full bleed, with the links starting on the same gutter as everything
   else on the page. */
html.rrcc-ui body .progtabs,
html.rrcc-ui body .topnav {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter)));
  padding-right: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter)));
}
@media (min-width: 900px) {
  html.rrcc-ui body .progtabs { margin-left: 0; margin-right: 0; }
}
html.rrcc-ui body .sitehdr {
  padding-left: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter)));
  padding-right: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter)));
}
html.rrcc-ui body .sitehdr .logolink { padding-left: 0; }

/* ---- 7. ONE COLOURED BLOCK, NOT TWO -------------------------------------
   The page hero was a navy gradient card. Against the new red header that is two
   dark slabs stacked, and the title ends up the third heavy thing the eye meets.
   The hero keeps its structure and drops its background: the title now sits on
   the page, which is where a title belongs, and the header is the only block of
   colour on the screen. */
html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin,
                   .rrcc-page-inquiries, .rrcc-page-vista, .rrcc-page-vista-dashboard) body :where(.top, .sv-top, .bd-top, .phead) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--rr-ink);
  overflow: visible;
  padding-left: 0;
  padding-right: 0;
}
html.rrcc-ui:where(.rrcc-page-index, .rrcc-page-site-visit, .rrcc-page-job-admin,
                   .rrcc-page-inquiries, .rrcc-page-vista, .rrcc-page-vista-dashboard) body :where(.top, .sv-top, .bd-top, .phead)::after {
  display: none;
}
html.rrcc-page-index body .top h1,
html.rrcc-page-site-visit body .sv-top h1,
html.rrcc-page-job-admin body .bd-top h1,
html.rrcc-page-inquiries body .phead h1,
html.rrcc-page-vista body .phead h1,
html.rrcc-page-vista-dashboard body .phead h1 { color: var(--rr-ink); }

html.rrcc-ui body :where(.page-kicker, .bd-kicker, .phead-kicker, .sv-eyebrow) { color: var(--rr-red); }
html.rrcc-ui body :where(.top-sub, .bd-lede, .phead p),
html.rrcc-page-site-visit body .sv-top .sv-status { color: var(--rr-muted); }
html.rrcc-ui body :where(.top, .sv-top, .bd-top, .phead) :where(label, .muted) { color: var(--rr-faint); }

/* ---- 8. SUBTABS ---------------------------------------------------------
   The third row of pills. Same treatment as the tool rail: text with the current
   one underlined, so three rows of pills become none. */
html.rrcc-ui body .subtabs .subtab {
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--rr-faint);
  padding: 10px 0;
  margin-right: 20px;
  position: relative;
}
html.rrcc-ui body .subtabs .subtab:hover { background: none; color: var(--rr-ink); }
html.rrcc-ui body .subtabs .subtab.active,
html.rrcc-ui body .subtabs .subtab[aria-current="page"] {
  background: none;
  border: 0;
  color: var(--rr-red);
}
html.rrcc-ui body .subtabs .subtab.active::after,
html.rrcc-ui body .subtabs .subtab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  background: var(--rr-red);
}

/* ---- 9. THE CONTROLS THAT LIVED ON THE DARK HERO ------------------------
   The year picker and its buttons were painted for white-on-navy. With the hero
   now on paper they were white on white: the label at 72% white, the select's
   border at 22% white, and "+ Year" as white text on a white-alpha fill. All
   three were invisible. They take normal page colours again. */
html.rrcc-page-index body .top .yearpick > label { color: var(--rr-faint); }
html.rrcc-page-index body .top #yearSel {
  border-color: var(--rr-line-strong);
  color: var(--rr-ink);
  background: var(--rr-surface);
}
html.rrcc-ui body :where(.top, .sv-top, .bd-top, .phead) :where(.ghost, button.ghost) {
  color: var(--rr-ink);
  background: var(--rr-surface);
  border-color: var(--rr-line-strong);
}
html.rrcc-ui body :where(.top, .sv-top, .bd-top, .phead) :where(.ghost, button.ghost):hover {
  border-color: var(--rr-red);
  color: var(--rr-red);
  background: var(--rr-red-soft);
}
html.rrcc-page-index body .top #addYearBtn {
  color: var(--rr-ink);
  border-color: var(--rr-line-strong);
  background: var(--rr-surface);
}
html.rrcc-page-index body .top #addYearBtn:hover {
  background: var(--rr-red-soft);
  border-color: var(--rr-red);
  color: var(--rr-red);
}

/* The same white-for-dark controls exist on Site Visits, Host Site Recruitment
   and VISTA. Every one of them would be white on white now the heroes are light. */
html.rrcc-page-site-visit body .sv-top .sv-yearrow button {
  color: var(--rr-ink);
  border-color: var(--rr-line-strong);
  background: var(--rr-surface);
}
html.rrcc-page-site-visit body .sv-top .sv-yearrow button:hover {
  background: var(--rr-red-soft); border-color: var(--rr-red); color: var(--rr-red);
}
html.rrcc-page-inquiries body .phead .pyear-field { color: var(--rr-faint); }
html.rrcc-page-inquiries body .phead .plink { color: var(--rr-red); }
html.rrcc-page-vista body .phead .archtoggle { color: var(--rr-muted); }
html.rrcc-page-vista body .phead .edcount { color: #7a5a0e; }

/* ---- 10. THE :where() TRAP ----------------------------------------------
   The header CTA above was written as .sitehdr :where(#featBtn, .hdrcta), and
   :where() contributes NOTHING to specificity - so that rule scored (0,2,2) and
   lost to styles.css's html body .sitehdr #featBtn at (1,1,2). The button kept
   its old red pill and navy text on the new red bar, at 2.4:1. Spelling the id
   out restores the weight. */
html.rrcc-ui body .sitehdr #featBtn,
html.rrcc-ui body .sitehdr .hdrcta {
  background: var(--rr-header-chip);
  border: 1px solid var(--rr-header-line);
  color: var(--rr-header-ink);
  box-shadow: none;
}
html.rrcc-ui body .sitehdr #featBtn:hover,
html.rrcc-ui body .sitehdr .hdrcta:hover {
  background: rgba(255, 255, 255, .26);
  border-color: rgba(255, 255, 255, .38);
  color: var(--rr-header-ink);
}

/* ---- 11. THE BOARD LAYS OUT IN ROWS -------------------------------------
   Paired with the change in app.js that stopped placing cards by whichever
   column was shortest. The grid is what makes the tops line up; align-items
   stretch is what makes the bottoms line up, so a row reads as a row instead of
   two independent stacks that happen to sit side by side. */
html.rrcc-ui body .citygroup-grid,
html.rrcc-ui body .list > .citygroup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 16px;
  align-items: stretch;
}
html.rrcc-ui body .citygroup-grid > .col { display: contents; }
html.rrcc-ui body .citygroup-grid > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* The position list takes the slack, so a site with two members and a site with
   five still finish on the same line. */
html.rrcc-ui body .citygroup-grid > .card > :last-child { margin-top: auto; }

@media (max-width: 820px) {
  html.rrcc-ui body .citygroup-grid { grid-template-columns: 1fr; }
}
/* The board renders straight into .list when there is no city grouping, so the
   same row layout has to apply there too. */
html.rrcc-ui body .list:has(> .card) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 16px;
  align-items: stretch;
}
html.rrcc-ui body .list > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 820px) {
  html.rrcc-ui body .list:has(> .card) { grid-template-columns: 1fr; }
}

/* ---- 12. THE NUMBERS ----------------------------------------------------
   Twelve figures in twelve bordered cells with 8px labels: the borders added
   noise without adding structure, and the numbers were too small to read at a
   glance. The group keeps its meaning and loses its boxes - one hairline frame
   around each group, figures big enough to read across the desk, labels quiet
   underneath, and every digit tabular so the columns line up. */
html.rrcc-ui body .summary {
  gap: 0;
  align-items: stretch;
}
html.rrcc-ui body .sumgroup {
  background: var(--rr-surface);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius-sm);
  padding: 14px 18px;
}
html.rrcc-ui body .sumgroup + .sumgroup { margin-left: 12px; }
html.rrcc-ui body .sumlabel {
  font: 600 9px/1.3 var(--rr-body);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rr-faint);
  margin-bottom: 14px;
}
html.rrcc-ui body .sumcards { gap: 0; }
html.rrcc-ui body .summary .stat {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 22px 0 0;
  text-align: left;
  min-width: 0;
}
html.rrcc-ui body .summary .stat .n {
  font: 600 26px/1 var(--rr-display);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--rr-ink);
}
html.rrcc-ui body .summary .stat .l {
  font: 500 10.5px/1.35 var(--rr-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--rr-faint);
  margin-top: 7px;
}
/* A figure you can act on is coloured; the rest are context. Selected stays red
   because that is the filter you have switched on. */
html.rrcc-ui body .summary .stat[data-k="openSlots"] .n,
html.rrcc-ui body .summary .stat[data-k="open"] .n { color: var(--rr-red); }
html.rrcc-ui body .summary .stat[data-k="needsPlacement"] .n,
html.rrcc-ui body .summary .stat[data-k="needsMou"] .n { color: var(--rr-amber); }
html.rrcc-ui body .summary .stat[data-k="approvedSites"] .n { color: var(--rr-green); }
html.rrcc-ui body .summary .stat:hover .l { color: var(--rr-ink); }
html.rrcc-ui body .summary .stat[aria-pressed="true"] {
  background: none;
  box-shadow: inset 0 -2px 0 var(--rr-red);
}
html.rrcc-ui body .summary .stat[aria-pressed="true"] .n,
html.rrcc-ui body .summary .stat[aria-pressed="true"] .l { color: var(--rr-red); }
html.rrcc-ui body .summary .archlink {
  color: var(--rr-red);
  background: none;
  border: 0;
  padding: 0 0 0 6px;
  font: 600 9px/1.3 var(--rr-body);
  letter-spacing: .09em;
  text-transform: uppercase;
}
@media (max-width: 820px) {
  html.rrcc-ui body .sumgroup + .sumgroup { margin-left: 0; margin-top: 10px; }
}

/* ---- 13. THE STAT STATES, FINISHED --------------------------------------
   Taking the boxes off the figures left four pieces of the old boxed treatment
   stranded on top of the new one: a red border and pink fill for the selected
   filter, a tick in the corner positioned against a border that no longer
   exists, and a 4px gold rail on the "todo" figure. With no left padding left to
   sit in, the border cut straight through the number. Without a box, selection
   is shown the way everything else on the page shows it - the figure goes red
   and a rule appears under it. */
html.rrcc-ui body .summary .stat {
  padding: 2px 24px 6px 0;
  position: relative;
  border: 0;
}
html.rrcc-ui body .summary .stat.todo,
html.rrcc-ui body .summary .stat[aria-pressed="true"] {
  border: 0;
  background: none;
}
html.rrcc-ui body .summary .stat.todo::before,
html.rrcc-ui body .summary .stat[aria-pressed="true"]::after {
  content: none;
}
/* The selected filter: a rule under the figure only, not a box round it. */
html.rrcc-ui body .summary .stat[aria-pressed="true"] {
  box-shadow: none;
}
html.rrcc-ui body .summary .stat[aria-pressed="true"] .l {
  position: relative;
  color: var(--rr-red);
}
html.rrcc-ui body .summary .stat[aria-pressed="true"] .l::after {
  content: "";
  position: absolute;
  left: 0;
  right: 24px;
  bottom: -6px;
  height: 2px;
  background: var(--rr-red);
  border-radius: 2px;
}
/* "Todo" figures keep their meaning through colour, which is what the gold rail
   was standing in for. */
html.rrcc-ui body .summary .stat.todo .n { color: var(--rr-amber); }
html.rrcc-ui body .summary .stat:hover .n { color: var(--rr-red); }
/* Order matters: .todo's amber was written after the pressed red and was winning,
   so the filter you had switched on still read as a to-do. Selected wins, and the
   leftover cream fill from the boxed .todo treatment goes with it. */
html.rrcc-ui body .summary .stat.todo,
html.rrcc-ui body .summary .stat.todo[aria-pressed="true"],
html.rrcc-ui body .summary .stat[aria-pressed="true"] { background: none; }
html.rrcc-ui body .summary .stat.todo[aria-pressed="true"] .n,
html.rrcc-ui body .summary .stat[aria-pressed="true"] .n { color: var(--rr-red); }

/* ---- 14. THE FIGURES SIT ON ONE LINE ------------------------------------
   Measured across the band, the numbers were landing on FIVE different
   baselines: 145, 152, 163, 166 and 173px. The cause is the labels. "Open" is
   one line, "Approved sites" and "Needs placement" and "Remaining to assign"
   are two, and each cell was sizing itself around its own label, so every
   figure sat at a slightly different height. That is what reads as unfinished
   even when nothing is technically broken.

   Two rules fix it. The cells align to the top of the row rather than to their
   own centre, and every label reserves the same two lines whether it needs them
   or not. Now every number in the band starts on the same pixel and every label
   hangs off the same line beneath it. */
html.rrcc-ui body .sumcards {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 16px;
}
html.rrcc-ui body .summary .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html.rrcc-ui body .summary .stat .n {
  display: block;
  line-height: 1;
}
html.rrcc-ui body .summary .stat .l {
  display: block;
  min-height: 2.7em;      /* two lines at 1.35, so a one-line label holds the same space */
  max-width: 11ch;        /* keeps "Remaining to assign" to two lines, never three */
}

/* The three groups were 223 / 583 / 322px wide, which is why they read as three
   unrelated panels rather than one band. Width now follows how many figures each
   one holds. */
html.rrcc-ui body .summary { display: flex; }
html.rrcc-ui body .sumgroup { flex: 1 1 auto; }
html.rrcc-ui body .sumgroup-sites { flex: 2 1 0 !important; }
/* The last 21px. "Host sites" and "MSY" carry a small button in their heading and
   wrapped to two lines; "Members" has no button and stayed on one. So two groups
   started their figures 21px lower than the third. The heading keeps one line and
   the button sits on it. */
html.rrcc-ui body .sumlabel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 21px;
  white-space: nowrap;
}
html.rrcc-ui body .sumlabel .archlink { margin-left: 0; flex: none; }
/* The heading button was still forcing 42px: it inherits the 44px minimum touch
   target that every button gets. That size is right for a thumb and wrong for a
   text link sitting inside a label, so this one opts out and keeps its own
   generous hit area through padding instead. */
html.rrcc-ui body .sumlabel .archlink {
  min-height: 0;
  height: auto;
  line-height: 1.3;
  padding: 2px 4px;
  margin: -2px -4px;
}

/* ---- 15. ONE BAR, NOT TWO ROWS OF RED -----------------------------------
   With the switcher now inside the header, the bar lays out as a single row:
   logo, then the programs, then the account. Measured before this: 187px of
   header across four rows. The template it is being matched against is 104px
   across two, and most of the difference was the logo and the tabs each taking
   a row of their own. */
html.rrcc-ui body .sitehdr.rrcc-hdr-folded {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  flex-wrap: nowrap;
}
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .logolink {
  display: flex;
  align-items: center;
  padding-right: 22px;
  margin-right: 4px;
  flex: none;
}
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .sitelogo { height: 30px; }
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 0;
  background: none;
  align-items: stretch;
  overflow-x: auto;
}
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs :where(.progtab, .feattab) {
  display: flex;
  align-items: center;
  padding: 0 14px;
}
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs .progtab.active::after,
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs .progtab[aria-current="page"]::after {
  left: 14px;
  right: 14px;
}
/* The feature request is a quiet action, not a place, so it leaves the row of
   places and sits at the end of the bar. */
html.rrcc-ui body .sitehdr.rrcc-hdr-folded :where(#featBtn, .hdrcta) {
  position: static;
  transform: none;
  align-self: center;
  flex: none;
  margin-left: 12px;
  order: 3;
}
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs .feattab { margin-left: auto; }

/* Nothing sits between the bar and the tool rail. */
html.rrcc-ui body .topnav { margin-top: 0; }

/* ---- 16. THE BAR'S OWN LAYOUT, WITHOUT :where() -------------------------
   Two faults, both mine.

   The logo link carries the padding that used to align the mark with the
   content column. On a one-row bar that padding became a 1152px-wide element
   that squeezed the programs to zero width and shoved them off the right edge.
   It only needs to be as wide as the logo now; the bar itself holds the gutter.

   And the CTA rule was written as :where(#featBtn, .hdrcta) again. :where()
   contributes nothing to specificity, so it lost to styles.css's absolutely
   positioned #featBtn and the button stayed pinned over the top of everything.
   Spelled out, one selector each. */
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .logolink {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0 22px 0 0;
  margin: 0 4px 0 0;
}
html.rrcc-ui body .sitehdr.rrcc-hdr-folded #featBtn,
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .hdrcta {
  position: static;
  transform: none;
  right: auto;
  top: auto;
  align-self: center;
  flex: 0 0 auto;
  margin-left: 12px;
  order: 3;
}
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs {
  flex: 1 1 auto;
  min-width: 0;
  order: 2;
}

/* ---- 17. THE THREE NUMBER PANELS ----------------------------------------
   Matching the sample: what needs a decision, what the state of things is, and
   the year's MSY as a proportion. */
html.rrcc-ui body .summary {
  display: grid;
  grid-template-columns: minmax(340px, 1.25fr) minmax(300px, 1fr) minmax(250px, .85fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius-sm);
  background: var(--rr-surface);
  overflow: hidden;
}
html.rrcc-ui body .sumgroup {
  border: 0;
  border-radius: 0;
  margin: 0 !important;
  padding: 15px 20px 17px;
  flex: none !important;
}
html.rrcc-ui body .sumgroup + .sumgroup { border-left: 1px solid var(--rr-line); }

/* The three that need a decision. */
html.rrcc-ui body .sumgroup-act .sumcards { gap: 0; align-items: flex-start; }
html.rrcc-ui body .summary .stat-big {
  flex: 1 1 0;
  padding: 0 14px 0 0;
  min-width: 0;
}
html.rrcc-ui body .summary .stat-big .n {
  font: 600 32px/1 var(--rr-display);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
html.rrcc-ui body .summary .stat-big.tone-red .n { color: var(--rr-red); }
html.rrcc-ui body .summary .stat-big.tone-amber .n { color: var(--rr-amber); }
html.rrcc-ui body .summary .stat-big.tone-info .n { color: var(--rr-blue); }
html.rrcc-ui body .summary .stat-big .l {
  font: 600 11.5px/1.35 var(--rr-body);
  color: var(--rr-ink);
  margin-top: 9px;
  min-height: 0;
  max-width: 15ch;
  text-transform: none;
  letter-spacing: 0;
}
html.rrcc-ui body .summary .stat-big .s {
  display: block;
  font: 400 11px/1.4 var(--rr-body);
  color: var(--rr-faint);
  margin-top: 3px;
  max-width: 19ch;
}
html.rrcc-ui body .summary .stat-big[aria-pressed="true"] .l::after { right: 14px; }

/* MSY as a proportion. */
html.rrcc-ui body .msybar { padding-top: 2px; }
html.rrcc-ui body .msyhead { display: flex; align-items: baseline; gap: 7px; }
html.rrcc-ui body .msyhead .big {
  font: 600 30px/1 var(--rr-display);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--rr-ink);
}
html.rrcc-ui body .msyhead .of { font-size: 12px; color: var(--rr-faint); }
html.rrcc-ui body .msytrack {
  display: flex;
  height: 7px;
  border-radius: 99px;
  background: var(--rr-page);
  overflow: hidden;
  margin: 13px 0 10px;
}
html.rrcc-ui body .msytrack i { display: block; height: 100%; }
html.rrcc-ui body .msytrack .fill { background: var(--rr-green); }
html.rrcc-ui body .msytrack .rest { background: var(--rr-amber-line); }
html.rrcc-ui body .msykey { display: flex; gap: 15px; flex-wrap: wrap; font-size: 11px; color: var(--rr-faint); }
html.rrcc-ui body .msykey span { display: flex; align-items: center; gap: 5px; }
html.rrcc-ui body .msykey i { width: 8px; height: 8px; border-radius: 2px; display: block; }
html.rrcc-ui body .msykey .k-fill { background: var(--rr-green); }
html.rrcc-ui body .msykey .k-rest { background: var(--rr-amber-line); }

@media (max-width: 1100px) {
  html.rrcc-ui body .summary { grid-template-columns: 1fr; }
  html.rrcc-ui body .sumgroup + .sumgroup { border-left: 0; border-top: 1px solid var(--rr-line); }
}
/* More MSY on the board than was awarded. The old card turned red for this; the bar
   has to say it too, because it is the one number here that means a real problem. */
html.rrcc-ui body .msybar.over .msyhead .big { color: var(--rr-red); }
html.rrcc-ui body .msybar.over .msytrack .rest { background: var(--rr-red); }
html.rrcc-ui body .msybar.over .msykey .k-rest { background: var(--rr-red); }
html.rrcc-ui body .msybar.over .msykey span:last-child { color: var(--rr-red); font-weight: 600; }

/* ============================================================================
   MATCHING THE SAMPLE, MEASURED
   Comparing the built page against the approved sample property by property
   turned up six differences. Five were mine; the sixth is why it never looked
   right no matter what else was fixed.
   ========================================================================== */

/* 1. THE TYPEFACES WERE NEVER THERE. Only Poppins was imported, so the sample's
   Inter body text fell back to the system font and its IBM Plex Mono figures
   fell back to Poppins. Every word on the page was in the wrong face, which is
   most of why it read as a different design however the layout was adjusted. */
:root {
  --rr-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rr-display: "Poppins", var(--rr-body);
  --rr-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html.rrcc-ui body { font-family: var(--rr-body); }

/* 2. FIGURES ARE MONO, AND TABULAR. The sample sets every number in IBM Plex
   Mono so columns of figures line up on the digit instead of drifting. */
html.rrcc-ui body .summary .stat .n,
html.rrcc-ui body .summary .stat-big .n,
html.rrcc-ui body .msyhead .big,
html.rrcc-ui body .msyhead .of {
  font-family: var(--rr-mono);
  font-variant-numeric: tabular-nums;
}
html.rrcc-ui body .summary .stat-big .n { font-size: 34px; font-weight: 600; }
html.rrcc-ui body .summary .stat .n { font-weight: 600; }

/* 3. THE PAGE TITLE was 36px at -1.26px tracking against the sample's 30px at
   -0.84px, so it sat noticeably heavier than the thing it was copying. */
html.rrcc-ui body :where(.phead, header.head, .head, .top, .sv-top, .bd-top):not(.sitehdr) h1,
html.rrcc-page-index body .top h1,
html.rrcc-page-site-visit body .sv-top h1,
html.rrcc-page-job-admin body .bd-top h1,
html.rrcc-page-inquiries body .phead h1,
html.rrcc-page-vista body .phead h1,
html.rrcc-page-vista-dashboard body .phead h1 {
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -.028em;
  line-height: 1.05;
}

/* 4, 5 and 6. THE CARDS. The earlier "quiet surfaces" rule was written as
   :where(.pcard, .card, ...) - and :where() contributes nothing to specificity,
   so it lost and the cards kept their shadow and their 18px radius. The host
   site name also stayed navy at 700 where the sample has ink at 600. Written
   out properly this time. */
html.rrcc-ui body .list > .card,
html.rrcc-ui body .citygroup-grid > .card,
html.rrcc-ui body .pcard,
html.rrcc-ui body .bd-card {
  border-radius: 13px;
  box-shadow: none;
  border: 1px solid var(--rr-line);
}
html.rrcc-ui body .list > .card .orgname,
html.rrcc-ui body .list > .card .cardname,
html.rrcc-ui body .citygroup-grid > .card .orgname {
  font-family: var(--rr-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.014em;
  color: var(--rr-ink);
}

/* ---- 18. THE REDESIGN LAYER HAS THE LAST WORD ---------------------------
   Chasing these one property at a time was losing to rules whose specificity I
   kept mis-predicting, so the handful that carry the look are stated as final.
   This is deliberate and narrow: it covers only the properties that define the
   sample's surfaces and type, on the elements the sample actually shows. */
html.rrcc-ui body .list > .card,
html.rrcc-ui body .citygroup-grid > .card,
html.rrcc-ui body .list > .card:hover,
html.rrcc-ui body .citygroup-grid > .card:hover {
  box-shadow: none !important;
  border-radius: 13px !important;
  border: 1px solid var(--rr-line) !important;
  transform: none !important;
}
/* The host site name is an unclassed <h3> inside .card-head, which is why the
   earlier .orgname selector never matched anything. */
html.rrcc-ui body .list > .card .card-head h3,
html.rrcc-ui body .citygroup-grid > .card .card-head h3 {
  font-family: var(--rr-display) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -.014em !important;
  color: var(--rr-ink) !important;
}

/* ---- 19. THE TOOLBAR AND THE CARD HEAD, MATCHED TO THE SAMPLE -----------
   Comparing the built page against the sample for this band specifically. */

/* The view tabs were two chunky pills; the sample has one segmented control. */
html.rrcc-ui body #tabs.tabs {
  display: inline-flex;
  background: var(--rr-page);
  border: 1px solid var(--rr-line);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
html.rrcc-ui body #tabs .tab {
  background: none !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: var(--rr-muted) !important;
  font: 600 12.5px/1 var(--rr-body) !important;
  padding: 8px 14px !important;
  min-height: 0 !important;
}
html.rrcc-ui body #tabs .tab.active,
html.rrcc-ui body #tabs .tab[aria-pressed="true"] {
  background: var(--rr-surface) !important;
  color: var(--rr-ink) !important;
  box-shadow: var(--rr-shadow-sm) !important;
}

/* "+ Add position" was the loudest thing on the page. In the sample the accent
   is spent on the figures that need a decision, not on a button that is always
   there, so it becomes a normal outlined control. */
html.rrcc-ui body .controls .ghost,
html.rrcc-ui body .controls button.ghost {
  background: var(--rr-surface);
  border: 1px solid var(--rr-line-strong);
  color: var(--rr-ink);
  border-radius: 9px;
  box-shadow: none;
}
html.rrcc-ui body .controls .ghost:hover {
  border-color: var(--rr-red);
  color: var(--rr-red);
  background: var(--rr-red-soft);
}

/* Render timings are for me, not for Anthony. Kept in the DOM so it is still
   there when something is slow, but no longer competing with the board. */
html.rrcc-ui body .controls .perf,
html.rrcc-ui body .controls .mode {
  font-size: 10.5px;
  color: var(--rr-faint);
  opacity: .55;
}

/* THE CARD HEAD. The sample leads with the host site's name and nothing else:
   no avatar tile, no chip beside the title, the count on the right in mono. */
html.rrcc-ui body .list > .card .card-head .avatar { display: none; }
html.rrcc-ui body .list > .card .card-head {
  align-items: flex-start;
  gap: 0 14px; /* no row gap; the column gap keeps a long name off the count beside it */
  padding-bottom: 2px;
}
html.rrcc-ui body .list > .card .card-head h3 {
  display: block;
  line-height: 1.22 !important;
}
/* The communication-history chip sat inside the title and broke the line. It
   becomes a quiet link on its own, after the name. */
html.rrcc-ui body .list > .card .commchip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  font: 500 11.5px/1 var(--rr-body) !important;
  color: var(--rr-faint) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.rrcc-ui body .list > .card .commchip:hover { color: var(--rr-red) !important; }

/* The badge row under the name: small squared tags, not shouty pills. */
html.rrcc-ui body .list > .card .card-head + * .badge,
html.rrcc-ui body .list > .card .badge,
html.rrcc-ui body .list > .card .chip {
  border-radius: 6px;
  font: 600 9px/1.5 var(--rr-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 7px;
  box-shadow: none;
}
/* #addBtn carries an id, so the class rule above never stood a chance. In the
   sample the primary action is a dark solid button and red is kept for the
   figures that need a decision - a button that is always on screen cannot be the
   loudest thing on it. */
html.rrcc-ui body #addBtn,
html.rrcc-ui body .controls #addBtn {
  background: var(--rr-navy);
  border-color: var(--rr-navy);
  color: #fff;
  border-radius: 9px;
  box-shadow: none;
}
html.rrcc-ui body #addBtn:hover,
html.rrcc-ui body .controls #addBtn:hover {
  background: #22314f;
  border-color: #22314f;
  color: #fff;
}
/* The segmented control sat on --rr-page, which is the colour of the page behind
   it, so the container was invisible and the tabs read as loose text. */
html.rrcc-ui body #tabs.tabs {
  background: #ece7e4;
  border-color: #ddd6d1;
}

/* ============================================================================
   20. THE SAMPLE'S OWN RULES, PORTED
   Rather than keep re-deriving these, these are the declarations from the
   approved sample, mapped onto the real class names. Where the sample used
   .p-card/.p-prow/.p-rep, the board uses .card/.srow/.supwrap.
   ========================================================================== */

/* The active program tab is underlined in RED on the navy bar, as in the sample. */
html.rrcc-ui body .progtabs .progtab.active::after,
html.rrcc-ui body .progtabs .progtab[aria-current="page"]::after { background: var(--rr-red); }

/* --- the card, and its state rail --------------------------------------- */
html.rrcc-ui body .list > .card { position: relative; overflow: hidden; }
/* THE RAIL TRIMS ITSELF. It used to be a straight 3px bar that only looked right
   because the card's overflow:hidden cut it to the rounded corners - which is also
   what cut every row menu off at the card's bottom edge (Anthony, 2026-09-15,
   screenshot: "cutoff"). Now it is a 3px strip painted into a full-size, click-through
   overlay whose OWN rounded corners do the trimming, so the card no longer has to.
   Its radius is the curve the card used to clip with: the card's inner edge, which
   is its 13px corner minus its 1px border (both fixed in section 18 below). Pixel-
   compared against the old rail in Chrome. A border-left version was tried first and
   visibly wrapped the corners; inheriting the card's 13px trimmed 1px too much.
   State colors set --rail, NEVER background: on this inset:0 overlay a background
   would flood the whole card. */
html.rrcc-ui body .list > .card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: calc(13px - 1px);
  background: linear-gradient(90deg, var(--rail, transparent) 3px, transparent 3px);
}
html.rrcc-ui body .list > .card.rail-ok::before   { --rail: var(--rr-green); }
html.rrcc-ui body .list > .card.rail-wait::before { --rail: var(--rr-amber); }
html.rrcc-ui body .list > .card.rail-none::before { --rail: var(--rr-red); }
/* A MENU IS NEVER CUT OFF BY ITS OWN CARD. Measured before this: on all 42 host-site
   cards the last position's menu lost up to 206px, so "Remove position" and "Archive
   member" could not be reached on the last row of any card. While one of its menus is
   open the card stops clipping and sits above its neighbours, so the menu can hang over
   the card below. Nothing else inside a card reaches its rounded corners (the add-row
   button carries its own radius), so nothing else changes while it is open. */
html.rrcc-ui body .card:has(details.menu[open]) { overflow: visible; z-index: 5; }

html.rrcc-ui body .list > .card .card-head { padding: 15px 18px 13px; border: 0; }
html.rrcc-ui body .list > .card .card-id { min-width: 0; flex: 1; }
html.rrcc-ui body .list > .card .card-corner {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
}
html.rrcc-ui body .list > .card .ratio {
  background: none !important; border: 0 !important; padding: 0 !important;
  font: 600 14px/1 var(--rr-mono) !important; font-variant-numeric: tabular-nums;
  color: var(--rr-muted) !important; white-space: nowrap;
}
html.rrcc-ui body .list > .card .card-sub {
  display: block; font-size: 12.5px; color: var(--rr-faint); margin-top: 5px;
}
html.rrcc-ui body .list > .card .card-state {
  display: flex; align-items: center; gap: 9px; padding-top: 11px; flex-wrap: wrap;
}
/* the MOU line becomes the sample's single tag */
html.rrcc-ui body .list > .card .mou-line {
  display: inline-flex; align-items: center; border-radius: 6px;
  font: 600 9px/1.5 var(--rr-body); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; margin: 0;
  background: var(--rr-green-soft); color: var(--rr-green); border: 1px solid var(--rr-green-line);
}
html.rrcc-ui body .list > .card .mou-line.mou-wait {
  background: var(--rr-amber-soft); color: var(--rr-amber); border-color: var(--rr-amber-line);
}
html.rrcc-ui body .list > .card .mou-line.mou-none {
  background: var(--rr-red-soft); color: var(--rr-red); border-color: var(--rr-red-line);
}
html.rrcc-ui body .list > .card .mou-line .moudoc {
  text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px;
}

/* --- the site-contact band ---------------------------------------------- */
html.rrcc-ui body .list > .card .supwrap,
html.rrcc-ui body .list > .card .supbar {
  background: var(--rr-surface-soft);
  border-top: 1px solid var(--rr-line);
  border-bottom: 1px solid var(--rr-line);
  padding: 10px 18px;
  font-size: 12.5px;
  color: var(--rr-faint);
}

/* --- a position row: dot, name, meta, state on the right ----------------- */
html.rrcc-ui body .list > .card .srow {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid var(--rr-line);
}
html.rrcc-ui body .list > .card .srow:last-of-type { border-bottom: 0; }
html.rrcc-ui body .list > .card .srow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rr-line-strong);
}
html.rrcc-ui body .list > .card .srow.filled::before   { background: var(--rr-green); }
html.rrcc-ui body .list > .card .srow.pending::before  { background: var(--rr-red); }
html.rrcc-ui body .list > .card .srow.onboarding::before { background: var(--rr-blue); }
html.rrcc-ui body .list > .card .srow.exited::before   { background: var(--rr-line-strong); }
html.rrcc-ui body .list > .card .srow .sname {
  font: 600 14px/1.2 var(--rr-body); color: var(--rr-ink);
}
html.rrcc-ui body .list > .card .srow .stype {
  display: block; font: 400 12px/1.4 var(--rr-body); color: var(--rr-faint); margin-top: 3px;
}
/* the per-row state badge moves to the right, as in the sample */
html.rrcc-ui body .list > .card .srow .sbadge,
html.rrcc-ui body .list > .card .srow .statebadge {
  order: 3; margin-left: auto;
  border-radius: 6px; padding: 3px 8px;
  font: 600 9px/1.5 var(--rr-body); letter-spacing: .08em; text-transform: uppercase;
}
/* the description button and the nudge chevrons are per-row controls the sample
   had no equivalent for; they stay, quietly, so nothing is lost */
html.rrcc-ui body .list > .card .srow .pdbtn,
html.rrcc-ui body .list > .card .srow .addpd {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; min-height: 0 !important;
  font: 500 11px/1.4 var(--rr-body) !important; color: var(--rr-faint) !important;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- 21. THE POSITION ROW, MATCHED EXACTLY ------------------------------
   The sample row is: a state dot, the member's name, a grey meta line beneath
   it, and the state tag hard right. The board's markup is the other way round -
   .stype (which carries the status pill AND the slot type) sits ABOVE .sname,
   and the pill is inside it on the left.

   Nothing is reparented. .smain becomes display:contents so its two children
   become rows of the .srow grid directly, which lets the name be placed above
   the meta line; and the pill is lifted out to the right edge, clear of the
   per-row controls. */
html.rrcc-ui body .list > .card .srow {
  position: relative;
  display: grid;
  grid-template-columns: 9px 1fr auto;
  grid-template-areas:
    "dot name right"
    "dot type right";
  column-gap: 11px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--rr-line);
}
html.rrcc-ui body .list > .card .srow::before {
  content: "";
  grid-area: dot;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rr-line-strong);
  align-self: center;
}
html.rrcc-ui body .list > .card .srow.s-FILLED::before { background: var(--rr-green); }
html.rrcc-ui body .list > .card .srow.s-PENDING::before { background: var(--rr-red); }
html.rrcc-ui body .list > .card .srow.s-PLACE::before { background: var(--rr-amber); }
html.rrcc-ui body .list > .card .srow.exited::before,
html.rrcc-ui body .list > .card .srow.archived::before { background: var(--rr-line-strong); }

html.rrcc-ui body .list > .card .smain { display: contents; }
html.rrcc-ui body .list > .card .srow .sname {
  grid-area: name;
  font: 600 14px/1.2 var(--rr-body);
  color: var(--rr-ink);
  min-width: 0;
}
html.rrcc-ui body .list > .card .srow .sname .mopen {
  font-style: italic; font-weight: 500; color: var(--rr-faint);
}
html.rrcc-ui body .list > .card .srow.exited .sname .mname {
  text-decoration: line-through; color: var(--rr-faint); font-weight: 400;
}
/* the slot type becomes the sample's quiet meta line */
html.rrcc-ui body .list > .card .srow .stype {
  grid-area: type;
  font: 400 12px/1.4 var(--rr-body);
  color: var(--rr-faint);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  min-width: 0;
}
html.rrcc-ui body .list > .card .srow .sright {
  grid-area: right;
  display: flex; align-items: center; gap: 7px;
  padding-left: 96px;          /* room for the state tag lifted out below */
}

/* THE STATE TAG, lifted to the right edge and given the sample's shape. */
html.rrcc-ui body .list > .card .srow .stype .pill {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  border-radius: 6px;
  padding: 3px 8px;
  font: 600 9px/1.5 var(--rr-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: none;
}
/* the row's own controls sit just inside it */
html.rrcc-ui body .list > .card .srow .sright { margin-right: 86px; }

/* the quiet per-row extras */
html.rrcc-ui body .list > .card .srow .stools .menubtn,
html.rrcc-ui body .list > .card .srow .stagearrow {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--rr-faint) !important; min-height: 0 !important; padding: 2px 5px !important;
}
html.rrcc-ui body .list > .card .srow .chgpill {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; min-height: 0 !important;
  font: 500 11.5px/1.4 var(--rr-body) !important; color: var(--rr-faint) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
/* The position-description button is .pdown and sits inside .sname, which put a
   loud outlined control immediately after every member's name. The sample carries
   the same information as quiet grey text on the meta line, so it moves down to
   join it and stops competing with the name. */
html.rrcc-ui body .list > .card .srow .sname .pdown {
  display: inline-block;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: 9px;
  min-height: 0 !important;
  font: 500 11px/1.4 var(--rr-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--rr-faint) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.rrcc-ui body .list > .card .srow .sname .pdown:hover { color: var(--rr-red) !important; }

/* ---- 22. THE BAR CARRIES THE ACCOUNT, THE ROW CARRIES THE ACTION --------
   In the sample the navy bar ends with the signed-in account, and "Request a
   feature" sits at the right of the white row beneath it. The board had them the
   other way round: the feature button in the bar, and the account as a floating
   pill pinned to the bottom-right corner of the viewport, over the content.
   auth.js positions that pill with fixed coordinates, so it is lifted into the
   bar here rather than rebuilt. */
html.rrcc-ui body #rrccSignedBar {
  position: absolute !important;
  right: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter))) !important;
  bottom: auto !important;
  top: 0 !important;
  height: 56px;
  display: flex;
  align-items: center;
  z-index: 250 !important;
}
html.rrcc-ui body #rrccBarTog {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--rr-header-ink) !important;
  padding: 0 !important;
}
html.rrcc-ui body #rrccBarTog .chev { color: var(--rr-header-ink-2) !important; }
/* the panel it opens hangs below the bar, not above the corner */
html.rrcc-ui body #rrccSignedInner {
  top: 100%;
  bottom: auto !important;
  right: 0;
}

/* The feature request moves out of the bar and onto the right of the tool row. */
html.rrcc-ui body .sitehdr.rrcc-hdr-folded #featBtn,
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .hdrcta { display: none; }
html.rrcc-ui body .topnav { position: relative; }
html.rrcc-ui body .topnav::after { content: none; }
html.rrcc-ui body .rrcc-featrow {
  position: absolute;
  right: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter)));
  top: 50%;
  transform: translateY(-50%);
}
html.rrcc-ui body .rrcc-featrow #featBtn,
html.rrcc-ui body .rrcc-featrow .hdrcta {
  display: inline-flex !important;
  position: static !important;
  transform: none !important;
  background: var(--rr-surface) !important;
  border: 1px solid var(--rr-line-strong) !important;
  color: var(--rr-ink) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font: 600 12.5px/1 var(--rr-body) !important;
  padding: 8px 14px !important;
  min-height: 0 !important;
}

/* ---- 23. THE SITE-CONTACT BAND, AS IN THE SAMPLE ------------------------
   A full-width grey strip: "Site contact <name>" on the left, the actions as
   small outlined chips on the right. */
html.rrcc-ui body .list > .card .cardacts {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rr-surface-soft);
  border-top: 1px solid var(--rr-line);
  border-bottom: 1px solid var(--rr-line);
  padding: 9px 18px;
  margin: 0;
}
html.rrcc-ui body .list > .card .cardacts .suphead {
  font: 400 12.5px/1 var(--rr-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--rr-faint);
}
html.rrcc-ui body .list > .card .cardacts .supsumval {
  font: 600 12.5px/1 var(--rr-body);
  color: var(--rr-ink);
}
html.rrcc-ui body .list > .card .cardacts .cardbtns { margin-left: auto; display: flex; gap: 6px; }
html.rrcc-ui body .list > .card .cardacts .cardbtn {
  background: var(--rr-surface) !important;
  border: 1px solid var(--rr-line-strong) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--rr-ink) !important;
  font: 600 12px/1 var(--rr-body) !important;
  padding: 6px 12px !important;
  min-height: 0 !important;
}
html.rrcc-ui body .list > .card .cardacts .cardbtn:hover {
  border-color: var(--rr-red) !important;
  color: var(--rr-red) !important;
  background: var(--rr-red-soft) !important;
}
/* The account chip is absolutely positioned at the bar's right, so the program
   row must stop short of it or "Service Opportunities" runs underneath it. */
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs { padding-right: 190px; }
/* the sample's inline year and one-line sub */
html.rrcc-ui body .top .top-year { color: var(--rr-faint); font-weight: 600; }
html.rrcc-ui body .top .top-sub a,
html.rrcc-ui body .top .top-sub .maplink {
  color: var(--rr-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- 24. THE MIDDLE PANEL BREATHES --------------------------------------
   Measured before this fix: every figure in "Where members stand" was squeezed
   to 56px, so the labels ran into each other. Each figure takes its natural
   width and the row wraps into the sample's two lines. */
html.rrcc-ui body .sumcards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: flex-start;
}
html.rrcc-ui body .summary .stat {
  flex: none;
  width: auto;
  min-width: 0;
  padding: 0;
}
html.rrcc-ui body .summary .stat .l {
  min-height: 0;
  max-width: none;
  white-space: nowrap;
}
html.rrcc-ui body .summary .stat-big { flex: 1 1 0; padding-right: 14px; }
html.rrcc-ui body .summary .stat-big .l { white-space: normal; max-width: 15ch; }

/* ---- 25. THE TOOLBAR IS ONE ROW, AS IN THE SAMPLE -----------------------*/
html.rrcc-page-index body #dashboardControls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
html.rrcc-page-index body #dashboardControls .control-primary {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
}
html.rrcc-page-index body #dashboardControls #search { flex: 1 1 240px; min-width: 200px; }
html.rrcc-page-index body #dashboardControls .control-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
/* the sort control reads as a chip; the word "Sort" goes - the chip's own value
   says what it is */
html.rrcc-page-index body #dashboardControls .sortwrap { font-size: 0; gap: 0; }
html.rrcc-page-index body #dashboardControls .sortsel {
  font: 600 12.5px/1 var(--rr-body);
  border: 1px solid var(--rr-line-strong);
  border-radius: 9px;
  background: var(--rr-surface);
  color: var(--rr-ink);
  padding: 8px 11px;
}
html.rrcc-page-index body #dashboardControls :where(#notesBtn, #refresh, #assignBtn) {
  background: var(--rr-surface) !important;
  border: 1px solid var(--rr-line-strong) !important;
  border-radius: 9px !important;
  color: var(--rr-ink) !important;
  font: 600 12.5px/1 var(--rr-body) !important;
  padding: 8px 13px !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
/* the sample's row carries no diagnostics */
html.rrcc-page-index body #dashboardControls .perf,
html.rrcc-page-index body #dashboardControls .mode { display: none; }
/* + Add position now lives beside the year picker */
html.rrcc-page-index body .top .yearrow { display: flex; gap: 8px; align-items: center; }

/* ---- 26. THE NUMBERS BAND, DIFFED TO ZERO -------------------------------
   Every declaration below closes a measured difference between this band and
   the approved sample - 19 of them, from a computed-style diff of the two
   pages. None of this is taste; each line is "the sample says X, we said Y". */
html.rrcc-ui body .summary { border-radius: 13px; margin-top: 22px; }
html.rrcc-ui body .sumgroup { padding: 16px 20px; }
html.rrcc-ui body .summary .stat-big .n { letter-spacing: -.035em; }   /* -1.19px @34px */
html.rrcc-ui body .summary .stat-big .l { font-size: 11px; margin-top: 8px; }
html.rrcc-ui body .summary .stat-big .s { font-size: 11.5px; margin-top: 2px; }
html.rrcc-ui body .sumgroup-members .stat .n,
html.rrcc-ui body .summary .stat .n {
  font-size: 19px;
  letter-spacing: -.02em;                                              /* -0.38px @19px */
  line-height: 19px;
}
html.rrcc-ui body .summary .stat-big .n { font-size: 34px; line-height: 34px; } /* re-assert over the 19px above */
html.rrcc-ui body .summary .stat .l { font-size: 11px; margin-top: 6px; }
html.rrcc-ui body .msyhead .big { letter-spacing: -.03em; }            /* -0.9px @30px */
html.rrcc-ui body .msyhead .of { font-size: 14px; font-weight: 500; }
html.rrcc-ui body .msytrack { background: #efecea; margin: 13px 0 10px; }
html.rrcc-ui body .msykey { gap: 14px; }
/* the two generic .stat rules above also matched .stat-big; re-assert its own pair */
html.rrcc-ui body .summary .stat-big .n { letter-spacing: -.035em; }
html.rrcc-ui body .summary .stat-big .l { margin-top: 8px; }

/* ---- 27. THE COLUMN ITSELF, MATCHED -------------------------------------
   Measured at a 1440px window: the sample's content column is 1354px wide with
   670px cards; ours was 1200px with 570px cards, plus a 22px inset the list
   added on its own. The sample's arithmetic is a 1500px frame with 20px page
   margins and 22px of body padding - which works out to min(1414px, viewport
   minus 86) with 43px gutters. Same numbers here, every band at once. */
/* --col is the BAND'S BORDER BOX, so it takes the sample's 1354 directly;
   the header's own formula centres on 1440 content with 43px gutters, which
   lands its links on the same x=43 line. */
html.rrcc-ui { --rr-content: 1440px; --rr-gutter: 43px; }
html.rrcc-ui body { --col: 1354px; }
@media (max-width: 1100px) {
  html.rrcc-ui { --rr-gutter: 22px; }
  html.rrcc-ui body { --col: calc(100% - 44px); }
}
/* the bands pad themselves through their panels; a second gutter inside the
   border doubles the sample's inset */
html.rrcc-ui body .summary,
html.rrcc-ui body #dashboardControls { padding-left: 0; padding-right: 0; }
html.rrcc-ui body .list { padding-left: 0; padding-right: 0; }
/* Two cards per row, as the sample lays them - 430px minimums were letting a
   wide window fit three narrow ones. */
html.rrcc-ui body .list:has(> .card),
html.rrcc-ui body .citygroup-grid {
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
}
@media (max-width: 820px) {
  html.rrcc-ui body .list:has(> .card),
  html.rrcc-ui body .citygroup-grid { grid-template-columns: 1fr; }
}
/* The bands read --rr-content directly, so at 1440 they went full-bleed while the
   page head - which subtracts the gutters - sat at 1354. Same formula for all of
   them, so every band shares the head's exact edges. */
html.rrcc-page-index body .summary,
html.rrcc-page-index body .tabs,
html.rrcc-page-index body .controls,
html.rrcc-page-index body .list,
html.rrcc-page-index body .mappanel,
html.rrcc-page-index body .foot,
html.rrcc-ui body .subtabs {
  width: calc(100% - 2 * var(--rr-gutter));
  max-width: calc(var(--rr-content) - 2 * var(--rr-gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ---- 28. EVERY REGION DIFFED AGAINST THE SAMPLE'S MEASURED SPEC ---------
   Values below are the sample's computed styles, applied to the matching real
   elements. Each group names the sample region it closes. */

/* bar: 60px tall, links 12.5px/600 with 14px side padding */
html.rrcc-ui body .sitehdr.rrcc-hdr-folded { min-height: 60px; }
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs :where(.progtab, .feattab) {
  font-size: 12.5px; padding: 0 14px;
}

/* ctx row: 44px tall, links 12.5px/600, gap 22, no per-link padding */
html.rrcc-ui body .topnav { height: 44px; }
html.rrcc-ui body .topnav .nav-links { gap: 22px; height: 100%; }
html.rrcc-ui body .topnav :where(.navlink, button.navlink) {
  font-size: 12.5px; padding: 0; height: 100%; display: flex; align-items: center;
}
html.rrcc-ui body .topnav .navlink.active::after,
html.rrcc-ui body .topnav .navlink[aria-current="page"]::after { left: 0; right: 0; }

/* page-head sub: 13.5px, ink-2 */
html.rrcc-ui body .top .top-sub { font-size: 13.5px; color: var(--rr-muted); }
html.rrcc-ui body .top .top-year { font-weight: 600; }

/* year chip and Add: the sample's exact chip metrics */
html.rrcc-page-index body .top #yearSel {
  font: 600 12.5px/1 var(--rr-body); border-radius: 9px; padding: 8px 13px;
  border-color: var(--rr-line-strong);
}
html.rrcc-page-index body .top #addBtn,
html.rrcc-page-index body .top #addYearBtn { font-size: 12.5px; border-radius: 9px; padding: 9px 15px; }

/* search + toolbar chips */
html.rrcc-page-index body #dashboardControls #search {
  font-size: 13.5px; border-radius: 9px; padding: 10px 14px; border-color: var(--rr-line-strong);
}
html.rrcc-ui body #tabs .tab.active,
html.rrcc-ui body #tabs .tab[aria-pressed="true"] { padding: 7px 14px !important; border-radius: 7px !important; }

/* the mou tag + its quiet companion */
html.rrcc-ui body .list > .card .mou-line {
  background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 9px;
  text-transform: none; letter-spacing: 0;
}
html.rrcc-ui body .list > .card .mou-line .mou-tag {
  display: inline-block; border-radius: 6px; padding: 3px 8px;
  font: 600 9px/1.5 var(--rr-body); letter-spacing: .08em; text-transform: uppercase;
  background: var(--rr-green-soft); color: var(--rr-green); border: 1px solid var(--rr-green-line);
}
html.rrcc-ui body .list > .card .mou-line.mou-wait .mou-tag {
  background: var(--rr-amber-soft); color: var(--rr-amber); border-color: var(--rr-amber-line);
}
html.rrcc-ui body .list > .card .mou-line.mou-none .mou-tag {
  background: var(--rr-red-soft); color: var(--rr-red); border-color: var(--rr-red-line);
}
html.rrcc-ui body .list > .card .mou-line .mou-when {
  font: 400 12px/1.5 var(--rr-body); color: var(--rr-faint);
}

/* contact band: the sample's sunk grey and small chips */
html.rrcc-ui body .list > .card .cardacts { background: #efecea; padding: 10px 18px; }
html.rrcc-ui body .list > .card .cardacts .supsumval { color: var(--rr-muted); }
html.rrcc-ui body .list > .card .cardacts .cardbtn {
  font: 600 11px/1 var(--rr-body) !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  color: var(--rr-muted) !important;
}

/* + Add a position, as the sample's quiet grey line */
html.rrcc-ui body .list > .card .addrow,
html.rrcc-ui body .list > .card [data-act="addpos"],
html.rrcc-ui body .list > .card .addpos {
  font: 600 12.5px/1 var(--rr-body); color: var(--rr-faint);
}
/* last three diffs from the 24-region sweep */
html.rrcc-ui body .topnav { height: 44px !important; min-height: 0 !important; }
html.rrcc-ui body #tabs.tabs { background: #efecea; border-radius: 9px; }
html.rrcc-page-index body .list > .card .cardacts .cardbtn { color: rgb(93, 85, 81) !important; }
/* The toolbar's flex was inverted: the segments were stretching across the row
   while the search collapsed to a stub with a truncated placeholder. The sample
   is the other way round - search takes the slack, segments hug their text. */
html.rrcc-page-index body #dashboardControls #tabs.tabs {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 3px !important;
  flex-wrap: nowrap !important;
}
html.rrcc-page-index body #dashboardControls #search {
  flex: 1 1 260px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 220px !important;
}
/* Defence in depth for the same class of leftover: no page-local rule may paint
   boxes behind the context-row links again. */
html.rrcc-ui body .topnav :where(.navlink, button.navlink),
html.rrcc-ui body .topnav :where(.navlink, button.navlink):hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ---- 29. THE ACCOUNT CHIP IS ON A NAVY BAR NOW --------------------------
   auth.js paints it #1f2a44 for the white corner pill it used to be; on the bar
   that measured 1.09:1 - invisible - on every page. */
html.rrcc-ui body #rrccSignedBar,
html.rrcc-ui body #rrccSignedBar #rrccBarTog,
html.rrcc-ui body #rrccSignedBar #rrccBarTog * ,
html.rrcc-ui body #rrccSignedBar .who {
  color: var(--rr-header-ink) !important;
}
html.rrcc-ui body #rrccSignedBar #rrccBarTog .chev { color: var(--rr-header-ink-2) !important; }
/* the panel it opens sits on white and keeps dark text */
html.rrcc-ui body #rrccSignedInner, 
html.rrcc-ui body #rrccSignedInner * { color: var(--rr-ink) !important; }
html.rrcc-ui body #rrccSignedInner .mi { color: var(--rr-body-copy) !important; }

/* sop's fold chevrons were ~1.7:1 */
html.rrcc-page-sop body .chev { color: var(--rr-muted) !important; }

/* ---- 30. A SHELL THAT NEVER MOVES ---------------------------------------
   Anthony: "the dashboard when open on each section should not be changing."
   Two causes closed here.

   One: the header is assembled by script after first paint, so every page load
   drew the three-row header and then snapped it into the bar - a visible jump
   on every section change. The pieces the script moves start hidden and appear
   only in their final place; the bar holds its height from the first frame.

   Two: the section links (.subtabs) existed on three pages and not the rest, so
   the shell was taller on some sections than others. On desktop they now live
   at the right of the tool row on the pages that have them - same two rows,
   same 104px, on every section. The original nav keeps serving phones. */
html.rrcc-ui body .sitehdr { min-height: 60px; }
html.rrcc-ui body .progtabs:not(.sitehdr .progtabs) { display: none; }
@media (max-width: 820px) {
  /* phones never see the desktop rows, so nothing is lost hiding this */
  html.rrcc-ui body .progtabs:not(.sitehdr .progtabs) { display: none; }
}

/* section links on the tool row */
html.rrcc-ui body .topnav .rrcc-sublinks {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  padding-left: 22px;
  border-left: 1px solid var(--rr-line);
  height: 100%;
}
html.rrcc-ui body .topnav .rrcc-sublink {
  font: 600 12.5px/1 var(--rr-body);
  color: var(--rr-faint);
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  background: transparent !important;
  border: 0 !important;
}
html.rrcc-ui body .topnav .rrcc-sublink:hover { color: var(--rr-ink); }
html.rrcc-ui body .topnav .rrcc-sublink.active,
html.rrcc-ui body .topnav .rrcc-sublink[aria-current="page"] {
  color: var(--rr-red);
}
html.rrcc-ui body .topnav .rrcc-sublink.active::after,
html.rrcc-ui body .topnav .rrcc-sublink[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--rr-red);
}
/* the standalone subtabs row leaves the desktop; phones keep it */
@media (min-width: 821px) {
  html.rrcc-subs-folded body .subtabs { display: none; }
}
/* the feature button now shares the row's right edge with the section links */
html.rrcc-ui body .rrcc-featrow { position: static; transform: none; margin-left: 18px; }
html.rrcc-ui body .topnav { display: flex; align-items: center; }
html.rrcc-ui body .topnav .nav-links { flex: 1 1 auto; display: flex; align-items: center; }

/* index's toolbar pieces appear only once they are in their final seat */
html.rrcc-page-index body #tabs.tabs { visibility: hidden; }
html.rrcc-page-index body #dashboardControls #tabs.tabs { visibility: visible; }
html.rrcc-page-index body #addBtn { visibility: hidden; }
html.rrcc-page-index body .yearrow #addBtn { visibility: visible; }

/* ---- 31. NO PAGE MAY RESHAPE THE SHELL ----------------------------------
   Position Review carries its own inline .topnav rules (a 1096px floating pill,
   test-pinned as a string in the page), and other pages keep their own kickers
   above the title. Each one made the shell read differently per section. The
   shared layer has the last word on the two shell rows, page rules included. */
html.rrcc-ui body .topnav,
html.rrcc-page-job-admin body .topnav {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rr-line) !important;
  box-shadow: none !important;
  background: var(--rr-surface) !important;
  padding-left: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter))) !important;
  padding-right: max(var(--rr-gutter), calc((100% - var(--rr-content)) / 2 + var(--rr-gutter))) !important;
}
/* one head treatment: title first, no per-page eyebrow above it */
html.rrcc-ui body :where(.page-kicker, .bd-kicker, .phead-kicker, .sv-eyebrow) { display: none !important; }
/* The feature button wrapped onto a second flex line of the tool row and hung
   over the page title. One row, no wrapping, links yield before the button does. */
html.rrcc-ui body .topnav { flex-wrap: nowrap !important; overflow: visible; }
html.rrcc-ui body .topnav .nav-links { flex: 0 1 auto !important; min-width: 0; flex-wrap: nowrap !important; }
html.rrcc-ui body .rrcc-featrow { flex: 0 0 auto; margin-left: auto; }
html.rrcc-ui body .topnav .rrcc-sublinks { margin-left: 24px; }

/* the shared feature dialog */
html.rrcc-ui body .rrcc-featdlg-backdrop {
  position: fixed; inset: 0; background: rgba(23, 21, 20, .45);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
html.rrcc-ui body .rrcc-featdlg {
  background: var(--rr-surface); border-radius: 14px; box-shadow: var(--rr-shadow-pop);
  width: 100%; max-width: 480px; padding: 20px 22px;
}
html.rrcc-ui body .rrcc-featdlg h2 { margin: 0 0 4px; font: 700 17px/1.25 var(--rr-display); color: var(--rr-ink); }
html.rrcc-ui body .rrcc-featdlg p { margin: 0 0 12px; font-size: 13px; color: var(--rr-muted); }
html.rrcc-ui body .rrcc-featdlg textarea {
  width: 100%; min-height: 110px; border: 1px solid var(--rr-line-strong); border-radius: 9px;
  padding: 10px 12px; font: 400 14px/1.5 var(--rr-body); color: var(--rr-ink); resize: vertical;
}
html.rrcc-ui body .rrcc-featdlg .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
/* Archived was wrapping to a second flex line, and align-content then stretched
   the two lines apart so it sat at the panel's floor with dead space above it.
   Lines pack to the top, and the middle panel takes a fairer share of the band
   so all six figures usually hold one line. */
html.rrcc-ui body .sumcards { align-content: flex-start; gap: 16px 22px; }
html.rrcc-ui body .summary {
  grid-template-columns: minmax(320px, 1.12fr) minmax(340px, 1.12fr) minmax(250px, .85fr);
}
/* The middle panel's single row was hugging the top-left corner: dead space
   below it (the band's height comes from its taller neighbours) and spare width
   to its right. The figures now spread across the panel's full width and centre
   in its height, so the panel reads as full rather than half-used. */
html.rrcc-ui body .sumgroup-members { display: flex; flex-direction: column; }
html.rrcc-ui body .sumgroup-members .sumcards {
  flex: 1 1 auto;
  align-content: center;
  justify-content: space-between;
  gap: 16px 14px;
  padding-right: 6px;
}
/* The band is four panels now that members and host sites each have their own:
   Positions, Members, Host sites, MSY. */
html.rrcc-ui body .summary {
  grid-template-columns: minmax(280px, 1.05fr) minmax(220px, .8fr) minmax(250px, .9fr) minmax(240px, .95fr);
}
html.rrcc-ui body .sumgroup-hostsites { display: flex; flex-direction: column; }
html.rrcc-ui body .sumgroup-hostsites .sumcards {
  flex: 1 1 auto;
  align-content: center;
  justify-content: space-between;
  gap: 16px 14px;
  padding-right: 6px;
}
@media (max-width: 1100px) {
  html.rrcc-ui body .summary { grid-template-columns: 1fr; }
}
/* ---- 32. THE BAND, THOUGHT THROUGH --------------------------------------
   Three panels, three nouns. Members read as their pipeline - to place,
   onboarding, active, exited - in that order, because that is the direction a
   member moves. Open positions live with the HOST SITES, because an open
   position is a fact about a site's capacity, not about any member. Urgency is
   colour, not size: nothing gets half the band for being lonely. */
html.rrcc-ui body .summary {
  grid-template-columns: minmax(310px, 1.1fr) minmax(310px, 1.05fr) minmax(250px, .9fr);
}
html.rrcc-ui body .summary .stat[data-k="open"] .n { color: var(--rr-red); }
html.rrcc-ui body .summary .stat[data-k="place"] .n { color: var(--rr-amber); }
html.rrcc-ui body .summary .stat[data-k="pending"] .n { color: var(--rr-blue); }
html.rrcc-ui body .summary .stat[data-k="members"] .n { color: var(--rr-green); }
html.rrcc-ui body .summary .stat[data-k="activeSites"] .n { color: var(--rr-green); }
/* the third MSY swatch, and the count badge sitting ON the nav word */
html.rrcc-ui body .msykey .k-none { background: var(--rr-line); }
html.rrcc-ui body .msykey .k-over { color: var(--rr-red); font-weight: 600; }
html.rrcc-ui body .topnav .navlink { position: relative; }
html.rrcc-ui body .topnav .navlink :where(.navbadge, .nb, sup, .badge) {
  position: absolute !important;
  top: 4px !important;
  right: -16px !important;
  transform: scale(.85);
}

/* ---- 33. THE ROWS, AGAINST REAL DATA ------------------------------------
   Anthony's live board surfaced four things the mock data never exercised. */

/* 1. The placement helper was falling into the 9px DOT COLUMN - the row's grid
   flattens .smain's children, and anything beyond name and type auto-places
   into the first track, one word per line. The helper and the approve bar span
   the row instead, beneath the name, laid out as a proper strip. */
html.rrcc-ui body .list > .card .srow .placebar,
html.rrcc-ui body .list > .card .srow .addbar {
  grid-column: 2 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--rr-amber-soft);
  border: 1px solid var(--rr-amber-line);
  border-radius: 9px;
  padding: 9px 12px;
  margin: 7px 0 3px;
}
html.rrcc-ui body .list > .card .srow .placehint,
html.rrcc-ui body .list > .card .srow .addhint {
  font: 500 12.5px/1.45 var(--rr-body);
  color: var(--rr-amber);
  flex: 1 1 260px;
  min-width: 200px;
}
html.rrcc-ui body .list > .card .srow .placesel {
  flex: 1 1 220px;
  min-width: 200px;
  font: 500 13px/1.3 var(--rr-body);
  padding: 8px 10px;
  border: 1px solid var(--rr-line-strong);
  border-radius: 8px;
  background: var(--rr-surface);
}

/* 2. The red outline box and the per-row coloured left borders were the OLD
   card language showing through the flat rows. The dot is the state now. */
html.rrcc-ui body .list > .card .srow,
html.rrcc-ui body .list > .card .srow.not-in-app,
html.rrcc-ui body .list > .card .srow.s-PLACE,
html.rrcc-ui body .list > .card .srow.s-EXTRA {
  border: 0 !important;
  border-bottom: 1px solid var(--rr-line) !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
html.rrcc-ui body .list > .card .srow:last-of-type { border-bottom: 0 !important; }

/* 3. The dot said PENDING-red while the tag said ONBOARDING-blue: two states on
   one row. The dot follows the same stage ladder the tag reads. */
html.rrcc-ui body .list > .card .srow.stage-pending::before { background: var(--rr-red); }
html.rrcc-ui body .list > .card .srow.stage-onboarding::before { background: var(--rr-blue); }
html.rrcc-ui body .list > .card .srow.stage-active::before { background: var(--rr-green); }

/* the PD chip beside a name joins the quiet-link language */
html.rrcc-ui body .list > .card .srow .pdlink {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-left: 9px;
  font: 500 11px/1.4 var(--rr-body) !important;
  color: var(--rr-faint) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 0 !important;
}
html.rrcc-ui body .list > .card .srow .pdlink:hover { color: var(--rr-red) !important; }
/* small state chips on the meta line stay small and quiet */
html.rrcc-ui body .list > .card .srow .tag {
  border-radius: 5px;
  font: 600 8.5px/1.5 var(--rr-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
}

/* 4. THE UNUSED SPACE. Bottom-aligning every row of cards meant a one-position
   site stretched to the height of a seven-position neighbour and carried the
   difference as a void. Tops stay ruled - that was the point - and each card
   now ends where its content ends. */
html.rrcc-ui body .list:has(> .card),
html.rrcc-ui body .citygroup-grid { align-items: start; }
html.rrcc-ui body .list > .card,
html.rrcc-ui body .citygroup-grid > .card { height: auto; }
html.rrcc-ui body .list > .card > :last-child,
html.rrcc-ui body .citygroup-grid > .card > :last-child { margin-top: 0; }
/* The helper was 510px tall: .smain is display:contents, so the flattened row
   grid stretched both children to the track, and a <select> with a stretched
   height renders every option as a list. Pin their heights. */
html.rrcc-ui body .list > .card .srow .placebar,
html.rrcc-ui body .list > .card .srow .addbar { align-items: center; }
html.rrcc-ui body .list > .card .srow .placehint,
html.rrcc-ui body .list > .card .srow .addhint { height: auto !important; align-self: center; }
html.rrcc-ui body .list > .card .srow .placesel {
  height: 34px !important;
  align-self: center;
  flex: 1 1 220px;
}
html.rrcc-ui body .list > .card .srow .addbar .btn { flex: 0 0 auto; height: 32px; }

/* ---- 34. THE BOARD ON A PHONE -------------------------------------------
   Below 820px the desktop rows are hidden and the shared bottom nav takes over,
   so the shell needs no work - but the board does: one card per row, the head
   stacking rather than colliding, the contact strip wrapping, and rows keeping
   the dot/name/tag shape at 44px touch targets. */
@media (max-width: 820px) {
  html.rrcc-ui body .summary { grid-template-columns: 1fr !important; }
  html.rrcc-ui body .sumgroup + .sumgroup { border-left: 0; border-top: 1px solid var(--rr-line); }
  html.rrcc-ui body .sumcards { justify-content: flex-start; gap: 14px 20px; }

  html.rrcc-page-index body #dashboardControls { flex-direction: column; align-items: stretch; gap: 10px; }
  html.rrcc-page-index body #dashboardControls .control-primary { flex-wrap: wrap; }
  html.rrcc-page-index body #dashboardControls #search { flex: 1 1 100% !important; }
  html.rrcc-page-index body #dashboardControls #tabs.tabs { width: 100% !important; overflow-x: auto; }
  html.rrcc-page-index body #dashboardControls .control-secondary { margin-left: 0; flex-wrap: wrap; }

  html.rrcc-ui body .top { flex-direction: column; align-items: flex-start; gap: 12px; }
  html.rrcc-ui body .top .yearpick { width: 100%; }
  html.rrcc-ui body .top .yearrow { width: 100%; }
  html.rrcc-ui body .top #yearSel { flex: 1 1 auto; }

  html.rrcc-ui body .list > .card .card-head { flex-wrap: wrap; }
  /* .card-id is flex:1 1 0, so its hypothetical size is 0 - it always "fits"
     beside the corner and squeezes to zero width instead of wrapping, which
     rendered the host site name one letter per line. Give it a real basis. */
  html.rrcc-ui body .list > .card .card-id { flex: 1 1 100% !important; min-width: 0; }
  html.rrcc-ui body .list > .card .card-corner { width: 100%; margin-left: 0; margin-top: 8px;
    justify-content: space-between; }
  html.rrcc-ui body .list > .card .cardacts { flex-wrap: wrap; gap: 8px; }
  html.rrcc-ui body .list > .card .cardacts .cardbtns { margin-left: 0; width: 100%; }
  html.rrcc-ui body .list > .card .cardacts .cardbtn { flex: 1 1 auto; min-height: 40px !important; }

  /* the row keeps its shape; the tag drops under the name rather than squeezing it */
  html.rrcc-ui body .list > .card .srow {
    grid-template-columns: 9px 1fr;
    /* Three stacked lines made every row 133px tall and stranded the stage
       arrows on a line of their own. Two lines: name with its controls hard
       right, then the tag and hours underneath. */
    grid-template-areas: "dot name right" "dot type type";
    grid-template-columns: 9px minmax(0, 1fr) auto;
    row-gap: 4px;
    padding: 10px 14px;
    align-items: center;
  }
  html.rrcc-ui body .list > .card .srow .sright {
    padding-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-end;
    gap: 4px;
    align-self: center;
  }
  html.rrcc-ui body .list > .card .srow .stype .pill {
    position: static;
    transform: none;
    align-self: flex-start;
  }
  html.rrcc-ui body .list > .card .srow .placebar,
  html.rrcc-ui body .list > .card .srow .addbar { grid-column: 1 / -1; }
  html.rrcc-ui body .list > .card .srow .stools .menubtn,
  html.rrcc-ui body .list > .card .srow .stagearrow { min-height: 40px !important; min-width: 40px !important; }
}
/* styles.css lays .placebar out as a COLUMN. Mine set display:flex but never the
   direction, so `flex: 1 1 260px` was read as a 260px basis on the vertical axis
   and the strip grew to 510px with the select rendering as a list. Row it is. */
html.rrcc-ui body .list > .card .srow .placebar,
html.rrcc-ui body .list > .card .srow .addbar {
  flex-direction: row !important;
  align-items: center !important;
}
html.rrcc-ui body .list > .card .srow .placehint,
html.rrcc-ui body .list > .card .srow .addhint { flex: 1 1 240px !important; height: auto !important; }
html.rrcc-ui body .list > .card .srow .placesel {
  flex: 0 1 260px !important;
  height: 34px !important;
  min-height: 34px !important;
}
@media (max-width: 820px) {
  html.rrcc-ui body .list > .card .srow .placebar,
  html.rrcc-ui body .list > .card .srow .addbar { flex-wrap: wrap; }
  html.rrcc-ui body .list > .card .srow .placesel { flex: 1 1 100% !important; min-height: 40px !important; }
}
/* 23 controls were under 40px on a phone - the quiet-link treatment I gave the
   redesign strips padding, which is right on a mouse and wrong under a thumb.
   They keep the quiet look and get a real hit area. */
@media (max-width: 820px) {
  html.rrcc-ui body .list > .card :where(.commchip, .pdown, .pdlink, .chgpill, .archlink),
  html.rrcc-ui body .summary .stat,
  html.rrcc-ui body .list > .card .srow .stools .menubtn,
  html.rrcc-ui body .list > .card .srow .stagearrow {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center;
  }
  html.rrcc-ui body .list > .card .card-head h3 .commchip { min-height: 40px !important; }
  html.rrcc-ui body .topnav .rrcc-sublink { min-height: 40px !important; }
}

/* ============================================================
   35. PHONE SHELL
   On a phone the folded header ran out of room: the program tabs
   overflowed sideways and slid under the account chip (which auth.js
   pins absolutely to the top-right). Give the tabs their own full
   width row underneath, and keep row one to logo + chip.
   ============================================================ */
@media (max-width: 820px) {
  html.rrcc-ui body .sitehdr {
    flex-wrap: wrap !important;
    row-gap: 0 !important;
    padding-left: 14px;
    padding-right: 60px;      /* clear of the absolute account chip */
    align-items: center;
    height: auto !important;             /* it was pinned to 60px */
    min-height: 60px !important;
  }
  html.rrcc-ui body .sitehdr .logolink { flex: 0 0 auto !important; }
  html.rrcc-ui body .sitehdr .progtabs {
    order: 3 !important;
    flex: 1 0 100% !important;
    /* No negative margins: a negative margin shrinks the item's OUTER size,
       so the tabs kept fitting beside the logo and never wrapped. */
    margin: 0 !important;
    /* 4px of headroom so the notification badge is not clipped (see 37). */
    padding: 4px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 2px !important;
  }
  html.rrcc-ui body .sitehdr .progtabs::-webkit-scrollbar { display: none !important; }
  html.rrcc-ui body .sitehdr .progtabs .progtab,
  html.rrcc-ui body .sitehdr .progtabs .feattab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 10px 10px !important;
    min-height: 40px !important;
  }

  /* Section strip: one scrolling line instead of a wrapped block. */
  html.rrcc-ui body .toolrow,
  html.rrcc-ui body .subtabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    gap: 16px !important;
    padding-bottom: 2px;
  }
  html.rrcc-ui body .toolrow::-webkit-scrollbar,
  html.rrcc-ui body .subtabs::-webkit-scrollbar { display: none !important; }
  html.rrcc-ui body .toolrow > a,
  html.rrcc-ui body .subtabs > a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  /* Tighten the vertical rhythm - the desktop gaps read as dead space. */
  html.rrcc-ui body .wrap { padding-left: 14px; padding-right: 14px; }
  html.rrcc-ui body .pagehead { margin-bottom: 12px; }
  html.rrcc-ui body .pagehead h1 { font-size: 26px !important; }
  html.rrcc-ui body .controls { gap: 8px !important; margin-bottom: 12px; }
  html.rrcc-ui body .summary { margin-bottom: 12px; }
  html.rrcc-ui body .notice, html.rrcc-ui body .warnbar { margin-bottom: 12px; }

  /* The map link appears twice on a phone once as text in the sub-line,
     once as a button. Keep the button: it is the real tap target. */
  html.rrcc-ui body #headCount .maplink,
  html.rrcc-ui body #headCount .sub-sep { display: none !important; }
}

/* Section 27 centres every band off --rr-gutter, so one token narrows them all.
   At 22px gutters plus header.top's own 26px inset the title sat 48px in from a
   375px screen - an eighth of the width spent on nothing. */
@media (max-width: 560px) {
  html.rrcc-ui { --rr-gutter: 14px !important; }
  html.rrcc-ui body { --col: calc(100% - 28px) !important; }
  html.rrcc-ui body .top { padding: 16px 14px !important; margin-bottom: 10px !important; }
  html.rrcc-ui body #mapPanel { margin-bottom: 12px !important; }
  html.rrcc-ui body .summary { margin-top: 12px !important; }
}

/* ============================================================
   37. ROOM FOR THE NOTIFICATION COUNT
   navbadge.js hangs a count on the corner of a nav pill or program tab with
   `position:absolute; top:-6px`. Both containers it lands in are horizontal
   scrollers (.progtabs and .topnav .nav-links are overflow-x:auto so the rows
   never wrap), and a scroll container clips its children at the padding box -
   so the top 6px of every badge was cut off. Measured at 1280px: 6px on both.

   Overflow cannot be reopened without losing the scroll, and pulling the
   container upward pushes the badge past y=0 where body{overflow-x:hidden}
   clips it instead. So: a few px of headroom INSIDE each scroller, and the
   badge sits a little less proud. This costs no height - both boxes were
   already taller than their content (header stays 60px, tool row 44px).

   The folded-header rule at 2322 sets `padding: 0` through
   `.sitehdr.rrcc-hdr-folded .progtabs` (two classes), so anything less
   specific here silently loses. Spell it out; do not rely on source order.
   ============================================================ */
html.rrcc-ui body .progtabs,
html.rrcc-ui body .sitehdr .progtabs,
html.rrcc-ui body .sitehdr.rrcc-hdr-folded .progtabs { padding-top: 4px; }
html.rrcc-ui body .topnav .nav-links { padding-top: 4px; }

/* navbadge.js injects `.rb-badge` into <head> at runtime, so it lands after this
   sheet; these selectors carry the specificity to win regardless of order. */
html.rrcc-ui body .rb-badge { top: -2px; right: -5px; }
/* The default ring is white, which reads as a halo on the navy bar. */
html.rrcc-ui body .progtabs .rb-badge { box-shadow: 0 0 0 2px var(--rr-header); }

/* ============================================================
   38. STICKY THAT ACTUALLY STICKS
   Two separate faults, both of which had to go for any of it to work.

   (a) `styles.css:30` sets `html { overflow-x: hidden }` to stop sideways
   scroll. `overflow: hidden` makes an element a SCROLL CONTAINER, and a sticky
   element only sticks inside its nearest scroll container - so every
   `position: sticky` on the site was inert. `overflow: clip` does the same
   visual job WITHOUT creating a scroll container, which is exactly what is
   wanted here. `hidden` stays first as the fallback for anything too old to
   know `clip`; browsers that support it take the second declaration.

   (b) The folded-header rules above set `.sitehdr { position: relative }`,
   overriding the `position: sticky` at the top of this file. Restored there.

   The follower bars (job board tools, public board filters, pipeline stage
   filters) used hard-coded offsets - 65px, 68px, 61px - against a header that
   measures 60px, so even once (a) and (b) were fixed they would have floated
   5-8px below it with page content sliding through the gap. They now read
   --rr-stick, which rrcc-ui.js sets from the header's REAL height and keeps
   updated on resize, so the numbers cannot drift apart again.
   ============================================================ */
html { overflow-x: hidden; overflow-x: clip; }
html.rrcc-ui body { overflow-x: hidden; overflow-x: clip; overflow-y: visible; }

/* On a phone the header wraps to two rows (~81px). Pinning that eats a tenth of
   the screen for navigation the bottom bar already provides, so let it scroll
   away there. Nothing else pins on a phone either - line 1506 already sets
   .bd-tools to static under 820px, which is the same call made earlier. */
@media (max-width: 820px) {
  html.rrcc-ui { --rr-stick: 0px; }
  html.rrcc-ui body .sitehdr { position: relative; }
}

/* ---- 21b. VISTA DASHBOARD: THE PRIMARY DASHBOARD'S SITE CARD ----------------------------
   Anthony, 2026-09-17: "VIsta dashboard needs to have members at aites in the same visal set up
   as other dashboard". vista-dashboard.html writes the Primary Dashboard's own card markup into
   its .list, so every shared card rule in this file already draws it. What the Primary Dashboard
   adds on top is scoped to that page: the row and button heights (here and styles.css) and the
   readability layer in section 22 below. Those values are given to this one list and nothing
   else on the VISTA page. Measured in Chrome by switching the page class on the rendered cards:
   these are exactly the properties that differed.
   KEEP IT ABOVE SECTION 22, which must hold Primary Dashboard rules only. Every value is pinned
   against its original by test/vista-site-cards.test.js, so the two cannot drift apart. */
html.rrcc-ui.rrcc-page-vista-dashboard body .list {
  max-width: none; padding-bottom: 0;
  --rr-faint: #6e645e;
  --rr-mono: var(--rr-body);
}
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .srow { min-height: 62px; }
/* The contact actions are links on this page (Email, Call), not buttons. */
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .cardacts .cardbtn {
  min-height: 32px !important;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .mou-line .mou-tag { font-size: 10.5px; letter-spacing: .05em; }
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .srow .stype .pill { font-size: 10.5px; letter-spacing: .05em; }
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .srow .sright { margin-right: 102px; }
html.rrcc-ui.rrcc-page-vista-dashboard body .list .pill.REQUESTED { color: var(--rr-muted); }
html.rrcc-ui.rrcc-page-vista-dashboard body .list .pill.OPEN { color: var(--rr-amber); }
html.rrcc-ui.rrcc-page-vista-dashboard body .list .pill.stage-active { color: var(--rr-green); }
html.rrcc-ui.rrcc-page-vista-dashboard body .list .pill.stage-pending { color: #8a4108; }
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .srow .sname .mopen { font-style: normal; }
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .commchip { text-decoration-color: var(--rr-line-strong); text-underline-offset: 3px; }
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .commchip:hover { text-decoration-color: currentColor; }
/* Add a position is a link to the VAD builder here, not a button: no underline, like the Primary Dashboard's. */
html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card a.chgaddrow { text-decoration: none; }
@media (max-width: 820px) {
  html.rrcc-ui.rrcc-page-vista-dashboard body .list > .card .cardacts .cardbtn { min-height: 44px !important; }
}

/* ============================================================================
   22. READABILITY FACELIFT - PRIMARY DASHBOARD
   Anthony, 2026-09-15: "we need to provide a slight facelift, the page currently is
   kinda hard on the eyes."
   Measured before anything changed: 621 of the 1,628 text elements on the board were
   below the 4.5:1 contrast minimum. Nearly all of it was one warm gray (--rr-faint,
   3.8:1 on white and 3.2:1 on the contact band) carrying city names, position types,
   "Open position", labels and links; the rest was 9px uppercase status tags in pale
   ink on pale tints (down to 2.3:1), plus figures set in a typewriter face beside two
   other typefaces.
   DELIBERATELY SLIGHT. The approved layout, spacing, surfaces, rails and colors of
   meaning are untouched: this darkens small text until it reads, lifts the smallest
   type to a readable size, and sets figures in the page's own face. Scoped to the
   Primary Dashboard and removable as one block. Pinned by dashboard-readability.test.js.
   ========================================================================== */
html.rrcc-ui.rrcc-page-index {
  --rr-faint: #6e645e;          /* was #8b817b. Now 5.8:1 on white, 4.9:1 on the contact band */
  --rr-mono: var(--rr-body);    /* figures in the body face; tabular-nums keeps them aligned */
}

/* Nothing on the board smaller than 10.5px, and uppercase tags tracked less tightly. */
html.rrcc-ui.rrcc-page-index body .sumlabel { font-size: 11px; letter-spacing: .06em; }
html.rrcc-ui.rrcc-page-index body .summary .archlink { font-size: 11px; letter-spacing: .04em; }
html.rrcc-ui.rrcc-page-index body .list > .card .mou-line .mou-tag { font-size: 10.5px; letter-spacing: .05em; }
html.rrcc-ui.rrcc-page-index body .list > .card .chip { font-size: 11px; }
html.rrcc-ui.rrcc-page-index body .list > .card .srow .stype .pill,
html.rrcc-ui.rrcc-page-index body .list > .card .srow .sbadge,
html.rrcc-ui.rrcc-page-index body .list > .card .srow .statebadge { font-size: 10.5px; letter-spacing: .05em; }
/* The pill sits in space reserved at the row's right edge. At 9px the longest label,
   "Onboarding", cleared the row's buttons by 2px; at 10.5px it ran 7px into them.
   16px more room gives it ~9px, what "Requested" had before. Phones stack the pill
   under the name and zero this margin with !important, so this is desktop only. */
html.rrcc-ui.rrcc-page-index body .list > .card .srow .sright { margin-right: 102px; }

/* Status tags keep their hue; the ink is the design system's darker shade of it. */
html.rrcc-ui.rrcc-page-index body .pill.REQUESTED { color: var(--rr-muted); }
html.rrcc-ui.rrcc-page-index body .pill.OPEN { color: var(--rr-amber); }
html.rrcc-ui.rrcc-page-index body .pill.PENDING,
html.rrcc-ui.rrcc-page-index body .pill.stage-onboarding { color: var(--rr-blue); }
html.rrcc-ui.rrcc-page-index body .pill.FILLED,
html.rrcc-ui.rrcc-page-index body .pill.stage-active { color: var(--rr-green); }
html.rrcc-ui.rrcc-page-index body .pill.stage-pending { color: #8a4108; }

/* An open position reads as quiet, not as fine print. */
html.rrcc-ui.rrcc-page-index body .list > .card .srow .sname .mopen { font-style: normal; }

/* Links: the underline marks them without competing with the text. */
html.rrcc-ui.rrcc-page-index body .list > .card .commchip,
html.rrcc-ui.rrcc-page-index body .list > .card .repcontacttog {
  text-decoration-color: var(--rr-line-strong); text-underline-offset: 3px;
}
html.rrcc-ui.rrcc-page-index body .list > .card .commchip:hover,
html.rrcc-ui.rrcc-page-index body .list > .card .repcontacttog:hover { text-decoration-color: currentColor; }
html.rrcc-ui.rrcc-page-index body .list > .card .repcontacttog { color: var(--rr-muted); }