* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f6fa;
  color: #1f2330;
}
a { color: #2557d6; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: #1f2330;
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar a { color: #fff; }
.brand a { font-weight: 600; font-size: 1.1rem; }
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links .who { color: #c7c9d1; font-size: 0.9rem; }
.nav-links .logout { color: #ff9b9b; }
.who-tag {
  display: inline-block; margin-left: 4px; padding: 1px 8px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3px; text-transform: lowercase;
  background: rgba(255,255,255,0.12); color: #e7e9f1;
  vertical-align: middle;
}
.who-tag-admin { background: #f0a500; color: #1f2330; }

/* Page shell. One width for every page: 1440, sized for the data-dense majority
   of this app (KPI tables, calibration rosters, talent box, admin tables).
   Reading pages briefly opted down to 1100 -- dropped on purpose, a single
   width across the product beats a per-page rule nobody can predict. */
.container { max-width: 1440px; margin: 24px auto; padding: 0 24px; }

h1 { margin-top: 0; }
.muted { color: #5f6678; }   /* darkened so muted text clears AA (4.5:1) on the grey app bg */
.note { background: #eef2fb; border-left: 4px solid #2557d6; padding: 10px 14px; border-radius: 4px; }

/* Friendly empty-state on My Assessments (no tasks). Navy accent = no role this
   cycle; green accent = a subject who's being assessed. */
.empty-role { border-left: 4px solid var(--navy); }
.empty-role.is-subject { border-left-color: #1d9e75; }
.empty-role h2 { margin-top: 0; }
.principle-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.principle-list li { padding: 10px 12px; background: #f7f8fc; border: 1px solid #eef0f5; border-radius: 8px; font-size: 14px; line-height: 1.5; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.flash-error { background: #fde2e2; color: #8a1a1a; }
.flash-ok    { background: #e0f3e6; color: #1d6b34; }
/* Six flash(..., "success") call sites render through this. Without it they
   arrived unstyled, because the palette only ever defined ok/warn/error. Same
   treatment as .flash-ok rather than a new colour: they mean the same thing. */
.flash-success { background: #e2f3ea; color: #1a7a54; border-color: #a8ddc0; }

/* Login */
.card { background: #fff; border-radius: 10px; padding: 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.login-card { max-width: 420px; margin: 60px auto; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: #4a5066; }
.login-card input { padding: 10px; border: 1px solid #cdd1dd; border-radius: 6px; font-size: 1rem; }
.login-card button { padding: 11px; background: #2557d6; color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-size: 1rem; }
.login-card button:hover { background: #1b46b3; }
.hint { margin-top: 18px; font-size: 0.85rem; color: #6b7186; }
.hint ul { padding-left: 18px; }

/* The sign-in pages' styles are the ax- block near the end (the redesign, 2026-10-15). */
.auth-shell { min-height: 100vh; }   /* full-bleed wrapper for the sign-in, forgot and reset pages */

/* Dashboard tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.tile { background: #fff; padding: 22px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); color: inherit; display: block; }
.tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); text-decoration: none; }
.tile h2 { margin: 0 0 6px; color: #2557d6; }

/* Hub -- one card per platform module (live, coming soon, or restricted).
   Each card gets a left accent bar + icon badge whose color is driven by a
   per-module modifier class (.hub-card--m1..m6) so the six modules read as
   distinct at a glance, not identical white boxes. Live/soon/restricted are
   differentiated redundantly (bar+icon saturation AND the status pill), not
   by a single cue -- see the per-state rules below. */
/* Fixed 3-column grid (not auto-fit) so EVERY module card is the same width
   regardless of how many a section holds -- otherwise a 2-card section stretches
   its cards to ~50% while a 4-card section sits at ~33%, reading as inconsistent
   sizes. Steps down to 2 then 1 column. Sections with fewer cards simply leave
   trailing empty cells (fills in as more modules ship), same as the benchmark. */
.hub-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch; gap: 16px; margin-top: 20px;
}
@media (max-width: 1080px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-card {
  position: relative; display: flex; align-items: stretch; gap: 15px;
  height: 100%; min-height: 138px; background: #fff; border-radius: 12px;
  padding: 20px 22px 18px 24px; /* extra left padding clears the accent bar */
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid rgba(37,42,89,0.08);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.hub-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--navy);
}
.hub-card__icon {
  position: relative; /* anchor for the notification badge */
  flex: none; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(37,42,89,0.07); color: var(--navy);
}
.hub-card__icon svg { width: 23px; height: 23px; display: block; }

/* Notification badge -- a classic app-style count bubble overlapping the icon's
   top-right corner (half on / half off), with a white ring separating it from
   the icon and a z-index that keeps it in front. Shows how many pending items
   this module has for the viewer (e.g. calibration tiers still awaiting lock);
   only rendered when there's something to show. */
.hub-card__notif {
  position: absolute; top: -7px; right: -7px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; text-align: center;
  box-shadow: 0 0 0 2px #fff; z-index: 3;
}

.hub-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hub-card__top {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; margin-bottom: 5px;
}
.hub-card__title { font-size: 15.5px; font-weight: 700; color: var(--navy); line-height: 1.3; letter-spacing: -0.01em; }
.hub-card__desc { display: block; font-size: 13px; line-height: 1.55; color: #5f6678; }
.hub-card__footnote {
  display: block; font-size: 12px; line-height: 1.45; color: #7a3e00;
  background: #fdeede; border: 1px solid #f3d8ad; border-radius: 6px;
  padding: 6px 9px; margin-top: 8px; font-weight: 600;
}

.hub-status {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3.5px 9px; border-radius: 20px; white-space: nowrap;
}
.hub-status--live { background: #e3f6ee; color: #1b7a55; }
.hub-status--soon { background: #ece9e2; color: #6b6457; }
.hub-status--restricted { background: #fdeede; color: #7a3e00; }
/* Alert: a live module that has items awaiting this viewer -- amber, so colour
   signals "action needed" (the reference's per-card status), not decoration. */
.hub-status--alert { background: #fdecd2; color: #8a5200; text-transform: none; letter-spacing: .01em; }
.hub-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.hub-status--live .hub-status__dot {
  box-shadow: 0 0 0 2px #e3f6ee, 0 0 0 3px rgba(27,122,85,0.35);
  animation: hub-pulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hub-status--live .hub-status__dot { animation: none; } }
@keyframes hub-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Live: the whole card invites a click. Hover is deliberately flat + minimal
   -- no page-jumping lift or link underline -- just a faint wash of the
   module's own hue, an accent-toned border, and the arrow sliding in. The
   colour cue ties the hover to the module's identity; the arrow signals "go". */
.hub-card--live { cursor: pointer; }
.hub-card:hover, .hub-child:hover { text-decoration: none; }
/* Hover: a light navy background wash (kept per user preference) + a subtle
   lift + deeper shadow. With a single navy accent the wash is a tint of the
   brand navy rather than the old per-module hue. */
.hub-card--live:hover {
  transform: translateY(-2px);
  background: #e9edf9;
  border-color: rgba(37,42,89,0.28);
  box-shadow: 0 8px 20px rgba(37,42,89,0.10);
}
.hub-card--live:hover .hub-card__title { color: var(--navy-700); }
/* Bottom action link -- the visible "go" affordance (replaces the old top-right
   watermark arrow), pinned to the card's bottom-left via margin-top:auto so it
   lines up across the grid regardless of description length; arrow nudges on hover. */
.hub-card__action {
  margin-top: auto; padding-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.hub-card__action svg { width: 15px; height: 15px; transition: transform .18s cubic-bezier(.2,.7,.2,1); }
.hub-card--live:hover .hub-card__action svg,
.hub-card--live:focus-visible .hub-card__action svg { transform: translateX(3px); }
.hub-card--live .hub-card__icon, .hub-card--live .hub-card__body { position: relative; z-index: 1; }
.hub-card--live:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hub-card--live:hover { transform: none; }
  .hub-card--live:hover .hub-card__action svg,
  .hub-card--live:focus-visible .hub-card__action svg { transform: none; }
}

/* Featured card -- a navy ring marking the module the viewer should act on next
   (the one with the most pending items), like the reference's highlighted tile. */
.hub-card--featured { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), 0 6px 18px rgba(37,42,89,0.12); }
.hub-card--featured:hover { box-shadow: 0 0 0 1px var(--navy), 0 10px 24px rgba(37,42,89,0.16); }

/* Coming soon: muted but each module keeps a faint whisper of its own hue,
   so the grid still color-codes at a glance even while inactive. */
.hub-card--soon { background: #fbfbfd; cursor: default; }
.hub-card--soon::before { background: #d7d9e3; }
.hub-card--soon .hub-card__icon { background: #eef0f5; color: #9096a8; }
.hub-card--soon .hub-card__title { color: #6b7186; }
.hub-card--soon .hub-card__desc { color: #9096a8; }
.hub-card--soon:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.04); transform: none; }

/* Restricted: keeps the full navy accent ("this works, just not for you") --
   only the pill + footnote go amber; the card just isn't clickable. */
.hub-card--restricted { background: #fff; cursor: default; }
.hub-card--restricted::before { background: var(--navy); }

/* (Per-module accent classes retired: the Hub now uses one navy accent across
   every card. Colour signals status via the pills -- Live/Alert/Coming soon/
   Restricted -- not module identity, matching the benchmarked "clean" home. */

/* Hub section headers -- "Leadership" vs "For everyone" -- separating the
   HOD-and-above modules (Calibration, Succession Planning) from the rest. */
.hub-section-title { margin: 28px 0 2px; font-size: 1.05rem; color: var(--navy); }
/* Hub flip cards. The card keeps its exact front-face look; the back is a
   second face rotated behind it, so the module's contents appear in place
   rather than on another page.
   The two faces are STACKED IN ONE GRID CELL rather than absolutely positioned,
   so the shell is as tall as the taller face -- measured, not guessed. The
   previous version sized the shell from a formula (one row per door, floored at
   a fixed front height) and clipped any front whose tagline ran to three lines:
   IDP lost its "Open" action off the bottom edge. Grid stacking also keeps the
   row from jumping on flip, which was the formula's real job. */
.hub-flip { position: relative; height: 100%; perspective: 1400px; min-height: 138px; }
.hub-flip__inner {
  position: relative; display: grid; width: 100%; height: 100%; min-height: inherit;
  transition: transform .45s cubic-bezier(.2,.7,.3,1); transform-style: preserve-3d;
}
.hub-flip.is-flipped .hub-flip__inner { transform: rotateY(180deg); }
.hub-flip__face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Only the face you can SEE may be interacted with. Both faces sit in the same
   grid cell, so without this the hidden one still hit-tests: hovering a sub-item on the
   back also hovered the front button underneath, whose :hover lifts the card
   by 2px -- which moved it out from under the pointer, dropped the hover,
   moved it back, and flickered. It also means the back's links can't be
   clicked or tabbed into while the card is closed. */
.hub-flip__back { pointer-events: none; }
.hub-flip.is-flipped .hub-flip__back { pointer-events: auto; }
.hub-flip.is-flipped .hub-flip__front { pointer-events: none; }
.hub-flip__front { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.hub-flip__back {
  transform: rotateY(180deg); display: block; padding: 16px 18px 14px 22px;
}
.hub-flip__head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px; }
.hub-flip__title { font-weight: 600; font-size: 0.95rem; color: var(--navy); }
.hub-flip__close { background: none; border: 0; font-size: 1.15rem; line-height: 1; color: #9aa0b0;
  cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.hub-flip__close:hover { color: var(--navy); background: #eef0f6; }
.hub-flip__list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.hub-sub { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: inherit; font-size: 0.9rem; line-height: 1.2; }
.hub-sub__icon { flex: none; display: block; width: 17px; height: 17px; color: var(--navy); }
.hub-sub__icon svg { width: 17px; height: 17px; display: block; }
.hub-sub__name { flex: 1; min-width: 0; }
.hub-sub__go { width: 15px; height: 15px; flex: none; color: #9aa0b0; }
/* Same badge as the card's, sized down one level -- a sub-module that needs
   action should read as the same kind of signal, not a new one. */
.hub-sub__notif { flex: none; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--red, #c0392b); color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 17px; text-align: center; }
/* Background stays put on hover; the affordance is the text and chevron
   darkening instead. A colour swap on the row itself is what you notice when
   the pointer crosses row boundaries in a tight list. */
.hub-sub--live:hover { background: transparent; color: var(--navy); }
.hub-sub--live:hover .hub-sub__go { color: var(--navy); transform: translateX(2px); }
.hub-sub__go { transition: transform .15s ease, color .15s ease; }
.hub-sub--soon { color: #9aa0b0; }
.hub-sub--soon .hub-sub__icon { color: #b6bbc9; }
.hub-sub__tag { flex: none; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #8a8f9e; background: #f1f2f6; padding: 2px 6px; border-radius: 4px; }

/* A flip is decorative motion; honour a reduced-motion preference by simply
   swapping the faces with no rotation. */
@media (prefers-reduced-motion: reduce) {
  .hub-flip__inner { transition: none; }
}

.hub-grid + .hub-section-title { margin-top: 32px; }
.hub-section-sub { margin: 0 0 4px; font-size: 0.85rem; }

/* Hub sub-page (e.g. /hub/calibration) -- a plain card wrapping the area
   list, reusing .hub-group__list/.hub-child below (originally built for the
   nested-in-card pattern, now the sub-page's main content instead). */
.hub-subpage { max-width: 640px; }

/* Area list -- one row per area inside a Hub sub-page, each independently
   live/soon/restricted. Mini-tiles echo .hub-card's own language (border,
   radius, left accent bar, icon badge) at reduced scale. */
.hub-group__list { display: flex; flex-direction: column; gap: 6px; }
.hub-child {
  position: relative; display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 10px; padding: 7px 12px 7px 14px; border-radius: 8px;
  border: 1px solid rgba(37,42,89,0.07); background: #fbfbfd;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hub-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-muted, #d7d9e3); }
.hub-child__icon {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-muted, #eef0f5); color: var(--accent-muted, #9096a8);
}
.hub-child__icon svg { width: 13px; height: 13px; display: block; }
.hub-child__name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: #6b7186; line-height: 1.3; white-space: normal; word-break: break-word; }
.hub-child .hub-status { padding: 3px 8px; font-size: 9.5px; flex: none; }

/* Live child: promoted to full accent + real hover affordance, mirroring
   .hub-card--live's own hover language at row scale. */
.hub-child--live { background: #fff; border-color: rgba(37,42,89,0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.hub-child--live::before { background: var(--accent, var(--navy)); }
.hub-child--live .hub-child__icon { background: var(--accent-tint, rgba(37,42,89,0.08)); color: var(--accent, var(--navy)); }
.hub-child--live .hub-child__name { color: var(--navy); }
.hub-child--live:hover { background: #f7f8fc; border-color: rgba(37,42,89,0.2); transform: translateX(2px); }
.hub-child--live::after {
  content: "\2192"; flex: none; font-size: 13px; font-weight: 700; color: var(--accent, var(--navy));
  opacity: 0; transform: translateX(-3px); transition: opacity .15s ease, transform .15s ease; margin-left: 2px;
}
.hub-child--live:hover::after { opacity: 1; transform: translateX(0); }

/* Soon / restricted child: a plain, non-interactive <div> -- no hover, no
   cursor change, no click target. That total absence of interactivity IS
   the "nothing to click here" signal, same as top-level .hub-card--soon. */
.hub-child--soon { cursor: default; }
.hub-child--restricted { cursor: default; }
.hub-child--restricted::before { background: #e0952e; }
.hub-child--restricted .hub-child__name { color: #5f6678; }
.hub-child__note { font-size: 11px; line-height: 1.4; color: #7a3e00; padding: 2px 4px 4px 38px; margin-top: -2px; font-weight: 600; }

@media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; } }

/* --- Hub cycle banner + personalized welcome band ------------------------
   The "what's mine" half of the home, sitting above the module launcher:
   a slim active-cycle strip, then a greeting + avatar + plain-language task
   summary. Mirrors Workday "Awaiting Your Action" / SuccessFactors "Needs
   Attention" / Lattice "Me" -- separating personal state from the card grid. */
.hub-cyclebar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; margin-bottom: 16px;
  background: rgba(37,42,89,0.05); border: 1px solid rgba(37,42,89,0.09);
  border-radius: 12px;
}
.hub-cyclebar__icon { flex: none; color: var(--navy); display: inline-flex; }
.hub-cyclebar__icon svg { width: 20px; height: 20px; display: block; }
.hub-cyclebar__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hub-cyclebar__text strong { color: var(--navy); font-size: 0.92rem; font-weight: 700; }
.hub-cyclebar__sub { color: #5f6678; font-size: 0.82rem; }

.hub-welcome {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  background: #fff; border: 1px solid rgba(37,42,89,0.07); border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 20px 24px; margin-bottom: 4px;
}
/* Shared identity block -- the Hub and the dashboard greet a person the
   same way, so the markup lives in _welcome_identity.html and these are
   named for the job, not for the page that happened to need it first. */
.welcome-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.welcome-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; letter-spacing: .02em;
}
.welcome-who { min-width: 0; }
.welcome-hi { margin: 0; font-size: 1.45rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.2; }
.welcome-role { margin: 3px 0 0; font-size: 0.9rem; color: #5f6678; }
.hub-welcome__tasks { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.hub-welcome__eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8a90a2; }
.hub-welcome__val { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.hub-welcome__val.is-open { color: var(--navy); }
.hub-welcome__val.is-clear { color: #1b7a55; display: inline-flex; align-items: center; gap: 6px; }
.hub-welcome__val.is-clear svg { width: 17px; height: 17px; }
.hub-welcome__sub { font-size: 0.8rem; color: #5f6678; }
@media (max-width: 640px) {
  .hub-welcome { align-items: flex-start; }
  .hub-welcome__tasks { align-items: flex-start; text-align: left; }
}

/* Assessment */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; }
.status-pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.status-pending   { background: #fff4d4; color: #8a6500; }
/* `SUBMITTED` is what waits on the line manager — use amber, not blue, so it
   reads as "needs your action" rather than "inactive". */
.status-submitted { background: #ffe1b3; color: #8a4500; }
.status-reviewed  { background: #d4f5dc; color: #1d6b34; }
.status-progress  { background: #dbe7ff; color: #1f4ba3; }

/* ---- Rate page: principle tagline + optional per-principle comment ---- */
.crit-tag { font-style: italic; font-weight: 400; color: #c7cdf0; font-size: 0.92em; }
.crit-comment { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e4e7ef; }
/* Collapsible comment box. The whole <summary> is the click-to-expand control;
   the textarea, Draft-with-AI and the help text live in .crit-comment-body. The
   The competency form reuses this exact component for its section remarks. */
/* The control itself is a compact button on the RIGHT; any existing comment
   previews to its left, so a written note is visible without opening the box. */
.crit-comment-toggle {
  list-style: none; cursor: pointer; padding: 2px 0;
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
}
.crit-comment-toggle::-webkit-details-marker { display: none; }
.crit-comment-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--rl-line, #d7dbe6); border-radius: 8px;
  background: #fff; font-weight: 600; font-size: 0.86rem; color: #252A59;
  transition: border-color .15s, color .15s, background .15s;
}
.crit-comment-toggle:hover .crit-comment-btn {
  border-color: var(--navy); color: var(--navy); background: #f7f9fd;
}
/* One-line preview of an existing comment while collapsed, so a written note is
   never invisible; hidden once the box is open (the textarea shows it in full). */
.crit-comment-peek {
  flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: 0.85rem; color: #5f6678;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
details.crit-comment[open] .crit-comment-peek { display: none; }
.crit-comment-chev { color: #8a93a6; transition: transform .15s; }
details.crit-comment[open] .crit-comment-chev { transform: rotate(180deg); }
.crit-comment-body { margin-top: 8px; }
.crit-comment label { display: block; font-weight: 600; font-size: 0.9rem; color: #252A59; margin-bottom: 6px; }
.crit-comment .opt { color: #8a93a6; font-weight: 400; font-size: 0.85em; }
.crit-comment textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.5;
  padding: 10px 12px; border: 1px solid #d7dbe6; border-radius: 8px; background: #fbfcfe;
  resize: vertical; min-height: 72px;
}
.crit-comment textarea:focus { outline: none; border-color: #252A59; box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }
.crit-comment textarea[readonly] { background: #f1f3f8; color: #4a5066; cursor: default; }
.field-help { font-size: 0.8rem; color: #5f6678; margin: 6px 0 0; }
.note-resubmit { background: #fff4e6; border: 1px solid #f0c89a; color: #7a3e00; }
.resubmit-chip {
  display: inline-block; background: #fdeede; color: #8a4500; font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4px; vertical-align: middle;
}

/* ---- Admin: assessor comments under behaviour agreement ---- */
.crit-feedback { margin: 8px 0 18px; padding: 10px 14px; background: #f7f9fc; border: 1px solid #eef0f5; border-radius: 8px; }
.crit-feedback-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #5f6678; margin-bottom: 6px; }
.feedback-item { padding: 7px 0; }
.feedback-item + .feedback-item { border-top: 1px solid #eef0f5; }
.feedback-item p { margin: 3px 0 0; font-size: 0.9rem; color: #1f2330; white-space: pre-wrap; }

/* ---- Sub-admin (company-scoped) management ---- */
.company-pick { border: 1px solid #e4e7ef; border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.company-pick legend { font-size: 0.85rem; font-weight: 600; color: #252A59; padding: 0 4px; }
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; }
.company-opt { display: flex; align-items: center; gap: 7px; font-size: 0.88rem; padding: 3px 0; }
.subadmin-row { border-top: 1px solid #eef0f5; padding: 14px 0; }
.subadmin-row:first-of-type { border-top: none; padding-top: 4px; }
.subadmin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }

/* ---- One assessor's per-principle comment on the "View answers" page ---- */
.resp-comment { background: #f4f6fb; border: 1px solid #e4e7ef; border-radius: 8px; padding: 9px 12px; margin: 8px 0 18px; }
.resp-comment-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #6b7186; margin-bottom: 3px; }
.resp-comment p { margin: 0; font-size: 0.9rem; color: #1f2330; white-space: pre-wrap; }

.page-head-right { display: flex; gap: 10px; align-items: center; }

/* Potential pill - shown to managers, HODs, admin (never the self-assessor) */
.potential-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600;
  background: #eef0f6; color: #4a5066;
  border: 1px solid #d8dbe6;
}
.potential-pill strong { font-weight: 700; }
.potential-pill[data-band="Low"]  { background: #fde6cc; color: #8a4500; border-color: #f3c186; }
.potential-pill[data-band="Mid"]  { background: #e0e9fb; color: #1b46b3; border-color: #bcd0f3; }
.potential-pill[data-band="High"] { background: #d4f5dc; color: #1d6b34; border-color: #a8e2b5; }
/* "Pending" (released but not yet enough submissions) — visually distinct from
   Low/Mid/High so it doesn't read as another band, and from the grey base so
   it doesn't collide with the neutral Direct/Indirect chip sitting beside it. */
.potential-pill[data-band="None"] { background: #ece7fb; color: #5b3fa6; border-color: #cdbdf0; }
/* Performance Management's 5-band system (UA/BE/ME/AE/OU) -- additive,
   independent of the 360 Potential Calibration module's Low/Mid/High/None
   above (different scale entirely, same .potential-pill shape reused). */
.potential-pill[data-band="UA"] { background: #fbdada; color: #a02323; border-color: #f0b3b4; }
.potential-pill[data-band="BE"] { background: #fde6cc; color: #8a4500; border-color: #f3c186; }
.potential-pill[data-band="ME"] { background: #e0e9fb; color: #1b46b3; border-color: #bcd0f3; }
.potential-pill[data-band="AE"] { background: #d7f0e0; color: #1a7a54; border-color: #a8ddc0; }
.potential-pill[data-band="OU"] { background: #d4f5dc; color: #1d6b34; border-color: #a8e2b5; }

/* Bottom-of-page two-bar panel: Self -> After review */
.potential-panel {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 24px; padding: 18px 22px; background: #fff;
  border: 1px solid #e1e4ee; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.potential-row { display: flex; flex-direction: column; gap: 6px; }
.potential-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: #6b7186; font-weight: 600;
}
.potential-panel .potential-pill { font-size: 0.95rem; padding: 8px 16px; }
.potential-arrow { font-size: 1.4rem; color: #b7bdcc; }

.team-table .pot-cell { font-weight: 600; }
.team-table .pot-Low  { color: #8a4500; }
.team-table .pot-Mid  { color: #1b46b3; }
.team-table .pot-High { color: #1d6b34; }

.category-block { margin-top: 28px; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.category-block h2 { margin-top: 0; color: #2557d6; }

/* Skill Category subheading inside the Functional Competency section */
.skill-group-head {
  margin: 26px 0 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2557d6;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: #eef2fb;
  border-left: 4px solid #2557d6;
  border-radius: 0 4px 4px 0;
}
/* Tighten the first group head's top margin so it sits close to the section heading. */
.category-block .skill-group-head:first-of-type { margin-top: 14px; }

/* Ability-items info tooltip on functional criterion headings.
   Hover or focus the (i) icon to reveal the bullet list. */
.info-tip {
  position: relative; display: inline-block; margin-left: 6px; cursor: help;
  color: #9aa0b0; vertical-align: -3px;
}
.info-tip:hover, .info-tip:focus { color: var(--navy); }
.info-icon-svg { width: 15px; height: 15px; display: block; }
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #2557d6; color: #fff;
  font-size: 0.7rem; font-weight: 700; font-style: italic; font-family: Georgia, serif;
  line-height: 1;
}
.info-tip-body {
  display: none;
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  background: #1f2330; color: #fff; padding: 12px 14px; border-radius: 6px;
  width: 480px; max-width: 80vw;
  max-height: 60vh; overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  /* Tooltip must never intercept clicks on underlying controls (Submit, etc.) */
  pointer-events: none;
}
/* When the trigger is near the bottom of the viewport, JS adds .flip-up
   to render the tooltip above the icon instead of below. */
.info-tip.flip-up .info-tip-body {
  top: auto; bottom: calc(100% + 8px);
}
.info-tip:hover .info-tip-body,
.info-tip:focus .info-tip-body,
.info-tip:focus-within .info-tip-body { display: block; }
.info-tip-body strong {
  display: block; font-size: 0.75rem; letter-spacing: 0.5px;
  text-transform: uppercase; color: #b8c0d4; margin-bottom: 6px;
}
.info-tip-body pre {
  margin: 0; font-family: inherit; font-size: 0.85rem; color: #fff;
  white-space: pre-wrap; word-wrap: break-word; line-height: 1.5;
}

/* Dashboard AI+ module cards (2026-09-14): one row replacing the old "Your
   review" + "Leadership" sections. Reuses .info-tip for the pending-tasks
   popout, made interactive (pointer-events + a bridge) so the listed doors are
   clickable, and re-anchored to the icon's right so it doesn't overflow. */
.dash-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
/* A prominent module card: a large module-coloured icon tile on the left spanning both
   text lines, title + italic status on the right, and a lift on hover -- never an
   underline (the whole card is the click target). */
.dash-mod { position: relative; border: 1px solid #e4e7ef; border-radius: 12px; background: #fff;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.dash-mod:not(.is-disabled):hover { transform: translateY(-3px); border-color: #c9cee0;
  box-shadow: 0 10px 22px rgba(20, 30, 80, 0.12); }
.dash-mod-link { display: flex; align-items: center; gap: 13px; padding: 26px 46px 26px 16px;
  color: inherit; text-decoration: none; }
.dash-mod-link:hover { text-decoration: none; }
.dash-mod-ico { width: 52px; height: 52px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.dash-mod-ico svg { width: 26px; height: 26px; }
.dash-mod-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-mod-name { font-weight: 700; font-size: 1rem; color: var(--navy); }
.dash-mod-sub { margin: 0; font-style: italic; color: #6b7186; font-size: 0.85rem; }
.dash-mod-review .dash-mod-ico { background: #e1f5ee; color: #0f6e56; }
.dash-mod-calibration .dash-mod-ico { background: #faeeda; color: #854f0b; }
.dash-mod-dept_review .dash-mod-ico { background: #e6ecfb; color: #1b46b3; }   /* an HOD's department review */
.dash-mod-lms .dash-mod-ico { background: #f1efe8; color: #9aa0b4; }
.dash-mod.is-disabled { background: #f6f7f9; border-style: dashed; }
.dash-mod.is-disabled .dash-mod-name { color: #9aa0b4; }
/* The (i) at the card's right, vertically centred and enlarged; its popout is
   right-anchored so it extends left, on-screen. */
.dash-mod-info { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); }
.dash-mod-info .info-icon-svg { width: 22px; height: 22px; }
.dash-mod .info-tip-body { left: auto; right: 0; width: min(280px, 80vw); pointer-events: auto; }
.dash-mod .info-tip-body::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.dash-mod-pend { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.dash-mod-pend li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; line-height: 1.35; }
.dash-mod-pend a { color: #fff; text-decoration: none; }
.dash-mod-pend a:hover { color: #cfe0ff; }
.dash-mod-pmeta { color: #b8c0d4; flex: none; font-size: 0.78rem; }
/* "Where you stand" folded into the top of the record card as a subsection. */
.dash-substand { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #eef0f5; }
.dash-sub-h { margin: 0 0 10px; font-weight: 700; font-size: 0.9rem; color: var(--navy); }

/* Per-criterion block */
.criterion { margin-top: 22px; }
/* The navy header band now separates sections, so no divider rule is needed. */
.criterion + .criterion { border-top: none; padding-top: 0; }
/* Navy header band: each Leadership Principle gets its own filled bar so the
   seven sections read as distinct blocks. */
.crit-head {
  background: linear-gradient(135deg, #2e3566, #252a59);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  /* Statement on top, short name underneath -- two lines, not one wrapped row. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.crit-name { font-weight: 700; font-size: 1.05rem; color: #fff; }
.crit-desc { font-size: 0.88rem; color: #6b7186; margin-top: 2px; }

.stmt-table { width: 100%; border-collapse: collapse; }
.stmt-table td { padding: 12px 6px; border-bottom: 1px solid #f0f1f6; vertical-align: middle; }
.stmt-table tr:last-child td { border-bottom: 0; }
.stmt-text { color: #2a3148; font-size: 0.92rem; }
.stmt-num  { display: inline-block; min-width: 32px; color: #6b7186; font-weight: 600; margin-right: 6px; }
.stmt-action { width: 320px; text-align: right; white-space: nowrap; }
.self-rating { font-size: 0.78rem; color: #6b7186; margin-bottom: 4px; }
.self-rating strong { color: #2a3148; }

/* Validation banner shown when user tries to submit with blanks */
.banner-error {
  background: #fde2e2; color: #8a1a1a; border: 1px solid #f5b5b5;
  padding: 12px 16px; border-radius: 6px; margin-bottom: 14px;
}
.banner-error strong { display: block; margin-bottom: 2px; }

/* Red outline on any unanswered rating group when validation fails */
.rating-buttons.incomplete {
  outline: 2px solid #d93025; outline-offset: 4px; border-radius: 10px;
}

/* Manager review: ring the selected button when manager's pick differs
   from the employee's self-rating, to make overrides easy to spot. */
.rating-buttons.changed .rating-btn:has(input:checked) {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #87ceeb;
  position: relative; z-index: 1;
}
/* Tiny inline preview of the override ring, used in the manager instruction. */
.ring-sample {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  background: #2557d6; box-shadow: 0 0 0 1px #fff, 0 0 0 2px #87ceeb;
  vertical-align: middle; margin: 0 4px;
}

/* Consistently / Inconsistently buttons (two side-by-side, segmented).
   Container does NOT clip overflow so the hover tooltip can escape upward.
   Corner rounding is applied to first/last button instead. */
.rating-buttons { display: inline-flex; }
.rating-btn {
  position: relative;        /* anchor for ::after tooltip */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 18px; min-width: 130px;
  background: #fff; color: #4a5066;
  border: 1px solid #cdd1dd;
  font-size: 0.9rem; font-weight: 500; cursor: pointer; user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rating-btn + .rating-btn { border-left: 0; }
.rating-btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.rating-btn:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.rating-btn:hover { background: #eef2fb; }
/* Visually hide the radio without removing it from the focus order
   (keyboard / screen-reader accessibility). */
.rating-btn input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Visible focus ring when the (hidden) radio is keyboard-focused. */
.rating-btn:focus-within {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  z-index: 2;
}
.rating-btn.rating-yes:has(input:checked) {
  background: #2557d6; color: #fff; border-color: #2557d6;
}
.rating-btn.rating-no:has(input:checked) {
  background: #5d80d4; color: #fff; border-color: #5d80d4;
}
.rating-btn:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

/* Form is locked (employee after submit, manager after review).
   Buttons remain visible so the past selections are readable, but the whole
   panel is clearly greyed and non-interactive. */
.is-locked .rating-btn {
  cursor: default; color: #6b7186; background: #f5f6fa;
}
.is-locked .rating-btn:hover { background: #f5f6fa; }      /* kill hover */
.is-locked .rating-btn[data-tip]:hover::after,
.is-locked .rating-btn[data-tip]:hover::before { display: none; }
/* In locked state, the *unselected* button is rendered as static muted
   text — not a button — so a sighted user does not mistake it for an
   actionable control. */
.is-locked .rating-btn:not(:has(input:checked)) {
  background: transparent;
  color: #9098ac;
  border-color: transparent;
}
.is-locked .rating-btn.rating-yes:has(input:checked) {
  background: #6b86c9; color: #fff; border-color: #6b86c9;  /* muted blue */
}
.is-locked .rating-btn.rating-no:has(input:checked) {
  background: #a4b4d6; color: #fff; border-color: #a4b4d6;  /* muted lighter blue */
}
/* Manager override ring still visible but desaturated when locked */
.is-locked .rating-buttons.changed .rating-btn:has(input:checked) {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b8d4e6;
}
.is-locked .self-rating { opacity: 0.85; }

/* CSS tooltip on hover, driven by data-tip="..." */
.rating-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #1f2330; color: #fff; padding: 6px 10px; border-radius: 6px;
  font-size: 0.78rem; font-weight: 400; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  pointer-events: none; z-index: 10;
}
.rating-btn[data-tip]:hover::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1f2330;
  pointer-events: none; z-index: 10;
}

/* Legend shown in the instruction note */
.rating-legend {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 8px;
  font-size: 0.85rem; color: #4a5066;
}
.rating-legend .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px;
  vertical-align: middle;
  background: #2557d6;
}

/* Final action rows sit bottom-right across every module, so submit / approve /
   accept always land in the same place. A page that genuinely needs a different
   arrangement (e.g. IDP's space-between row) overrides justify-content inline,
   which wins over this rule. */
.actions {
  margin-top: 22px; display: flex; gap: 10px; align-items: center;
  justify-content: flex-end; flex-wrap: wrap;
}
.actions button {
  padding: 10px 18px; border: 1px solid #cdd1dd; background: #fff; border-radius: 6px;
  font-size: 0.95rem; cursor: pointer;
}
.actions button.primary { background: #2557d6; color: #fff; border-color: #2557d6; }
.actions button.primary:hover { background: #1b46b3; }
.actions button.primary:disabled, .actions button.primary:disabled:hover {
  background: #6b86c9; border-color: #6b86c9; cursor: not-allowed;
}
.btn-link { padding: 10px 14px; }

/* Confirmation modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(31, 35, 48, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: #fff; border-radius: 12px; max-width: 460px; width: 100%;
  padding: 26px 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.modal-card h2 { margin: 0 0 10px; font-size: 1.25rem; color: #1f2330; }
.modal-card p  { margin: 0 0 14px; color: #2a3148; line-height: 1.45; }
.modal-warning {
  background: #fff4d4; color: #6b4f00; border-left: 4px solid #d99100;
  padding: 10px 12px; border-radius: 4px; font-size: 0.9rem;
  line-height: 1.4;
}
.modal-warning strong { display: block; margin-bottom: 2px; color: #8a6500; }
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px;
}
.modal-actions button {
  padding: 9px 16px; border: 1px solid #cdd1dd; background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 0.95rem;
}
.modal-actions button.primary {
  background: #2557d6; color: #fff; border-color: #2557d6;
}
.modal-actions button.primary:hover { background: #1b46b3; }
.modal-actions button.primary:disabled {
  background: #6b86c9; border-color: #6b86c9; cursor: progress;
}

/* Shared confirmation dialog (base.html's openConfirmDialog) — replaces
   window.confirm() for every data-confirm form: calibration locks across all
   three modules, admin removals, cycle/period activation. Built on the
   .modal-card component above, so it inherits the app's own dialog look
   rather than the browser's. */
.confirm-dialog .modal-card { max-width: 460px; }
.confirm-dialog__head { display: flex; align-items: flex-start; gap: 11px; }
.confirm-dialog__head h2 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.confirm-dialog__icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e6ecfb; color: #2557d6;
}
.confirm-dialog__icon.is-danger { background: #fdeaea; color: #b3261e; }
.confirm-dialog__icon svg { width: 19px; height: 19px; }
.confirm-dialog__msg {
  margin: 11px 0 0 45px;            /* aligns under the heading, not the icon */
  color: #4a5165; font-size: 0.94rem; line-height: 1.5;
}
.confirm-dialog__reason { display: block; margin-top: 12px; font-size: 0.88rem; color: #4a5165; }
.confirm-dialog__reason textarea {
  display: block; width: 100%; margin-top: 5px; padding: 8px 10px; box-sizing: border-box;
  border: 1px solid #cdd1dd; border-radius: 7px; font: inherit; font-size: 0.92rem;
  line-height: 1.45; resize: vertical; min-height: 62px;
}
.confirm-dialog__reason textarea:focus { outline: none; border-color: #2557d6; }
.confirm-dialog .modal-actions { margin-top: 18px; }
.modal-actions button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* AI+ calibration assistant ------------------------------------------------- */
/* The "Calibrate with AI+" link on the calibration grid. */
.calib-assist-cta { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.calib-assist-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: #eef2fb; color: #1b46b3; border: 1px solid #c7d3f0; border-radius: 8px;
  font-weight: 600; font-size: 0.92rem; text-decoration: none; white-space: nowrap;
}
.calib-assist-link:hover { background: #e2e9f8; text-decoration: none; }
/* The assistant page: a header, the pinned distribution/roster widget, the chat. */
.calib-assist-head { margin-bottom: 14px; }
.calib-assist-back { font-size: 0.9rem; color: #4a5165; text-decoration: none; }
.calib-assist-back:hover { text-decoration: underline; }
.calib-assist-title { margin: 6px 0 0; font-size: 1.3rem; }
.rv-calib-wrap { display: flex; flex-direction: column; gap: 14px; }
/* The calibration card is an in-chat card now (the chat scrolls around it), so it is never capped: capped, the
   flex column crushed the curve's roster -- the band controls -- to 1px (found 2026-09-29, when the curve became the
   one place bands move). Nothing inside may be shrunk. The standalone assistant page keeps its pinned cap. */
.rv-calib-pin { max-height: 46vh; overflow: auto; }   /* the standalone assistant's pinned panel */
.rv-tc-pin.rv-calib-pin { max-height: none; overflow: visible; }
.rv-tc-pin.rv-calib-pin > * { flex: none; }
.rv-calib-dist { margin: 0; }
.rv-calib-dist .calib-dist-band { flex: 0 0 128px; font-weight: 600; font-size: 0.85rem; }
.rv-calib-verdict { margin-top: 10px; font-size: 0.9rem; font-weight: 600; }
.rv-calib-verdict.is-ok { color: #1a7a54; }
.rv-calib-verdict.is-off { color: #9a5a12; }
.rv-calib-verdict.is-empty { color: #5b6275; font-weight: 500; }
.rv-calib-roster { margin-top: 12px; overflow-x: auto; }
@media (max-width: 760px) { .rv-calib-pin { max-height: none; } }
.rv-calib-roster-tbl { width: 100%; }
.rv-calib-band-select { min-width: 150px; }
.rv-calib-moved { margin-left: 8px; font-size: 0.78rem; color: #9a5a12; }
/* The draft-card "Tweak" dropdown: a COMPACT control inline in the actions row beside Save, not a
   full-width bar. `select.` raises specificity above `.modern-select { width:100% }` (which is later
   in source), and flex:0 0 auto stops the flex row growing/shrinking it. */
select.rv-tweak-select { flex: 0 0 auto; width: auto; min-width: 140px; max-width: 176px; }
.rv-calib-flag { font-size: 0.76rem; padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.rv-calib-flag-endorsed { background: #d9efe6; color: #0f6e56; }
.rv-calib-flag-disputed { background: #fdf0e2; color: #9a5a12; }
.rv-calib-flag-both { background: #eef1f7; color: #4a5165; }
.rv-calib-explain { padding: 3px 10px; font-size: 0.82rem; }
/* THE CALIBRATION CARD (rebuilt from a UI audit, 2026-09-29 -- Chris: "this doesn't even pass the basic UI read flow").
   One column, read top to bottom: title bar -> who + their rating -> the verdict and ONE reason -> their evidence
   (a table) -> their remark -> what to check. Five sizes only (18 name / 15 title / 14 body / 13 secondary / 12 table
   heads + in-row pills), weights 400/600/700, nothing under 12px. One tinted surface (the verdict); the card is white.
   Bands keep the app's band palette; justification is glyph + word + tone; amber means "moved / differs". */
.rv-stage-card:has(.rv-calib-pin) { background: #fff; border: 1px solid var(--rl-line, #e4e7ef); }
.rv-stage-card:has(.rv-calib-pin) .rv-bz-btn { background: #f4f6fb; }
.rv-stage-card:has(.rv-calib-pin) .rv-bz-btn:disabled { background: #f7f8fb; color: #c3c9db; }
.rv-stage-card:has(.rv-calib-pin) .rv-bz-body { padding: 10px 16px; }
.rv-calib-pin.rv-cal-people { max-height: none; overflow: visible; }
.rv-calib-pin { font-size: 14px; color: #2b3040; }
.rv-cal-titlebar { display: flex; align-items: baseline; gap: 12px; padding-bottom: 5px;
  border-bottom: 1px solid var(--rl-line, #e4e7ef); }
.rv-cal-title { font-size: 15px; font-weight: 700; color: var(--navy, #252A59); white-space: nowrap; }
.rv-cal-count { font-size: 13px; color: #4a5165; }
.rv-cal-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--navy, #252A59); cursor: pointer; white-space: nowrap; }
.rv-cal-link:hover { text-decoration: underline; }
.rv-cal-link:focus-visible, .rv-cal-go:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
.rv-cal-skip, .rv-cal-go { margin-left: auto; }
.rv-cal-foot { justify-content: flex-end; }
.rv-cal-go { background: var(--navy, #252A59); color: #fff; border: 0; border-radius: 8px; padding: 5px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rv-cal-go:hover { background: var(--navy-700, #1d2249); }
.rv-cal-person { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
/* One person's page, roomier and scrolling inside itself (2026-10-05: "expand the spacing and make it scrollable"):
   calFitPerson caps its height to the room the chat has; the title bar and side strips stay put. */
.rv-cal-people .rv-cal-person { gap: 16px; margin-top: 12px; padding: 2px 14px 16px 2px; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-gutter: stable; }
.rv-cal-people .rv-cal-person.rv-cal-noscroll { overflow-y: visible; padding-right: 2px; scrollbar-gutter: auto; }
.rv-cal-people .rv-cal-person:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px;
  border-radius: 6px; }
.rv-cal-people .rv-cal-person > * { flex: none; }
.rv-cal-people .rv-cal-deltas { gap: 4px; margin-top: -6px; }
.rv-cal-people .rv-cal-verdict { padding: 14px 18px; }
.rv-cal-people .rv-cal-vh { gap: 10px; }
.rv-cal-people .rv-cal-why { margin-top: 10px; line-height: 23px; }
.rv-cal-people .rv-cal-rest { gap: 22px; }
.rv-cal-people .rv-cal-ev th { padding-bottom: 8px; }
.rv-cal-people .rv-cal-evrow td { padding: 12px 14px 4px 0; }
.rv-cal-people .rv-cal-evwhy td { padding: 0 14px 12px 0; line-height: 20px; }
.rv-cal-people .rv-cal-remarks2 { gap: 28px; margin-top: 0; }
.rv-cal-people .rv-cal-remarkt { margin-top: 6px; line-height: 22px; }
.rv-cal-people .rv-cal-h4 { margin-bottom: 2px; }
.rv-cal-people .rv-cal-steps ul { margin-top: 8px; }
.rv-cal-people .rv-cal-steps li { line-height: 22px; margin-bottom: 6px; }
.rv-cal-id { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rv-cal-who { min-width: 0; }
.rv-cal-name { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; color: #1f2330; }
.rv-cal-sub { font-size: 13px; line-height: 18px; color: #4a5165; margin-top: 2px; }
.rv-cal-rating { flex: none; display: flex; align-items: center; gap: 8px; }
.rv-cal-k { font-size: 13px; color: #4a5165; }
.rv-cal-pill { font-size: 12px; font-weight: 600; padding: 1px 8px; line-height: 16px; }
.rv-cal-pill-big { font-size: 14px; font-weight: 700; padding: 3px 10px; }
.rv-cal-pill[data-band="AE"] { color: #15693f; }
.rv-cal-none { font-size: 14px; font-weight: 600; color: #4a5165; }
.rv-cal-deltas { display: flex; flex-direction: column; gap: 2px; margin-top: -2px; }
.rv-cal-delta { font-size: 13px; line-height: 18px; color: #4a5165; }
.rv-cal-delta.is-moved { color: #9a5a12; }
.rv-cal-empty { margin: 0; font-size: 14px; color: #4a5165; background: #f7f8fb; border-radius: 8px; padding: 10px 12px; }
/* the verdict: the ONE tinted block, a 3px bar in its tone, directly under the rating it judges */
.rv-cal-verdict { background: #f7f8fb; border-left: 3px solid #c3c9db; border-radius: 8px; padding: 6px 12px;
  min-height: 58px; }
.rv-cal-verdict[data-tone="ok"], .rv-cal-verdict[data-tone="warn"] { border-left-color: #c3c9db; }   /* no colour */
.rv-cal-verdict[data-tone="bad"] { border-left-color: #5f6678; }
.rv-cal-vh { display: flex; align-items: center; gap: 8px; }
.rv-cal-q { font-size: 13px; font-weight: 600; color: #4a5165; }
.rv-cal-vh .rv-verdict { font-size: 14px; line-height: 18px; }
.rv-cal-src { margin-left: auto; font-size: 13px; color: #5f6678; }
.rv-cal-why { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: #2b3040; }
.rv-cal-soft { font-size: 13px; color: #5f6678; }
.rv-cal-why.rv-cal-soft { font-size: 14px; }
.rv-cal-rest { display: flex; flex-direction: column; gap: 6px; }
.rv-cal-rest:empty { display: none; }
.rv-cal-h4 { margin: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: #1f2330; }
.rv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* tables: the evidence (person) and the roster (curve) -- white, hairline rules, no row tints or group bars */
.rv-cal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-cal-table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #5f6678; padding: 0 8px 4px 0; border-bottom: 1px solid var(--rl-line, #e4e7ef); white-space: nowrap; }
.rv-cal-table td { padding: 4px 8px 1px 0; vertical-align: top; color: #2b3040; }
.rv-cal-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the small columns shrink to their content, so the KPI name keeps the room (it wrapped) */
.rv-cal-ev th:not(:first-child), .rv-cal-evrow td:not(.rv-cal-kpi) { width: 1%; white-space: nowrap; }
.rv-cal-kpi { font-size: 14px; font-weight: 600; color: #1f2330; }
.rv-cal-notetag { margin-left: 6px; font-size: 12px; font-weight: 600; color: #4a5165; background: #eef0f5;
  border-radius: 999px; padding: 0 7px; vertical-align: 1px; }
.rv-cal-just { font-size: 13px; font-weight: 600; white-space: nowrap; }
.rv-cal-just[data-tone="ok"], .rv-cal-just[data-tone="warn"] { color: #5f6678; }   /* symbol and word, no colour */
.rv-cal-just[data-tone="bad"] { color: #1f2433; font-weight: 700; }
.rv-cal-evwhy td { padding: 0 8px 4px 0; font-size: 13px; line-height: 18px; color: #4a5165;
  border-bottom: 1px solid var(--rl-line-soft, #eef0f5); }
.rv-cal-evrow + .rv-cal-evwhy td:empty { padding: 0; }
.rv-cal-file { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--navy, #252A59);
  text-decoration: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-cal-file + .rv-cal-file { margin-left: 8px; }
.rv-cal-file:hover { text-decoration: underline; }
.rv-cal-file .rv-ico { width: 13px; height: 13px; flex: none; }
.rv-cal-more { margin-top: 4px; }
/* their remark and the steps */
.rv-cal-rowhd { display: flex; align-items: baseline; gap: 12px; }
.rv-cal-rowhd .rv-cal-link { margin-left: auto; }
.rv-cal-remarkt { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: #2b3040;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-cal-remark-empty { margin: 2px 0 0; font-size: 14px; font-style: italic; color: #4a5165; background: #f7f8fb;
  border-radius: 6px; padding: 4px 10px; }
/* their remark beside their line manager's, two lines each (2026-09-29) */
.rv-cal-remarks2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 2px; }
.rv-cal-rcol { min-width: 0; }
.rv-cal-rcol .rv-cal-rwho { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-cal-mod { color: #7a4b0e; }
/* a lower tier's note: two lines in the card, whole on hover (2026-09-29 review: it could outgrow the view) */
.rv-cal-delta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-cal-steps ul { margin: 2px 0 0; padding-left: 18px; }
.rv-cal-steps li { font-size: 14px; line-height: 20px; color: #2b3040; margin: 0; }
/* the curve */
.rv-cal-person-cell { font-size: 14px; font-weight: 600; color: #1f2330; }
/* The curve's roster (2026-09-29): the calibration page's columns -- the person, Justified?, the band's journey (Self,
   LM, HOD) and this tier's band as a compact band-code select -- in a list that scrolls within the room the chat has
   left (calFitRoster sizes it), with its header pinned. */
.rv-calib-roster { overflow: auto; border: 1px solid var(--rl-line-soft, #eef0f5); border-radius: 8px; }
.rv-calib-roster .rv-cal-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; padding: 6px 8px 5px 8px; }
.rv-calib-roster .rv-cal-table td { padding-left: 8px; }
.rv-calib-roster tr.is-default td { background: #fffaf2; }
.rv-cal-pname { font-size: 14px; font-weight: 600; color: #1f2330; line-height: 18px; }
.rv-cal-psub { font-size: 12px; color: #5f6678; line-height: 16px; }
.rv-cal-chh, .rv-cal-chain, .rv-cal-jcell { text-align: center; white-space: nowrap; width: 1%; }
.rv-cal-chh.rv-cal-own { color: var(--navy, #252A59); }
.rv-cal-cpill { font-size: 12px; font-weight: 600; padding: 1px 7px; line-height: 16px; min-width: 26px; text-align: center; }
.rv-cal-cpill.rv-cal-ring { box-shadow: 0 0 0 2px var(--navy, #252A59); }
.rv-cal-kept { font-size: 13px; color: #5f6678; }
/* A potential score with no approved competency in it yet (2026-10-01): the 360 alone, said so. */
.rv-pot-basis { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid #d9dce5; border-radius: 999px;
  font-size: 11px; line-height: 16px; color: #5f6678; white-space: nowrap; vertical-align: 1px; }
.rv-cal-bandsel.modern-select { width: 66px; min-width: 66px; padding: 3px 18px 3px 7px; font-size: 13px; font-weight: 600;
  height: 28px; background-position: right 5px center; }
.rv-cal-tag { font-size: 12px; color: #5f6678; margin-top: 2px; white-space: nowrap; }
.rv-cal-tag.is-default { color: #9a5a12; }
.rv-cal-tag.is-moved { color: #9a5a12; }
.rv-cal-opencell { width: 1%; white-space: nowrap; }
.rv-cal-tools { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
.rv-calib-roster { margin-top: 8px; }
.rv-cal-fitbtn { display: inline-flex; align-items: center; gap: 4px; background: #eef1fb; color: var(--navy, #252A59);
  border: 1px solid #cdd3e2; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.rv-cal-fitbtn:hover { background: #e2e7f7; }
.rv-cal-fitbtn:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
.rv-cal-status { font-size: 13px; color: #0f6e56; }
.rv-cal-status.is-bad { color: #b42318; }
.rv-cal-lockbox { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-cal-lockform { display: flex; align-items: center; gap: 10px; margin: 0; }
.rv-fit-modal { max-width: 620px; }
/* THE DEPARTMENT REVIEW (Chris, 2026-09-30): an HOD's table, a closed banner, their page */
.rv-cal-closed { margin: 4px 0 8px; padding: 8px 12px; border-radius: 8px; background: #fdf3e2; color: #8a5a12;
  font-size: 13px; }
.rv-rv-hint { margin: -4px 0 8px; font-size: 12px; color: #5f6678; }
.rv-rv-hint.is-req { color: #9a5a12; font-weight: 600; }
.rv-rv-readonly { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.rv-rv-note { margin: 0 0 6px; font-size: 14px; color: #252a40; white-space: pre-wrap; }
/* the department review's Summary | Individual (Chris, 2026-09-30): the line manager's toggle, a person's "Your review" */
.rv-dr-toggle { margin: 0 0 10px; }
.rv-dr-decide { border-top: 1px solid #e4e7ef; margin-top: 14px; padding-top: 12px; }
.rv-dr-decide > .rv-cal-h4 { margin: 0 0 8px; }
.rv-dr-bandrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; }
.rv-dr-bandrow .rv-dr-band { width: 260px; max-width: 100%; }
.rv-dr-bandrow .rv-rv-hint { margin: 0; }
.rv-dr-decide .rv-mgr-remarks { margin-top: 0; }
/* Saved: the HOD's band and remark read-only and greyed until Change (Chris, 2026-10-06) */
.rv-dr-decide.rv-dr-saved .rv-dr-band { background-color: #f3f4f7; color: #5f6678; cursor: default; }
.rv-dr-decide.rv-dr-saved .rv-myrm { background: #f3f4f7; }
.rv-dr-decide.rv-dr-saved .rv-card-rm-input { background: transparent; color: #4a5165; cursor: default; resize: none; }
.rv-dr-decide.rv-dr-saved .rv-myrm-need { visibility: hidden; }
.rv-dr-decide.rv-dr-saved .rv-help-trigger:disabled { opacity: .45; cursor: default; text-decoration: none; }
/* the Department summary: the band tally (neutral boxes, a band dot -- Chris's pick), the tick column, one Save */
.rv-dr-tally { display: grid; gap: 8px; margin: 2px 0 10px; }
.rv-dr-tbox { border: 1px solid #e4e7ef; border-radius: 8px; background: #fff; padding: 6px 10px; min-width: 0; }
.rv-dr-tcode { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #252a40; }
.rv-dr-tdot { width: 8px; height: 8px; border-radius: 50%; background: #9aa0b4; flex: none; }
.rv-dr-tdot[data-band="NF"] { background: #fff; border: 1.5px solid #9aa0b4; box-sizing: border-box; }
/* a moderated KPI: what they entered is muted, the latest figure and band stand out (2026-09-30) */
.rv-cal-was { color: #8a90a2; font-weight: 400; white-space: nowrap; }
.rv-cal-now { color: #252a40; font-weight: 600; white-space: nowrap; }
/* the tally boxes filter the table (2026-09-30): one at a time, lit in the band's colour while on */
.rv-dr-tbox[data-code] { cursor: pointer; user-select: none; transition: border-color .12s, background .12s; }
.rv-dr-tbox[data-code]:hover { border-color: #c3c9db; }
.rv-dr-tbox[data-code]:focus-visible { outline: 2px solid #252a40; outline-offset: 2px; }
.rv-dr-tbox.is-on { border-width: 2px; padding: 5px 9px; }
.rv-dr-tbox.is-on[data-code="NF"] { border-color: #5f6678; background: #f1f2f6; }
.rv-dr-tbox.is-on[data-code="UA"] { border-color: #a02323; background: #fbeeee; }
.rv-dr-tbox.is-on[data-code="BE"], .rv-dr-tbox.is-on[data-code="Low"] { border-color: #c98a1b; background: #fdf5e8; }
.rv-dr-tbox.is-on[data-code="ME"], .rv-dr-tbox.is-on[data-code="Mid"] { border-color: #1b46b3; background: #eef3fd; }
.rv-dr-tbox.is-on[data-code="AE"] { border-color: #1a7a54; background: #eaf6f0; }
.rv-dr-tbox.is-on[data-code="OU"], .rv-dr-tbox.is-on[data-code="High"] { border-color: #1d6b34; background: #e8f3ec; }
.rv-calib-roster tr.rv-dr-empty td { padding: 14px 12px; color: #5f6678; font-size: 13px; text-align: center; }
.rv-dr-tdot[data-band="UA"] { background: #a02323; }
.rv-dr-tdot[data-band="BE"], .rv-dr-tdot[data-band="Low"] { background: #c98a1b; }
.rv-dr-tdot[data-band="ME"], .rv-dr-tdot[data-band="Mid"] { background: #1b46b3; }
.rv-dr-tdot[data-band="AE"] { background: #1a7a54; }
.rv-dr-tdot[data-band="OU"], .rv-dr-tdot[data-band="High"] { background: #1d6b34; }
.rv-dr-tnum { font-size: 15px; font-weight: 600; color: #252a40; margin-top: 2px; white-space: nowrap; }
/* The final confirmation's band summary: the tally's look, read-only (Chris, 2026-10-01) */
.rv-dr-sum { margin: 2px 0 14px; }
.rv-dr-sum-h { font-size: 13px; font-weight: 600; color: #4a5165; margin-bottom: 6px; }
.rv-dr-sum-grid { display: grid; gap: 6px; }
.rv-dr-sum-cell { border: 1px solid #e4e7ef; border-radius: 8px; background: #fff; padding: 6px 8px; min-width: 0; }
.rv-dr-sum-cell .rv-dr-tnum { font-size: 14px; }
.rv-dr-cb, .rv-dr-all { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; margin: 0; }
.rv-dr-cb:disabled { cursor: default; }
/* the tick column: header box and row boxes on one centre line (Chris, 2026-09-30: "algin them") */
.rv-calib-roster .rv-cal-table th.rv-dr-tickh, .rv-calib-roster .rv-cal-table td.rv-dr-tick {
  width: 48px; text-align: center; padding-left: 8px; padding-right: 8px; }
.rv-dr-tick .rv-cal-tag { margin-top: 2px; }
/* the tally sits right on the list (Chris, 2026-09-30: "remove the gap between the box and the list, so we can have
   more display rows"): only the card's own 10px gap; the status line takes room only when it has something to say */
.rv-calib-pin.rv-cal-review > .rv-dr-tally { margin-bottom: 0; }
.rv-calib-pin.rv-cal-review > .rv-cal-status:empty { display: none; }
.rv-calib-pin.rv-cal-review > .rv-calib-roster { margin-top: 0; }
/* Save's block: who needs a band first */
.rv-dr-assign { max-width: 520px; }
.rv-dr-assign-lead { margin: 0 0 10px; }
.rv-dr-assign-list { list-style: none; margin: 0 0 14px; padding: 0; max-height: 40vh; overflow-y: auto;
  border: 1px solid #e4e7ef; border-radius: 8px; }
.rv-dr-assign-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 12px; border-top: 1px solid #eef0f5; }
.rv-dr-assign-list li:first-child { border-top: 0; }
.rv-dr-assign-name { font-size: 14px; color: #252a40; min-width: 0; }
/* A run of names in a pop-up or a note, one per line (Chris, 2026-09-30: "put them into list"); the Set-these-bands
   list's look, scrolling when long */
.modal-card p.rv-confirm-listlabel, .rv-confirm-listlabel { margin: 0 0 6px; }
.rv-confirm-list, .confirm-dialog__list { list-style: none; margin: 0 0 14px; padding: 0; max-height: 32vh;
  overflow-y: auto; background: #fff; border: 1px solid #e4e7ef; border-radius: 8px; }
.rv-confirm-list li, .confirm-dialog__list li { padding: 6px 12px; border-top: 1px solid #eef0f5; font-size: 14px;
  line-height: 1.4; color: #252a40; }
.rv-confirm-list li:first-child, .confirm-dialog__list li:first-child { border-top: 0; }
/* A Go to at the right of each pending item (Chris, 2026-09-30: "a button to the right to go to that item") */
.rv-confirm-list li.rv-todo-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-todo-text { min-width: 0; flex: 1 1 auto; }
.rv-go-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 11px;
  border: 1px solid #cfd4e2; border-radius: 999px; background: #fff; color: var(--navy, #252A59); font: inherit;
  font-size: 12.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; cursor: pointer;
  transition: background .12s, border-color .12s; }
.rv-go-btn .rv-ico { width: 13px; height: 13px; flex: none; transition: transform .12s; }
.rv-go-btn:hover { background: #eef1f8; border-color: var(--navy, #252A59); }
.rv-go-btn:hover .rv-ico { transform: translateX(2px); }
.rv-go-btn:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
.rv-msg .rv-confirm-list { margin: 8px 0 0; }   /* the list inside a chat reply */
/* where a Go to lands: the row lights up for a moment */
.rv-go-flash { animation: rvGoFlash 1.8s ease-out; }
@keyframes rvGoFlash { 0% { box-shadow: 0 0 0 3px rgba(37, 87, 214, .45); background-color: #eef3fd; }
  100% { box-shadow: 0 0 0 0 rgba(37, 87, 214, 0); } }
.rv-cal-openbox .rv-confirm-list { margin: 6px 0 0; max-height: 132px; }
.rv-cal-openbox .rv-confirm-list li { padding: 4px 10px; font-size: 13px; }
/* ...under the BU CEO's curve: ONE row from the table's left edge to the Lock, as tall as the Lock (it stretches to the
   row), so the roster keeps its room (Chris, 2026-10-06: "extend it to fit the table width and make it same size as the
   lock this calibration button height, don't sacrifice the view size of the table list"). The names that don't fit
   go behind "+N more". */
.rv-cal-lockbox.has-openstrip { flex: 1 1 auto; margin-left: 0; align-items: stretch; }
.rv-cal-lockbox.has-openstrip > .rv-cal-lockform { align-items: center; }
.rv-cal-openstrip { flex: 1 1 auto; min-width: 0; min-height: 36px; box-sizing: border-box; display: flex;
  align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #eccf9f; border-radius: 8px; background: #fdf3e6;
  color: #8a5a12; font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; }
.rv-cal-openstrip-ico { flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.rv-cal-openstrip-lead { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rv-cal-openstrip-lead b { font-weight: 600; }
.rv-cal-openstrip-names { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #4a3a1f; }
.rv-cal-openstrip-more { flex: none; padding: 2px 8px; border: 1px solid #e2c48f; border-radius: 999px;
  background: #fff; color: #8a5a12; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 18px; cursor: pointer; }
.rv-cal-openstrip-more:hover { background: #fff8ec; border-color: #c99a52; }
.rv-cal-openstrip-more:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
.rv-cal-openstrip-more[hidden], .rv-cal-openstrip-name[hidden] { display: none; }
.rv-cal-openpop .rv-cal-notepop-h { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.rv-cal-openpop .rv-confirm-list { margin: 0; max-height: 40vh; }
/* The calibrator's KPI table, the line manager's look read-only, with the final score (Chris, 2026-10-06) */
.rv-cal-ktwrap { margin: 4px 0 14px; }
.rv-cal-kt .rv-rung-head { width: 40px; }
.rv-mgr-table.rv-cal-kt th, .rv-mgr-table.rv-cal-kt td { padding-left: 6px; padding-right: 6px; }
.rv-cal-kt th { white-space: nowrap; }
.rv-cal-kt.rv-kpi-flat .rv-kpi-result { padding-left: 12px; white-space: nowrap; }
/* a moderated result stacks: what they entered (muted) over the moderated figure, so the table keeps to the card */
.rv-cal-kt.rv-kpi-flat .rv-kpi-result.is-moved { white-space: normal; }
.rv-cal-kt .rv-kpi-result.is-moved .rv-cal-was { display: block; white-space: nowrap; }
.rv-cal-kt .rv-kpi-result.is-moved .rv-cal-now { white-space: nowrap; }
.rv-cal-kt .rv-mgr-file { white-space: normal; overflow-wrap: anywhere; }
.rv-cal-kt-hr { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #f0f2f6; color: #5f6678;
  font-size: 11px; font-weight: 600; white-space: nowrap; }
.rv-cal-kt .rv-kpi-total-cov { font-weight: 500; }
.confirm-dialog__listwrap { margin: 0; }   /* under the message, which sits at the card's edge (.modal-card p wins) */
.modal-card p.confirm-dialog__listlabel { margin: 0 0 6px; }
.confirm-dialog__list { margin-bottom: 0; }
.rv-cal-foot.rv-dr-foot { justify-content: space-between; align-items: center; gap: 12px; }
/* The hint wraps; Save never shrinks, so it ends on the table's right border and the card never scrolls sideways
   (Chris, 2026-10-01: "the save button got cut off ... align the save button to the table borderline"). */
.rv-cal-foot.rv-dr-foot > .rv-dr-hint { flex: 1 1 auto; min-width: 0; }
.rv-cal-foot.rv-dr-foot > .rv-cal-lockbox { flex: none; }
.rv-dr-hint { font-size: 13px; color: #5f6678; min-width: 0; }
.rv-dr-hint.is-req { color: #9a5a12; }
/* everyone has a band, only the submit is left (2026-10-01) */
.rv-dr-hint.is-ready { color: #1f2433; font-weight: 600; }
.rv-dr-pfoot { margin-top: 12px; }
.rv-fit-lead { font-size: 14px; color: #4a5165; margin: 4px 0 10px; }
.rv-fit-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 50vh; overflow: auto; }
.rv-fit-list li { padding: 8px 0; border-bottom: 1px solid var(--rl-line-soft, #eef0f5); }
.rv-fit-row { display: flex; align-items: center; gap: 6px; }
.rv-fit-name { font-size: 14px; font-weight: 600; color: #1f2330; margin-right: 6px; }
.rv-fit-arrow { color: #5f6678; }
.rv-fit-dir { margin-left: auto; font-size: 13px; font-weight: 600; }
.rv-fit-dir.is-up { color: #0f6e56; } .rv-fit-dir.is-down { color: #9a5a12; }
.rv-fit-why { font-size: 13px; color: #4a5165; margin-top: 3px; line-height: 18px; }
.rv-fit-note { font-size: 13px; color: #9a5a12; margin: 6px 0; }
/* Every navigator card is the name, then ONE line of subtext (Chris, 2026-09-30). The name has its own line and may take
   two before it ends in an ellipsis (the UX review's F18, 2026-10-08: a one-line name beside its tag cut most KPI and
   colleague names short); the whole name is the card's tooltip. The weight tag sits on the subtext line. */
.rv-nav-item:not([data-kind="feedback"]) .rv-ni-meta { display: flex; align-items: center; gap: 6px; min-width: 0;
  overflow: hidden; white-space: nowrap; }
.rv-ni-metatext { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rv-calib-roster .rv-calib-band-select { min-width: 190px; }
.rv-calib-roster .rv-cal-table td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--rl-line-soft, #eef0f5); }
.rv-cal-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.rv-cal-footnote { font-size: 13px; color: #9a5a12; }
.rv-cal-lock { margin-left: auto; }
.rv-calib-pin .rv-calib-dist { margin-top: 6px; }
/* the curve in the chat card is compact, so the curve AND the roster fit one view (Chris, 2026-09-29) */
.rv-calib-pin .rv-calib-dist .calib-dist-row { margin: 3px 0; }
.rv-calib-pin .rv-calib-dist .calib-dist-band, .rv-calib-pin .rv-calib-dist .calib-dist-pct,
.rv-calib-pin .rv-calib-dist .calib-dist-gap { font-size: 13px; }
.rv-cal-vline { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.rv-cal-vline .rv-calib-verdict { margin-top: 0; font-size: 13px; }
.rv-cal-vline .rv-cal-tools { margin: 0 0 0 auto; flex: none; }
.rv-cal-vline .rv-cal-fitbtn { white-space: nowrap; }
.rv-calib-pin > .rv-cal-status { min-height: 18px; margin: 3px 0 0; line-height: 18px; }
.rv-calib-pin > .rv-cal-status + .rv-calib-roster { margin-top: 4px; }
.rv-calib-pin .calib-dist-pct { color: #5f6678; }
.modal-actions button.primary.is-danger { background: #b3261e; border-color: #b3261e; }
.modal-actions button.primary.is-danger:hover { background: #8f1e18; }
@media (max-width: 520px) {
  .confirm-dialog__msg { margin-left: 0; }
}

/* Floating "Back" FAB — visible while scrolling on subpages. */
.fab-back {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 900;                /* under the confirmation modal (1000) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  background: #1f2330;
  color: #fff !important;       /* override the generic `a` colour */
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s;
}
.fab-back:hover {
  background: #2a3148;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
.fab-back:focus-visible {
  outline: 3px solid #87b4ff;
  outline-offset: 2px;
}
.fab-back .fab-back-arrow {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
}
/* On narrow screens collapse the label to keep the FAB out of the way. */
@media (max-width: 520px) {
  .fab-back {
    padding: 12px;
    border-radius: 50%;
  }
  .fab-back .fab-back-label { display: none; }
}
@media print { .fab-back { display: none; } }
/* the journey's Dashboard button sits over the bottom of the left list: let the list scroll its last item clear of it,
   and on a narrow screen keep it above the reply box */
body:has(.fab-back.is-dash) .rv-nav, body:has(.fab-back.is-dash) .rv-rail { padding-bottom: 64px; }
@media (max-width: 760px) { .fab-back.is-dash { bottom: 92px; } }

/* Friendly error pages (403/404/500) */
.error-card { max-width: 560px; margin: 40px auto; text-align: center; }
.error-card .error-code {
  font-size: 4rem; font-weight: 800; color: #2557d6; line-height: 1;
  letter-spacing: -2px; margin-bottom: 6px;
}
.error-card h1 { margin: 0 0 10px; }
.error-card .actions { justify-content: center; margin-top: 22px; }

/* Team filter input */
.team-filter { display: flex; gap: 8px; margin: 14px 0; }
.team-filter input {
  flex: 1; padding: 9px 12px; border: 1px solid #cdd1dd; border-radius: 6px;
  font-size: 0.95rem;
}
.team-filter button {
  padding: 9px 16px; background: #2557d6; color: #fff; border: 0;
  border-radius: 6px; cursor: pointer; font-size: 0.95rem;
}
.team-filter button:hover { background: #1b46b3; }

/* Admin portal */
.nav-admin { background: #f0a500; color: #fff !important; padding: 4px 10px; border-radius: 4px; font-weight: 600; }
.nav-admin:hover { background: #d18d00; text-decoration: none; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0 24px; }
.kpi { background: #fff; padding: 18px 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.kpi-label { font-size: 0.78rem; text-transform: uppercase; color: #6b7186; letter-spacing: 0.5px; font-weight: 600; }
.kpi-num { font-size: 2rem; font-weight: 700; color: #1f2330; margin-top: 4px; }

.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; margin-bottom: 16px; }
.admin-card { background: #fff; padding: 18px 22px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.admin-card h2 { margin: 0 0 12px; color: #2557d6; font-size: 1.05rem; }

.admin-table { width: 100%; border-collapse: collapse; }
/* Cells wrap long content to fit the table's width rather than forcing a wider
   table (and a horizontal scroll); .table-scroll stays only as a last resort. */
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid #ecedf2; text-align: left; vertical-align: top; font-size: 0.9rem; overflow-wrap: break-word; }
.admin-table thead th { font-size: 0.78rem; text-transform: uppercase; color: #6b7186; letter-spacing: 0.5px; }

.admin-form { display: grid; gap: 10px; }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: #4a5066; }
.admin-form label.row { flex-direction: row; align-items: center; gap: 10px; }
.admin-form label.row input { flex: 1; }
.admin-form label.checkbox { flex-direction: row; align-items: center; gap: 6px; }
/* the calibration curve rule: a radio, its words and its number on one line */
.admin-form label.calib-rule-opt { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0;
  font-size: 0.9rem; color: #2b3048; }
.admin-form label.calib-rule-opt input[type="radio"] { flex: none; margin: 0; padding: 0; }
.admin-form label.calib-rule-opt input[type="number"] { flex: none; width: 76px; }
.admin-form input, .admin-form select, .admin-form textarea {
  padding: 7px 10px; border: 1px solid #cdd1dd; border-radius: 5px; font-size: 0.92rem;
}
.admin-form-inline { display: grid; gap: 6px; padding: 10px; background: #fafbfd; border-radius: 6px; margin-top: 4px; }
.admin-form-inline input, .admin-form-inline textarea { width: 100%; }

/* Modern minimalist <select>: the global `select{}` rule (below, in the
   Tables section) already strips native appearance and draws a navy chevron
   via background-image -- this layers the border/radius/padding/focus
   treatment on top rather than duplicating the chevron. Uses background-color
   (not the `background` shorthand) so the inherited chevron image survives.
   Keeps the native element, so keyboard/screen-reader behaviour is unchanged;
   the open options list still renders with native OS/browser styling, which
   can't be reskinned with CSS alone. */
.modern-select {
  width: 100%; font: inherit; font-size: 0.92rem; color: #1f2330;
  background-color: #fff; border: 1px solid #cdd1dd; border-radius: 8px;
  padding: 9px 32px 9px 11px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.modern-select:hover { border-color: #a9b0c2; }
.modern-select:focus { outline: none; border-color: #252A59; box-shadow: 0 0 0 3px rgba(37,42,89,.14); }
.modern-select:disabled { background-color: #f1f3f8; color: #6b7186; cursor: not-allowed; }

.admin-form button.primary, .admin-actions button.primary { background: #2557d6; color: #fff; border: 1px solid #2557d6; padding: 8px 14px; border-radius: 5px; cursor: pointer; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-actions button { padding: 8px 14px; border-radius: 5px; border: 1px solid #cdd1dd; background: #fff; cursor: pointer; font-size: 0.9rem; }
.admin-actions button.danger, .admin-form-inline + form button.danger, button.danger {
  background: #fde2e2; color: #8a1a1a; border-color: #f5b5b5;
}
.admin-actions button.danger:hover, button.danger:hover { background: #f9c8c8; }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tile-sm { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 8px;
           background: #eef2fb; color: #1f2330; }
.tile-sm:hover { background: #d6e4ff; text-decoration: none; }
.tile-sm strong { color: #2557d6; }
.tile-sm span { color: #6b7186; font-size: 0.85rem; }

.admin-list { padding-left: 18px; columns: 2; }
.admin-list li { break-inside: avoid; }
.small { font-size: 0.8rem; }
.cell-desc { max-width: 320px; }
.cell-pre { background: #f5f6fa; padding: 8px; border-radius: 4px; font-size: 0.78rem; white-space: pre-wrap; max-width: 360px; }

.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 12px 0; padding: 14px 16px; background: #fafbfd; border-radius: 8px; }
.score-num  { font-size: 1.8rem; font-weight: 700; color: #1f2330; margin: 2px 0 6px; }
.threshold-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* Admin user-list pagination */
.pagination { display: flex; gap: 14px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pagination .btn-link { padding: 6px 10px; border: 1px solid #cdd1dd; border-radius: 5px; background: #fff; }
.pagination .btn-link:hover { background: #eef2fb; text-decoration: none; }
.pagination .per-page { margin-left: auto; }   /* push page-size to the right */
.per-page label { font-size: .9rem; color: #4a5060; font-weight: 600; }
.per-page select {
  font: inherit; padding: 4px 8px; border: 1px solid #cdd1dd; border-radius: 6px;
  margin: 0 2px; background: #fff;
}
.per-page-form { display: inline-flex; gap: 6px; align-items: center; }
.per-page-form select { padding: 4px 8px; border: 1px solid #cdd1dd; border-radius: 4px; }

/* Team table */
.team-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin-top: 14px; }
.team-table th, .team-table td { padding: 12px; border-bottom: 1px solid #ecedf2; text-align: left; }
.team-table thead th { background: #fafbfd; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7186; }
/* Job-title column is the worst offender for awkward line wraps. Let the
   browser balance the wrap so it doesn't end up with a single dangling word. */
.team-table td:nth-child(4) { text-wrap: balance; max-width: 260px; }

/* =========================================================================
   Leadership 360 additions
   ========================================================================= */

/* Relationship chips (line manager / peer / direct report) */
.rel-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2px;
  background: #eef0f6; color: #4a5066; border: 1px solid #d8dbe6;
}
.rel-line_manager  { background: #e0e9fb; color: #1b46b3; border-color: #bcd0f3; }
.rel-matrix_manager { background: #e0e9fb; color: #1b46b3; border-style: dashed; border-width: 1.5px; border-color: #7f9be0; }
.rel-peer          { background: #eaf3ec; color: #1d6b34; border-color: #bfe0c7; }
.rel-direct_report { background: #fdeede; color: #8a4500; border-color: #f3cf9e; }

/* HOD view "Direct"/"Indirect" reporting-line tag — a distinct concept from
   the assessor-relationship chips above (this is about org-chart proximity
   to the HOD, not a panel role), so it gets its own colour rather than
   reusing rel-line_manager/rel-direct_report. Indirect keeps the dashed
   border used elsewhere in the app for "secondary" relationships. */
.rel-chip.hod-direct { background: #e0e9fb; color: #1b46b3; border-color: #bcd0f3; }
.rel-chip.hod-indirect { border-style: dashed; }

/* Panel completion mini-meter, e.g. "3 / 5 submitted" */
.panel-meter { display: inline-flex; align-items: center; gap: 8px; }
.panel-bar { width: 90px; height: 8px; border-radius: 999px; background: #e4e7f0; overflow: hidden; }
.panel-bar > span { display: block; height: 100%; background: #2557d6; }
.panel-bar.full > span { background: #1d6b34; }
.panel-count { font-size: 0.82rem; color: #4a5066; font-weight: 600; }
.panel-short { color: #8a4500; }

/* Assessor / suggestion cards on the panel editor */
.panel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 12px 0; }
.assessor-card {
  background: #fff; border: 1px solid #e1e4ee; border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.assessor-card .a-name { font-weight: 600; }
.assessor-card .a-meta { font-size: 0.82rem; color: #6b7186; }
.assessor-card .a-org { font-size: 0.76rem; margin: 2px 0 6px; }
.assessor-card .a-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.assessor-card form { margin: 0; }

/* Assessor name-search (panel editor) */
.as-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.as-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: #4a5066; }
.as-controls .as-search { flex: 1; min-width: 220px; }
.as-controls select,
.as-controls input[type="search"] {
  padding: 8px 10px; border: 1px solid #cdd1dd; border-radius: 6px; font-size: 0.92rem;
}
.as-controls .as-allbg-label { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.as-results { margin-top: 12px; }
.as-results .sugg-list li form { margin: 0; }

.sugg-block { margin-top: 18px; }
.sugg-block h3 { font-size: 0.95rem; color: #2557d6; margin: 0 0 8px; }
.sugg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
/* Long suggestion lists (peers / direct reports) scroll instead of truncating —
   shows ~8 rows then scrolls so every candidate is reachable. */
.sugg-list.scroll { max-height: 23rem; overflow-y: auto; padding-right: 6px; }
.sugg-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: #fafbfd; border: 1px solid #ecedf2; border-radius: 8px;
}
.sugg-list li.is-on { opacity: 0.55; }
.sugg-list .grow { flex: 1; min-width: 0; }
.sugg-list .sugg-line1 { display: block; }
.sugg-list .sugg-line2 { display: block; font-size: 0.78rem; margin-top: 2px; }
.sugg-list .on-tag { font-size: 0.74rem; color: #1d6b34; font-weight: 600; }

/* Per-statement agreement heatmap on the subject detail page */
.agree-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.agree-table td { padding: 9px 6px; border-bottom: 1px solid #f0f1f6; vertical-align: middle; font-size: 0.9rem; }
.agree-bar-wrap { display: inline-flex; align-items: center; gap: 10px; min-width: 220px; }
.agree-bar { width: 140px; height: 10px; border-radius: 999px; background: #f0d6c2; overflow: hidden; }
.agree-bar > span { display: block; height: 100%; background: #1d6b34; }
.agree-num { font-size: 0.82rem; color: #4a5066; font-weight: 600; white-space: nowrap; }

/* Big band readout on subject detail */
.result-hero {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e1e4ee; border-radius: 12px;
  padding: 20px 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin: 16px 0 24px;
}
.result-hero .big-band { font-size: 1.6rem; font-weight: 800; }
.result-hero .big-score { font-size: 2.2rem; font-weight: 800; color: #1f2330; line-height: 1; }
.result-hero .hero-sub { font-size: 0.82rem; color: #6b7186; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

/* Single-stat version of .result-hero (My Feedback / Team / HOD drill-through
   report — only the band is shown, never the score) — hugs its content
   instead of stretching into an oversized, mostly-empty card. */
.band-hero {
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e1e4ee; border-radius: 12px;
  padding: 14px 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin: 16px 0 24px;
}
.band-hero .hero-sub { font-size: 0.82rem; color: #6b7186; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.band-hero .potential-pill { font-size: 0.95rem; padding: 7px 16px; }

/* Prominent "download the template" callout — its own row on import pages */
.template-dl {
  display: flex; align-items: center; gap: 16px;
  margin: 18px 0; padding: 16px 20px;
  border: 2px solid var(--navy); border-radius: 12px;
  background: #f4f6fc; color: var(--ink); text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.template-dl:hover { background: #eaf0fb; box-shadow: 0 3px 12px rgba(37,42,89,.14); text-decoration: none; }
.template-dl:active { transform: scale(.995); }
.template-dl .tdl-ic { color: var(--navy); flex: none; }
.template-dl .tdl-main { flex: 1; min-width: 0; }
.template-dl .tdl-title { font-weight: 600; font-size: 15px; color: var(--navy); }
.template-dl .tdl-sub { font-size: 12.5px; color: #6b7186; margin-top: 2px; }
.template-dl .tdl-cta {
  flex: none; background: var(--navy); color: #fff; font-weight: 500;
  padding: 9px 18px; border-radius: 8px; white-space: nowrap;
}
.template-dl:hover .tdl-cta { background: var(--navy-700); }

/* Dropzone-ish import box */
.upload-box { background: #fff; border: 2px dashed #c5cbe0; border-radius: 12px; padding: 26px; text-align: center; }
.upload-box input[type=file] { margin: 10px 0; }
.seg { display: inline-flex; border: 1px solid #cdd1dd; border-radius: 8px; overflow: hidden; }
.seg a { padding: 6px 14px; color: #4a5066; background: #fff; }
.seg a.active { background: #2557d6; color: #fff; }

/* Business Group quick-filter — separate rounded pills (not a joined segmented
   strip like .seg), each with its own border and a gap between them. */
.bg-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bg-pills a { padding: 5px 14px; border-radius: 999px; border: 1px solid #cdd1dd; color: #4a5066; background: #fff; font-size: 12px; }
.bg-pills a.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Excel-style sort & filter on the subjects table */
.col-menu-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; box-sizing: border-box; background: transparent; border: 0;
  font: inherit; font-weight: 700; color: inherit; text-align: left;
  cursor: pointer; padding: 3px 5px; border-radius: 6px;
}
.col-menu-btn:hover { background: rgba(37,87,214,0.10); }
.col-menu-btn .cm-caret { flex: none; font-size: 0; line-height: 1; }
.col-menu-btn .cm-caret::before { content: "\25BE"; font-size: 0.72rem; opacity: 0.5; }
.col-menu-btn.sort-asc  .cm-caret::before { content: "\25B2"; opacity: 1; color: #2557d6; }
.col-menu-btn.sort-desc .cm-caret::before { content: "\25BC"; opacity: 1; color: #2557d6; }
.col-menu-btn.has-filter { color: #2557d6; }
.col-menu-btn.has-filter .cm-label::after { content: " \2261"; font-size: 0.85em; opacity: 0.8; }

/* ---- Personal dashboard --------------------------------------------------
   The landing page. Governing rule, same as everywhere else in this app: one
   navy accent, and colour means STATUS -- never decoration. So the module
   icon tiles are all neutral navy and urgency lives in exactly two places,
   the stripe and the due date. Two channels competing for "this is urgent"
   is how a dashboard stops being scannable. */
.dash-head { display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.dash-eyebrow { font-size:.66rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#8a90a6; margin:0; }

.dash-cyc { display:flex; align-items:center; gap:13px; }
.dash-cyc-txt { text-align:right; }
.dash-cyc-txt .val { font-size:1rem; font-weight:600; }
.dash-cyc-txt .sub { font-size:.79rem; color:#5f6678; }
/* Days left drawn as an arc: a number you read, plus a proportion you feel. */
.dash-ring { position:relative; width:58px; height:58px; flex:none; }
.dash-ring svg { transform:rotate(-90deg); display:block; }
.dash-ring .track { stroke:#e4e7ef; }
.dash-ring .fill { stroke:var(--navy); stroke-linecap:round; }
.dash-ring.is-urgent .fill { stroke:#b4483f; }
.dash-ring .lab { position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; line-height:1; }
.dash-ring .n { font-size:1.02rem; font-weight:700; font-variant-numeric:tabular-nums; }
.dash-ring .u { font-size:.56rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#8a90a6; margin-top:2px; }

.dash-card-head { display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; }
.dash-card-head .t { display:flex; align-items:center; gap:9px; }
.dash-card-head .t .dash-ico { color:#8a90a6; }
.dash-card-body { margin-top:13px; }

.dash-ico { width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none;
  display:block; }
.dash-ico.sm { width:14px; height:14px; }

.dash-count { display:inline-flex; align-items:center; justify-content:center;
  min-width:21px; height:21px; padding:0 6px; border-radius:999px;
  background:var(--navy); color:#fff; font-size:.72rem; font-weight:700;
  margin-left:7px; font-variant-numeric:tabular-nums; }

.dash-tasks { list-style:none; margin:0; padding:0; }
.dash-tasks li { display:grid; grid-template-columns:3px 38px 1fr auto;
  gap:0 13px; align-items:center; padding:11px 8px 11px 0;
  border-top:1px solid #eef0f5; border-radius:8px; }
.dash-tasks li:first-child { border-top:0; }
.dash-tasks li:hover { background:#fbfcfe; }

.dash-stripe { width:3px; align-self:stretch; min-height:38px; border-radius:2px;
  background:#e4e7ef; }
.dash-tasks li.is-soon  .dash-stripe { background:#b4483f; }
.dash-tasks li.is-later .dash-stripe { background:#d19a5c; }

.dash-tile { width:38px; height:38px; border-radius:9px;
  background:rgba(37,42,89,.07); color:var(--navy);
  display:grid; place-items:center; }
.dash-tile svg { width:19px; height:19px; display:block; }

.dash-task-t { font-weight:600; font-size:.94rem; margin:0; }
.dash-task-s { font-size:.82rem; color:#5f6678; margin:1px 0 0; }
/* Progress as a shape as well as a sentence. Capped at 8 segments so a
   40-KPI scorecard doesn't draw a barcode. */
.dash-segs { display:flex; gap:3px; margin-top:6px; }
.dash-segs i { width:16px; height:4px; border-radius:2px; background:#e4e7ef;
  display:block; }
.dash-segs i.on { background:var(--navy); }

.dash-task-r { display:flex; align-items:center; gap:12px; }
.dash-when { font-size:.8rem; color:#5f6678; white-space:nowrap;
  font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:5px; }
.dash-when.is-urgent { color:#b4483f; font-weight:600; }

.dash-go { border:1px solid #e4e7ef; background:#fff; color:#1f2330;
  border-radius:8px; padding:6px 12px; font-size:.84rem; font-weight:600;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; }
.dash-go:hover { border-color:var(--navy); color:var(--navy); text-decoration:none; }
.dash-go.is-primary { background:var(--navy); border-color:var(--navy); color:#fff; }
.dash-go.is-primary:hover { background:var(--navy-700); color:#fff; }

.dash-clear { display:flex; align-items:center; gap:11px; padding:4px 0; }

.dash-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(206px, 1fr));
  gap:14px; }
.dash-stat { border:1px solid #e4e7ef; border-radius:10px; padding:13px 15px;
  background:#fbfcfe; }
.dash-stat .k { font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#8a90a6; margin:0;
  display:flex; align-items:center; gap:6px; }
.dash-stat .v { font-size:1.3rem; font-weight:700; margin:7px 0 0; color:var(--navy);
  font-variant-numeric:tabular-nums; }
.dash-stat .n { font-size:.79rem; color:#5f6678; margin:4px 0 0; }

/* A pending value is a STATE, not a number -- it drops to body weight and
   takes a glyph so it can never be misread as a result. */
.dash-stat .v.is-pending { font-size:.92rem; font-weight:600; color:#5f6678;
  display:flex; align-items:center; gap:7px; }
.dash-stat .v.is-pending .dash-ico { color:#8a90a6; }

/* The talent box itself, miniaturised: performance across, potential up. The
   filled cell borrows its colour from .tbox-cat-* so the dashboard and the
   box can never disagree about what a category looks like. */
.dash-tbox { display:flex; align-items:center; gap:11px; margin-top:8px; }
.dash-tgrid { display:grid; grid-template-columns:repeat(5, 9px);
  grid-template-rows:repeat(3, 9px); gap:2px; flex:none; }
.dash-tgrid i { display:block; border-radius:2px; background:#eef0f5;
  border:1px solid #e4e7ef; }
.dash-tbox .lab { font-size:1.05rem; font-weight:700; line-height:1.1; }

/* Trajectory drawn once at the top of the record: the argument for reading
   the table downward, made visible before a single row is read. */
.dash-spark { display:flex; align-items:center; gap:10px; }
.dash-spark svg { display:block; }
.dash-spark .cap { font-size:.75rem; color:#5f6678; text-align:right; line-height:1.3; }
.dash-spark .cap b { display:block; font-size:.95rem; color:#1f2330;
  font-variant-numeric:tabular-nums; }

.dash-record .dash-per { font-weight:600; white-space:nowrap;
  padding-left:16px !important; position:relative; }
/* A rail with a node per cycle: the record is a sequence and the shape says so. */
.dash-record .dash-per::before { content:""; position:absolute; left:3px;
  top:0; bottom:0; width:1px; background:#e4e7ef; }
.dash-record tbody tr:first-child .dash-per::before { top:16px; }
.dash-record tbody tr:last-child .dash-per::before { bottom:calc(100% - 16px); }
.dash-record .dash-per::after { content:""; position:absolute; left:0; top:14px;
  width:7px; height:7px; border-radius:50%; background:#e4e7ef;
  border:2px solid #fff; box-sizing:content-box; }
.dash-record tr.is-now .dash-per::after { background:#d19a5c; }
.dash-record tr.is-done .dash-per::after { background:var(--navy); }
.dash-record .dash-per .st { display:block; font-size:.76rem; font-weight:500;
  color:#5f6678; margin-top:1px; }
.dash-record tr.is-now td { background:#fbfcfe; }
.dash-dash { color:#8a90a6; }
.dash-nosrc { color:#8a90a6 !important; }
.dash-nosrc span { display:block; font-size:.62rem; font-weight:600;
  letter-spacing:.04em; text-transform:none; font-style:italic; margin-top:2px; }

@media (max-width: 660px) {
  .dash-tasks li { grid-template-columns:3px 38px 1fr; }
  .dash-task-r { grid-column:3; justify-content:flex-start; margin-top:8px; }
}

/* Optional-column picker (static/optcols.js) -- sits above a table and chooses
   which extra columns are on. Kept visually quieter than a primary control:
   it changes what you see, not what the data says. */
.optcols { position: relative; display: flex; justify-content: flex-end; margin: 0 0 8px; }
.optcols-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #d7dbe6; border-radius: 8px;
  padding: 5px 10px; font: inherit; font-size: 0.82rem; color: #4a5163;
  cursor: pointer;
}
.optcols-btn:hover { border-color: #b9c0d2; background: #f8fafd; }
.optcols-btn.is-on { border-color: #2557d6; color: #2557d6; }
.optcols-btn .cm-caret { font-size: 0.7rem; opacity: 0.6; }
.optcols-menu {
  position: absolute; top: 100%; right: 0; z-index: 40; min-width: 220px;
  background: #fff; border: 1px solid #dfe3ec; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,26,52,0.14); padding: 10px 12px;
}
.optcols-menu[hidden] { display: none; }
.optcols-head { margin: 0 0 6px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #8b91a3; }
.optcols-menu label {
  display: flex; align-items: center; gap: 8px; padding: 5px 2px;
  font-size: 0.86rem; cursor: pointer;
}
.optcols-menu label:hover { color: #2557d6; }
.optcols-menu input { margin: 0; }

.col-menu {
  position: absolute; z-index: 1000; width: 244px; max-width: 92vw;
  display: flex; flex-direction: column;   /* lets the value list shrink+scroll when height-clamped */
  background: #fff; border: 1px solid #cdd1dd; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18); padding: 8px; font-weight: 400; color: #1f2330;
}
/* The display:flex above would otherwise beat the `hidden` attribute's
   display:none (the classic [hidden] trap), leaving an empty menu box on
   screen after close -- this higher-specificity rule restores hiding. */
.col-menu[hidden] { display: none; }
.col-menu .cm-sort { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.col-menu .cm-sort button {
  text-align: left; background: #fff; border: 0; padding: 7px 8px; border-radius: 6px;
  font-size: 0.85rem; color: #1f2330; cursor: pointer; width: 100%;
}
.col-menu .cm-sort button:hover { background: #eef3ff; }
.col-menu .cm-search { margin: 4px 0; }
.col-menu .cm-search input {
  width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 0.83rem;
  border: 1px solid #cdd1dd; border-radius: 6px;
}
.col-menu .cm-all { display: block; padding: 6px; font-size: 0.84rem; border-top: 1px solid #eef0f5; border-bottom: 1px solid #eef0f5; }
.col-menu .cm-list { flex: 1 1 auto; min-height: 0; max-height: 220px; overflow: auto; padding: 4px 0; }
.col-menu .cm-list label { display: block; padding: 4px 6px; font-size: 0.84rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-menu .cm-list label:hover { background: #f5f7fb; }
.col-menu .cm-list input, .col-menu .cm-all input { margin-right: 7px; vertical-align: middle; }
.col-menu .cm-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.col-menu .cm-foot button { padding: 6px 12px; border-radius: 6px; font-size: 0.83rem; cursor: pointer; border: 1px solid #cdd1dd; background: #fff; color: #1f2330; }
.col-menu .cm-foot .cm-apply { background: #2557d6; border-color: #2557d6; color: #fff; }
.conf-yes { color: #1d6b34; font-weight: 600; font-size: 0.86rem; }

/* Dashboard incomplete-panel alert */
.dash-alert {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  border-radius: 12px; padding: 14px 18px; margin: 0 0 18px; border: 1px solid;
}
.dash-alert-warn { background: #fdeede; border-color: #f0c89a; color: #7a3e00; }
.dash-alert-warn:hover { background: #fbe4cd; }
.dash-alert-ok { background: #e3f3e8; border-color: #b9e0c5; color: #1d6b34; }
.dash-alert-info { background: #e8eefb; border-color: #c2d2f0; color: #1f4ba3; }
.dash-alert-info:hover { background: #dde7f9; }
.dash-alert-num { font-size: 1.7rem; font-weight: 800; line-height: 1; flex: none; min-width: 36px; text-align: center; }
.dash-alert-text { flex: 1; font-size: 0.92rem; line-height: 1.35; }
.dash-alert-go { flex: none; font-weight: 700; white-space: nowrap; }

/* "warn" flash category */
.flash-warn { background: #fdeede; border: 1px solid #f0c89a; color: #7a3e00; }
button.warn { background: #b8740f; color: #fff; border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
button.warn:hover { background: #9c6200; }

/* Activity / usage tracking */
.kpi-rate { font-size: 0.8rem; font-weight: 600; color: #6b7186; white-space: nowrap; }
td.nowrap, .nowrap { white-space: nowrap; }
.act-pill { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.2px; white-space: nowrap; }   /* the action reads as words now (action_label), so no capitalising */
.act-login { background: #e6effd; color: #1f4fb0; }
.act-submit { background: #e3f3e8; color: #1d6b34; }

/* =========================================================================
   ADMIN UI REFRESH — Chin Hin navy + red brand system.
   A self-contained override layer that modernises the existing classes:
   primary = navy, brand accent = red, destructive = its own red. Restyles
   buttons, selects, tables, KPI cards, pills, nav — no markup overhaul.
   ========================================================================= */
:root{
  --navy:#252A59; --navy-700:#1d2249; --navy-600:#2e3566;
  --red:#D61923; --red-700:#b5141d; --ink:#1f2330;
  /* the AI look (2026-10-08): the brand red marks what the AI does -- always with the spark, never alone */
  --ai:#D61923; --ai-ink:#B5141D; --ai-tint:#FDF0F1; --ai-line:#F4C7CA;
  --rl-line:#e4e7ef; --rl-line-soft:#eef0f5;
  --muted:#5f6678;   /* used in 8 rules and never defined until the 2026-09-29 UI audit */
  --rl-danger:#c0392b; --rl-danger-line:#f3c0bb;
  --rl-radius:12px; --rl-btn-radius:8px;
}
a { color: var(--navy-600); }

/* ---- Top bar + nav ---- */
/* the bar stays at the top as the page scrolls, Ask OneHR / Ask Admin Agent and Account always in reach (Chris,
   2026-10-11: "should we freeze the top navy row"). Above the side panels (880-885) so its menus open over them, under
   the scrims, drawers and dialogs (900+), which still cover it. Page-level sticky bars start below it (--topbar-h). */
:root { --topbar-h: 56px; }
html { scroll-padding-top: calc(var(--topbar-h) + 8px); }
.topbar { background: var(--navy); padding: 0 24px; min-height: 56px; position: sticky; top: 0; z-index: 890; }
.brand { display: flex; align-items: center; perspective: 700px; }
.brand::before { content:""; width:13px; height:13px; border-radius:3px; background:var(--red); margin-right:11px; flex:none; }
/* OneHR wordmark: "OneHR" + "by Chin Hin" on the front; on hover the whole
   wordmark does a smooth 3D card-flip to reveal a "Back to Hub" affordance
   on the back. Two stacked faces, backface hidden, container rotates on X. */
.brand-wordmark {
  position: relative; display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 4px; text-decoration: none;
  transform-style: preserve-3d; transform-origin: center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.brand-wordmark:hover { text-decoration: none; transform: rotateX(180deg); }
.brand-face { display: flex; align-items: center; gap: 8px; backface-visibility: hidden; }
.brand-face-front { align-items: baseline; }
/* Back face reads as a button: rounded translucent pill filling the wordmark's
   footprint, so the "Back to Hub" affordance is obvious, not just floating text. */
.brand-face-back {
  position: absolute; inset: 0; justify-content: center;
  transform: rotateX(180deg);
  background: rgba(255,255,255,0.15); border-radius: 999px;
  color: #fff; font-weight: 700; font-size: 0.95rem; white-space: nowrap;
}
.brand-back-arrow { margin-right: 7px; font-size: 1.05rem; line-height: 1; }
.brand-name { font-weight: 700; font-size: 1.18rem; letter-spacing: -0.2px; color: #fff; }
.brand-by { font-weight: 500; font-size: 0.72rem; color: #b9bdcf; letter-spacing: 0.2px; }
/* On the home page itself the wordmark stays static -- no flip, no back face. */
.brand-wordmark.is-home:hover { transform: none; }
.brand-wordmark.is-home .brand-face-back { display: none; }
@media (prefers-reduced-motion: reduce) {
  .brand-wordmark { transition: none; }
  .brand-wordmark:hover { transform: none; }
  .brand-face-back { display: none; }
}
.nav-links { gap: 4px; }
.nav-links a { color:#c3c7d6; font-weight:500; padding:8px 12px; border-radius:7px; position:relative; transition:color .15s, background .15s; }
.nav-links a:hover { color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.nav-links a.active { color:#fff; }
.nav-links a.active::after { content:""; position:absolute; left:12px; right:12px; bottom:-17px; height:3px; border-radius:3px 3px 0 0; background:var(--red); }
.nav-links .logout { color:#ff9b9b; }
.who-tag-admin { background: var(--red); color:#fff; }

/* ---- Unified button system ---- */
/* primary = solid navy */
button.primary, .admin-form button.primary, .admin-actions button.primary,
.actions button.primary, .modal-actions button.primary, .team-filter button {
  background: var(--navy); color:#fff; border:1px solid var(--navy);
  border-radius: var(--rl-btn-radius); font-weight:600; padding:9px 16px;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
button.primary:hover, .admin-form button.primary:hover, .admin-actions button.primary:hover,
.actions button.primary:hover, .modal-actions button.primary:hover, .team-filter button:hover {
  background: var(--navy-700); border-color: var(--navy-700);
}
/* secondary = outlined; covers .btn-link and plain admin-actions/actions buttons */
.btn-link, .admin-actions button, .actions button {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:#fff; color:var(--ink); border:1px solid var(--rl-line);
  border-radius:7px; font-weight:600; font-size:0.85rem; padding:7px 12px;
  cursor:pointer; transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn-link:hover, .admin-actions button:hover, .actions button:hover {
  background:#f1f4fa; border-color:#cdd3e2; text-decoration:none;
}
/* danger = red outline -> fills on hover */
button.danger, .admin-actions button.danger {
  background:#fff; color:var(--rl-danger); border:1px solid var(--rl-danger-line);
}
button.danger:hover, .admin-actions button.danger:hover {
  background:var(--rl-danger); color:#fff; border-color:var(--rl-danger);
}
/* warn / archive = amber outline -> fills on hover */
button.warn {
  background:#fff; color:#9c6200; border:1px solid #f0c89a;
  border-radius:7px; font-weight:600; padding:7px 12px;
  transition: background .15s, color .15s, border-color .15s;
}
button.warn:hover { background:#b8740f; color:#fff; border-color:#b8740f; }
/* keyboard focus rings */
button:focus-visible, .btn-link:focus-visible {
  outline:none; box-shadow:0 0 0 3px rgba(37,42,89,.28);
}
/* Locked action (e.g. "Give feedback" before the review opens): greyed and
   non-actionable, but still hoverable so its title tooltip explains why. */
.btn-link.is-disabled {
  color:#8a90a2; background:#f3f4f8; border-color:var(--rl-line);
  opacity:.75; cursor:not-allowed;
}
.btn-link.is-disabled:hover { background:#f3f4f8; border-color:var(--rl-line); text-decoration:none; }
/* Notice shown when the active review hasn't started yet. */
.cycle-closed-notice { border-left:4px solid #e0a800; background:#fff9e8; }
.cycle-closed-notice h2 { margin-top:0; }
/* Cycle start/target inline editor: locked (greyed) until "Edit" is clicked. */
.inline-when { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.inline-when [hidden] { display: none !important; }   /* Save stays out of sight until Change (a button's own display beat [hidden]) */
.when-input { padding:5px 7px; border:1px solid var(--rl-line); border-radius:6px; }
.when-input:disabled { background:#f3f4f8; color:#5f6678; cursor:default; }
.when-input.editing { background:#fff; color:var(--ink); box-shadow:0 0 0 3px rgba(37,42,89,.12); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(37,42,89,.16);
}

/* ---- Inputs + styled selects ---- */
.admin-form input, .admin-form select, .admin-form textarea,
.team-filter input, .per-page-form select, .as-controls select, .as-controls input[type="search"] {
  border:1px solid var(--rl-line); border-radius:8px;
}
select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23252A59' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}

/* ---- Tables: row hover + tabular figures ---- */
.admin-table th, .team-table th { background:#f8fafd; }
.admin-table td, .team-table td { font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.admin-table tbody tr, .team-table tbody tr { transition: background .12s; }
.admin-table tbody tr:hover, .team-table tbody tr:hover { background:#f6f9fe; }
/* Action cells -> tidy button row (subjects, users, etc.) */
/* Keep row actions on a single line. flex-wrap:wrap made the action column's
   min-content width tiny, so the auto table-layout squeezed it and the links
   wrapped to 2-3 lines — inflating every row's height. */
.acts { display:flex; flex-wrap:nowrap; gap:6px; align-items:center; white-space:nowrap; }
.acts form { margin:0; }
/* Users table actions: collapsed behind a single kebab trigger into a popover
   menu, instead of stacking every action as its own button in the row (that
   grew to 7 buttons and was eating the row's height / squeezing Name). */
#users-table th:last-child, #users-table td:last-child { width:1%; }
.row-actions { position:relative; display:inline-block; }
.kebab-btn {
  width:32px; height:32px; border-radius:8px; border:1px solid var(--rl-line);
  background:#fff; color:#6b7186; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.kebab-btn:hover { background:#eef2fb; color:var(--navy); border-color:#d6def5; }
.kebab-btn[aria-expanded="true"] { background:var(--navy); color:#fff; border-color:var(--navy); }
.kebab-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(37,42,89,.28); }
/* .row-action-menu (not #users-table .acts): JS moves this element to
   document.body on open, to escape .table-scroll's overflow:auto clipping
   (mirrors colmenu.js) -- an ancestor-scoped selector would stop matching the
   instant it moves, silently dropping all of this styling. top/left are set
   inline by JS. */
.row-action-menu {
  position:absolute; z-index:30;
  flex-direction:column; align-items:stretch; gap:2px; width:max-content; min-width:190px;
  background:#fff; border:1px solid var(--rl-line); border-radius:10px;
  box-shadow:0 10px 30px rgba(17,24,39,.14); padding:6px;
}
.row-action-menu[hidden] { display:none; }
.row-action-menu form { margin:0; width:100%; }
.row-action-menu .btn-link, .row-action-menu button.bgm-open {
  display:block; width:100%; text-align:left; padding:8px 10px; white-space:nowrap;
  border:none; background:none; border-radius:6px; font-weight:500;
}
.row-action-menu .btn-link:hover, .row-action-menu button.bgm-open:hover { background:#f3f5fa; }
.row-action-menu button.danger { border:none; background:none; }
.row-action-menu button.danger:hover { background:var(--rl-danger-line); color:var(--rl-danger); }
.row-action-menu .menu-sep { border:none; border-top:1px solid #eef0f5; margin:5px 4px; }

/* Wide admin tables scroll horizontally INSIDE their card instead of widening
   the whole page (which previously stretched the pagination bar). */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:14px; }
.table-scroll > .team-table, .table-scroll > .admin-table { margin-top:0; }
/* THE standard for every admin list table: cap the height, scroll the rest,
   freeze the header. The whole page then fits on one screen no matter how many
   rows the table has.

   Viewport-relative rather than a fixed 490px (confirmed 2026-08-21), so a
   large monitor shows more rows instead of wasting the space. The max() floor
   is not decoration: a bare 60vh collapses to two or three rows on a short
   laptop window, which is worse than not capping at all. The trade accepted
   with it is that the visible row count now differs per screen, so "row 12" is
   not the same row for two people looking at the same table. */
.table-scroll-capped { max-height: max(320px, 60vh); overflow-y: auto; }
.table-scroll-capped thead th { position: sticky; top: 0; background: #f8fafd; z-index: 1; }
/* Freeze the PM KPI-table column headers on scroll. Page-level sticky -- the
   <thead> pins to the viewport top as the whole page scrolls -- NOT an
   inner-scroll box: a capped box's overflow:auto clips the in-cell
   Draft-with-AI dropdown (position:absolute, so it can't be scrolled into
   view). The 8-column table fits at desktop width; below 900px fall back to
   contained horizontal scroll (sticky is inert there, but the page is short
   anyway). The topbar isn't fixed/sticky, so top:0 sits at the very top;
   z-index:2 keeps the header above the chain-stepper pills. */
.pm-table-freeze { overflow: visible; margin-top: 14px; }
.pm-kpi-table thead th { position: sticky; top: 0; background: #f8fafd; z-index: 2; }
@media (max-width: 900px) { .pm-table-freeze { overflow-x: auto; } }

/* Assessor extremes: lock column widths so the "Always says No" and "Always
   says Yes" tables line up even though one has far more Subjects content
   than the other (table-layout:auto would size each table's columns off its
   own content, so the two panels wouldn't match). */
.extremes-table { table-layout: fixed; }
.extremes-table th:nth-child(1), .extremes-table td:nth-child(1) { width: 10%; }
.extremes-table th:nth-child(2), .extremes-table td:nth-child(2) { width: 14%; }
.extremes-table th:nth-child(3), .extremes-table td:nth-child(3) { width: 16%; }
.extremes-table th:nth-child(4), .extremes-table td:nth-child(4) { width: 18%; }
.extremes-table th:nth-child(5), .extremes-table td:nth-child(5) { width: 14%; }
.extremes-table th:nth-child(6), .extremes-table td:nth-child(6) { width: 28%; }
/* PM Team overview: lock column widths so the "To review" and "Reviewed"
   tables line up (table-layout:auto would size each off its own content, so
   the two would not match). Same idiom as .extremes-table above. */
.pm-team-table { table-layout: fixed; }
.pm-team-table th:nth-child(1), .pm-team-table td:nth-child(1) { width: 48%; }  /* Direct Report */
.pm-team-table th:nth-child(2), .pm-team-table td:nth-child(2) { width: 32%; }  /* Status / Moderated Rating (room for self -> moderated pills) */
.pm-team-table th:nth-child(3), .pm-team-table td:nth-child(3) { width: 20%; }  /* Action */
/* Self-rated ("before") band pill in the Reviewed self->moderated pair --
   faded so the moderated ("after") band dominates, same self-fade idea as
   the drill-down's .pm-current-self ladder cell. */
.pm-band-self { opacity: 0.5; }
/* Modal date picker (data-prompt-type="date", e.g. Mark confirmed). */
.dp-overlay { position:fixed; inset:0; background:rgba(20,24,40,.45); display:flex; align-items:center; justify-content:center; z-index:1000; }
.dp-card { background:#fff; border-radius:10px; padding:18px 20px; max-width:440px; width:90%; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.dp-card p { margin:0 0 12px; }
.dp-card input[type="date"] { width:100%; padding:8px 10px; border:1px solid var(--rl-line); border-radius:7px; font:inherit; }
.dp-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:16px; }

/* Vertical scroll box (~30 rows) with a sticky header — for long activity logs. */
.activity-scroll { max-height:62vh; overflow-y:auto; margin-top:14px; border:1px solid var(--rl-line); border-radius:8px; }
.activity-scroll > .admin-table { margin-top:0; }
.activity-scroll thead th { position:sticky; top:0; background:#eef2fb; z-index:1; }

/* Subjects table (non-bulk view): fit to 100% width so nothing overflows.
   Fixed layout + sized columns; long text wraps; action buttons wrap+compact. */
#subjects-table.fit { table-layout: fixed; width: 100%; }
#subjects-table.fit td { overflow-wrap: anywhere; }   /* wrap long data, not headers */
#subjects-table.fit th { overflow-wrap: normal; word-break: normal; hyphens: none; }
#subjects-table.fit th:nth-child(1), #subjects-table.fit td:nth-child(1) { width: 8%; }   /* Employee ID */
#subjects-table.fit th:nth-child(2), #subjects-table.fit td:nth-child(2) { width: 18%; }  /* Name */
#subjects-table.fit th:nth-child(3), #subjects-table.fit td:nth-child(3) { width: 5%; }   /* JG */
#subjects-table.fit th:nth-child(4), #subjects-table.fit td:nth-child(4) { width: 13%; max-width:none; } /* Department */
#subjects-table.fit th:nth-child(5), #subjects-table.fit td:nth-child(5) { width: 15%; }  /* Company */
#subjects-table.fit th:nth-child(6), #subjects-table.fit td:nth-child(6) { width: 7%; }   /* Panel */
#subjects-table.fit th:nth-child(7), #subjects-table.fit td:nth-child(7) { width: 8%; }   /* Avg score */
#subjects-table.fit th:nth-child(8), #subjects-table.fit td:nth-child(8) { width: 10%; }  /* Potential */
#subjects-table.fit th:nth-child(9), #subjects-table.fit td:nth-child(9) { width: 16%; }  /* Action */
#subjects-table.fit .acts { flex-wrap: wrap; gap: 4px; }
#subjects-table.fit .acts .btn-link { padding: 4px 8px; }

/* ---- KPI cards: left accent bar ---- */
.kpi { position:relative; overflow:hidden; border:1px solid var(--rl-line); }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--navy); }
.kpi:last-child::before { background:var(--red); }
.kpi-num { font-variant-numeric: tabular-nums; }

/* ---- Headings & accents -> navy ---- */
.admin-card h2, .tile h2, .category-block h2, .sugg-block h3, .skill-group-head,
.tile-sm strong, .col-menu-btn.has-filter { color: var(--navy); }
.panel-bar > span { background: var(--navy); }
.col-menu .cm-foot .cm-apply { background: var(--navy); border-color: var(--navy); }
.col-menu-btn.sort-asc .cm-caret::before, .col-menu-btn.sort-desc .cm-caret::before { color: var(--navy); }
.seg a.active { background: var(--navy); }

/* ---- Status pills get a status dot ---- */
.status-pill { display:inline-flex; align-items:center; gap:6px; }
.status-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ---- Softer, consistent card radius ---- */
.assessor-card, .admin-card, .kpi, .tile, .team-table { border-radius: var(--rl-radius); }
.error-card .error-code { color: var(--navy); }

/* =========================================================================
   MOBILE / RESPONSIVE  (≤768px) — phones & small tablets.
   Desktop layout is untouched; these rules only apply on narrow viewports.
   Priority is the assessor flow (My Assessments + the rating page), since
   employees will often fill in feedback on their phones.
   ========================================================================= */
@media (max-width: 768px) {
  .container { margin: 16px auto; padding: 0 14px; }
  h1 { font-size: 1.4rem; }
  /* 16px inputs on mobile so iOS Safari doesn't auto-zoom on focus */
  input, select, textarea { font-size: 16px; }

  /* --- Top nav: brand on its own row; links scroll horizontally --- */
  .topbar { flex-wrap: wrap; padding: 8px 14px; row-gap: 6px; }
  .brand a { font-size: 0.95rem; line-height: 1.2; }
  .nav-links {
    width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 2px;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .nav-links a { padding: 7px 10px; font-size: 0.85rem; white-space: nowrap; }
  .nav-links .who { white-space: nowrap; }
  .nav-links a.active::after { display: none; }          /* underline breaks once wrapped */
  .nav-links a.active { background: rgba(255,255,255,0.16); }

  /* --- Page header stacks --- */
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-head-right { flex-wrap: wrap; }
  .dash-alert { flex-wrap: wrap; }

  /* --- Wide data tables become horizontally scrollable (no squashing) --- */
  .team-table, .admin-table, .agree-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }

  /* --- Rating page: stack statement text above full-width Yes/No buttons --- */
  .stmt-table, .stmt-table tbody, .stmt-table tr, .stmt-table td { display: block; width: 100%; }
  .stmt-table tr { padding: 12px 0; border-bottom: 1px solid #f0f1f6; }
  .stmt-table tr:last-child { border-bottom: 0; }
  .stmt-table td { padding: 4px 0; border-bottom: 0; }
  .stmt-action { width: auto; text-align: left; white-space: normal; margin-top: 8px; }
  .rating-buttons { display: flex; width: 100%; }
  .rating-btn { flex: 1; min-width: 0; padding: 12px 8px; }   /* large thumb targets */
  .rating-legend { gap: 12px; }

  /* --- Actions & forms stack / fill width --- */
  .actions { flex-wrap: wrap; }
  .actions button, .actions .btn-link { flex: 1 1 auto; justify-content: center; }
  .admin-form { grid-template-columns: 1fr !important; }
  .as-controls { flex-direction: column; align-items: stretch; }
  .as-controls .as-search { min-width: 0; }
  .score-grid { grid-template-columns: 1fr; }

  /* My Assessments list: each row becomes a tap-friendly card (the assessor's
     main screen) so the "Give feedback" button is always visible, not off to
     the right behind a horizontal scroll. */
  .team-table.assess-table {
    display: block; overflow: visible; white-space: normal;
    background: transparent; border: 0; box-shadow: none;
  }
  .team-table.assess-table thead { display: none; }
  .team-table.assess-table tbody,
  .team-table.assess-table tr,
  .team-table.assess-table td { display: block; width: 100%; }
  .team-table.assess-table tr {
    border: 1px solid var(--rl-line); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 10px; background: #fff;
    box-shadow: var(--rl-shadow-sm);
  }
  .team-table.assess-table td { border: 0; padding: 3px 0; white-space: normal; }
  .team-table.assess-table td:first-child { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
  .team-table.assess-table .btn-link {
    display: flex; width: 100%; justify-content: center; margin-top: 12px; padding: 12px;
  }
  /* the card has no column header, so label the bare job-grade number */
  .team-table.assess-table td.jg-cell::before { content: "JG "; color: var(--rl-muted, #6b7186); }
}

/* =========================================================================
   ACCESSIBILITY & FORM-FEEDBACK POLISH (P1/P2 from the UX review)
   ========================================================================= */
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* Darker placeholder text (the previous grey failed contrast) */
input::placeholder, textarea::placeholder { color: #6b7186; opacity: 1; }

/* Keyboard skip-link — hidden until focused */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--navy, #252A59); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Required-field asterisk */
.req { color: var(--red, #D61923); margin-left: 2px; font-weight: 700; }

/* Submit feedback: dim the clicked button while the form submits */
.btn-busy { opacity: 0.6; pointer-events: none; }

/* Password show/hide toggle — neutral light-grey eye icon. */
.pw-field { position: relative; display: block; }
.pw-field > input { width: 100%; box-sizing: border-box; padding-right: 44px; }
.pw-field .pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  margin: 0;                           /* override generic form-button margin (was shifting it ~8px low) */
  display: inline-flex; align-items: center; line-height: 0;
  background: transparent; border: 0; padding: 4px; cursor: pointer;
  color: #9aa1b4;                      /* neutral light grey, like most sites */
}
.pw-field .pw-toggle:hover,
.pw-field .pw-toggle:focus-visible { color: #6b7186; }
.pw-field .pw-toggle svg { width: 20px; height: 20px; }

/* ---- Top bar: segmented task toggle + account dropdown -------------------- */
/* Module tabs. These used to live in the dark top bar as .nav-seg; they now
   render inside <main>, directly above the module's own content, so switching
   between your view and your team's is a move you make where you're looking
   rather than a trip up to global chrome. Light-surface palette accordingly. */
.mod-tabs { display: inline-flex; background: #eef0f6; border: 1px solid #e2e5ee;
  border-radius: 9px; padding: 3px; gap: 2px; margin: 0 0 18px; flex-wrap: wrap; }
.mod-tabs a { padding: 7px 15px; border-radius: 7px; color: #5f6678; font-weight: 500;
  font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.mod-tabs a:hover { color: var(--navy); background: rgba(255,255,255,.75); }
.mod-tabs a.active { background: #fff; color: var(--navy); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20,25,50,.10); }
.mod-tabs a.active::after { display: none; }   /* no red underline inside the pill */
/* The manager Team summary/Individual toggle (mgrToggle) renders <button> segments,
   not <a> -- give them the same segment styling + visible active state. */
.mod-tabs button { padding: 7px 15px; border: none; border-radius: 7px; background: none;
  color: #5f6678; font: inherit; font-weight: 500; font-size: 0.92rem; white-space: nowrap; cursor: pointer; }
.mod-tabs button:hover { color: var(--navy); background: rgba(255,255,255,.75); }
.mod-tabs button.active { background: #fff; color: var(--navy); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20,25,50,.10); }
/* Icon variant (Dashboard / AI Check-in): compact icon-only segments -- keeps
   the toggle small so a second toggle (self vs team) can share the row later.
   Scoped to .mod-tabs-icon so every other .mod-tabs stays text. */
.mod-tabs-icon a { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; }
.mod-tabs-icon .rv-ico { width: 18px; height: 18px; }

/* Demo role switcher: sits in the topbar next to Account, styled to read as a
   demo control rather than product chrome (dashed edge, muted label) so nobody
   mistakes it for a real feature during a walkthrough. */
.demo-switch { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
  padding: 4px 10px 4px 12px; border: 1px dashed rgba(255,255,255,.35); border-radius: 999px; }
.demo-switch__label { font-size: 0.72rem; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.62); white-space: nowrap; }
.demo-switch__select { background: rgba(255,255,255,.12); color: #fff; border: 0;
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; }
.demo-switch__select option { color: #24406e; background: #fff; }
@media (max-width: 900px) { .demo-switch__label { display: none; } }

.acct { position: relative; margin-left: 8px; }
.acct-trigger { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.10);
  color: #fff; border: 0; padding: 8px 14px; border-radius: 7px; font-weight: 500; font-size: 0.9rem; cursor: pointer; }
.acct-trigger:hover { background: rgba(255,255,255,.18); }
.acct-caret { font-size: 0.8em; }
/* position:fixed so the menu is never clipped by the mobile nav's overflow-x
   scroll strip; exact top/right are set in JS from the trigger's position. */
.acct-menu { position: fixed; min-width: 210px; background: #fff;
  border: 1px solid #e4e7ef; border-radius: 10px; box-shadow: 0 8px 28px rgba(20,25,50,.18); padding: 6px; z-index: 60; }
.acct-menu .acct-id { padding: 8px 12px 10px; font-size: 0.82rem; color: #5f6678; font-weight: 600;
  border-bottom: 1px solid #eef0f5; margin-bottom: 4px; }
.acct-menu a { display: block; padding: 9px 12px; border-radius: 7px; color: #1f2330; font-weight: 500; }
/* Kill the top-nav tab underline + white-on-hover that leak in via .nav-links a */
.acct-menu a::after { content: none; display: none; }
.acct-menu a:hover { background: #eef2fb; color: #1f2330; text-decoration: none; }
.acct-menu a.logout { color: #c0392b; }
.acct-menu a.logout:hover { background: #f9e6e6; color: #c0392b; }

/* "Manage" dropdown trigger — styled like a nav tab among the admin tabs */
.nav-dd-trigger { font: inherit; font-weight: 500; background: transparent; border: 0; cursor: pointer;
  color: #c3c7d6; padding: 8px 12px; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; }
.nav-dd-trigger:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-dd-trigger.active { color: #fff; background: rgba(255,255,255,.10); }
/* Section labels + active item inside a dropdown menu */
.acct-menu .menu-sec { padding: 8px 12px 3px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #9aa0b3; }
.acct-menu .menu-sec + a { margin-top: 0; }
.acct-menu a.active { background: #eef2fb; color: #2557d6; font-weight: 600; }

/* "Manage" dropdown: People/Data/System side by side as columns, not stacked
   -- keeps the menu short even as items are added (grows wider, not taller).
   The existing position:fixed JS clamp (base.html) already measures the
   rendered width and shifts the whole menu left if it would overflow, so no
   positioning changes were needed for this to stay on-screen. */
.manage-menu-cols:not([hidden]) { display: flex; align-items: flex-start; padding: 6px 0; }
.manage-menu-cols .menu-col { min-width: 176px; padding: 0 6px; }
.manage-menu-cols .menu-col + .menu-col { border-left: 1px solid #eef0f5; }

/* Greeting eyebrow above a page title */
.welcome-eyebrow { color: #5f6678; font-weight: 600; font-size: 0.95rem; margin: 0 0 4px; }

/* My Assessments tables (Name · Department · Relationship · Action/Status):
   keep Name + Department flexible, shrink the relationship + action columns to
   their content so a 4-column table doesn't stretch sparsely. Desktop only —
   mobile uses the stacked-card layout below. */
@media (min-width: 769px) {
  /* Fixed layout + identical column widths so the To-do and Submitted tables
     line up exactly. Everything left-aligned. */
  .assess-table { table-layout: fixed; }
  .assess-table th:nth-child(1), .assess-table td:nth-child(1) { width: 40%; }
  .assess-table th:nth-child(2), .assess-table td:nth-child(2) { width: 28%; }
  .assess-table th:nth-child(3), .assess-table td:nth-child(3) { width: 16%; }
  .assess-table th:nth-child(4), .assess-table td:nth-child(4) { width: 16%; text-align: left; }
}

/* "To do" count — heading-sized number in a highlighted box, spaced from the label */
.todo-count {
  display: inline-block; vertical-align: middle; position: relative; top: -2px;
  margin-left: 14px; padding: 2px 13px;
  font-size: 0.82em; font-weight: 700; line-height: 1.3;
  color: #2557d6; background: #eef2fb; border-radius: 9px;
}

/* "Never logged in" marker on the Progress roster */
.never-login { color: #c0392b; font-weight: 600; font-size: 0.9rem; }

/* Auto-save status next to the Submit button on the rating form */
.save-status { font-size: 0.85rem; color: #5f6678; align-self: center; }
.save-status.saved { color: #1d6b34; font-weight: 600; }
.save-status.failed { color: #c0392b; font-weight: 600; }

/* ---- Report release (admin) ---------------------------------------------- */
.release-badge {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: #1d6b34; background: #e7f5ec; border: 1px solid #bfe3cb;
  padding: 3px 9px; border-radius: 999px;
}
.release-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: #f4f6fb; border: 1px solid #e4e7ef; border-radius: 8px;
}
.release-bar .rb-info { font-size: 0.88rem; color: #3a4050; }
.release-bar .rb-spacer { flex: 1 1 auto; }
.release-bar .btn-link { padding: 6px 10px; }
th.rel-col, td.rel-col { width: 34px; text-align: center; padding-left: 6px; padding-right: 6px; }
.rel-check, #sel-all-head { width: 16px; height: 16px; cursor: pointer; }
.rel-tag-on {
  font-size: 0.72rem; font-weight: 700; color: #1d6b34;
  margin-bottom: 4px;
}

/* ---- Employee self-service report ---------------------------------------- */
.report-intro p { margin: 0 0 8px; }
.report-basis { margin: 2px 0 14px; }
.report-principle { margin-top: 14px; }
.report-print-head { display: none; }   /* shown only when printing (below) */

@media print {
  /* Strip the app chrome so the PDF is just the report. The interactive season
     switcher is meaningless on paper — the chosen cycle is stated in the print
     banner header instead. */
  .topbar, .fab-back, .flash, .skip-link,
  .report-actions, .release-bar, #col-menu, .cycle-history { display: none !important; }
  body { background: #fff; }
  main.container { max-width: none; margin: 0; padding: 0; }
  .card, .report-principle {
    border: none; box-shadow: none; padding: 0; margin: 0 0 14px;
    break-inside: avoid; page-break-inside: avoid;
  }
  .report-print-head {
    display: block; border-bottom: 2px solid #2e3566;
    padding-bottom: 8px; margin-bottom: 14px;
  }
  .report-print-head .rph-org { font-weight: 800; color: #2e3566; font-size: 1.1rem; }
  .report-print-head .rph-name { color: #3a4050; margin-top: 2px; }
  /* Keep brand colours in the printed/saved PDF. */
  .crit-head, .agree-bar, .agree-bar > span, .crit-feedback {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ---------------------------------------------------------------------------
   Review cycles (seasons)
   --------------------------------------------------------------------------- */
/* Season badge beside a page heading (user-facing pages). */
.season-badge {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 2px 11px; font-size: 0.5em; font-weight: 700; letter-spacing: .02em;
  color: #2557d6; background: #eef2fb; border-radius: 999px;
  position: relative; top: -3px; text-transform: uppercase;
}

/* Non-admin nav cycle badge — static (regular users always see the active
   cycle only, no switcher) but same visual language as the admin one below. */
.cycle-badge {
  display: inline-flex; align-items: center; gap: 7px;
  color: #c3c7d6; font-weight: 500; font-size: 0.9rem;
  padding: 6px 4px; margin-right: 6px;
}

/* Admin nav cycle switcher (reuses .acct / .nav-dd-trigger base styles). */
.cycle-switch { margin-right: 2px; }
.cycle-trigger { display: inline-flex; align-items: center; gap: 7px; }
.cycle-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #36c08a;
  box-shadow: 0 0 0 3px rgba(54,192,138,.22); flex: none;
}
.cycle-trigger.cycle-past .cycle-dot { background: #f0a500; box-shadow: 0 0 0 3px rgba(240,165,0,.22); }
.cycle-ro {
  font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #1f2330; background: #f0a500; padding: 1px 6px; border-radius: 6px;
}
.cycle-live, .ch-live {
  font-size: .82em; font-weight: 700; color: #1b7a55; background: #e3f6ee;
  padding: 1px 7px; border-radius: 6px; margin-left: 4px;
}
.ch-pill.on .ch-live { color: #e3f6ee; background: rgba(255,255,255,.22); }
.cycle-arch {
  font-size: .82em; font-weight: 700; color: #8a6d00; background: #fbeecb;
  padding: 1px 7px; border-radius: 6px; margin-left: 4px;
}
.acct-menu a.cycle-manage { border-top: 1px solid #e7e9f0; margin-top: 4px; color: #2557d6; }
/* Admin Modules menu: this module is switched off for the cycle. Its pages are
   still listed because settings must stay reachable while it is off. */
.mod-off {
  font-size: .82em; font-weight: 700; color: #6b6457; background: #ece9e2;
  padding: 1px 7px; border-radius: 6px; margin-left: 4px; letter-spacing: 0;
}
.status-pill.status-archived { background: #ece9e2; color: #6b6457; }
.status-pill.status-open { background: #e3f6ee; color: #1b7a55; }
.btn-link.danger-link { color: #c0392b; }
.inline-deadline { display: inline-flex; align-items: center; gap: 6px; }
.inline-deadline input[type=date] {
  font: inherit; padding: 4px 7px; border: 1px solid #cfd4e0; border-radius: 7px;
}

/* My Feedback: review-season history selector. */
.cycle-history {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 16px;
}
.cycle-history .ch-label { font-weight: 600; color: #4a5060; font-size: .92rem; }
.ch-pill {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  border: 1px solid #d4d9e6; color: #2557d6; text-decoration: none;
  font-size: .9rem; font-weight: 600; background: #fff;
}
.ch-pill:hover { background: #f4f7fd; }
.ch-pill.on { background: #2557d6; border-color: #2557d6; color: #fff; }

/* Cycle management form. */
.stack-form .form-row {
  display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px;
}
.stack-form .form-row label {
  display: flex; flex-direction: column; gap: 4px; font-weight: 600;
  color: #3a4050; font-size: .92rem; flex: 1 1 180px;
}
.stack-form .form-row input { font: inherit; padding: 8px 10px; border: 1px solid #cfd4e0; border-radius: 8px; }
.cycle-source { border: 1px solid #e7e9f0; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; }
.cycle-source legend { font-weight: 700; color: #2e3566; padding: 0 6px; }
.radio-line {
  display: flex; gap: 10px; align-items: flex-start; padding: 7px 0;
  font-weight: 400; color: #3a4050; font-size: .92rem;
}
.radio-line input { margin-top: 3px; flex: none; }
.bullets { margin: 6px 0 10px; padding-left: 20px; }
.bullets li { margin: 4px 0; color: #3a4050; }

/* Percentage shown next to a count (dashboard progress/bands tables). */
.count-pct { color: #6b7186; font-weight: 600; font-size: .85em; margin-left: 4px; }

/* ---------------------------------------------------------------------------
   Leadership-framework tiers
   --------------------------------------------------------------------------- */
.tier-pill, .tier-chip {
  display: inline-block; font-weight: 700; font-size: .78em; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.tier-chip { font-size: .85rem; padding: 4px 12px; margin: 0 6px 6px 0; }
.tier-pill[data-tier="1"], .tier-chip[data-tier="1"] { background:#eaf2ff; color:#1f4fb0; border-color:#cfe0fb; }
.tier-pill[data-tier="2"], .tier-chip[data-tier="2"] { background:#e6f6ee; color:#1b7a55; border-color:#c9ecd9; }
.tier-pill[data-tier="3"], .tier-chip[data-tier="3"] { background:#fdf0e3; color:#a85b1a; border-color:#f5dcc1; }
.tier-pill[data-tier="4"], .tier-chip[data-tier="4"] { background:#f1ebfb; color:#6b3fb5; border-color:#e0d3f5; }

.tier-summary { margin: 6px 0 14px; }
.tier-detail { border: 1px solid #e7e9f0; border-radius: 10px; margin-bottom: 10px; background:#fff; }
.tier-detail > summary {
  cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; list-style: none;
}
.tier-detail > summary::-webkit-details-marker { display: none; }
.tier-detail > summary::before { content: "▸"; color: #8a90a2; font-size: .8em; }
.tier-detail[open] > summary::before { content: "▾"; }
.tier-detail .tier-grades { font-weight: 700; color: #2e3566; }
.tier-body { padding: 0 16px 14px 36px; }
.tier-principle { padding: 10px 0; border-top: 1px solid #f0f1f6; }
.tier-principle h4 { margin: 0 0 6px; color: #2e3566; font-size: .98rem; }
.tier-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tier-col-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tcl-current { color: #1b7a55; }
.tcl-future { color: #6b3fb5; }
.tier-cols ul { margin: 0; padding-left: 18px; }
.tier-cols li { margin: 3px 0; color: #3a4050; font-size: .9rem; }
@media (max-width: 768px) { .tier-cols { grid-template-columns: 1fr; gap: 6px; } }

/* Editable tier grade-bands (Settings + per-cycle override). */
.tier-edit { border: 1px solid #e7e9f0; border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.tier-edit legend { font-weight: 700; color: #2e3566; padding: 0 6px; }
.tier-edit-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 5px 0; }
.tier-edit-row .tier-pill { min-width: 58px; text-align: center; }
.tier-edit-row label { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: #3a4050; font-weight: 600; }
.tier-edit-row input { width: 70px; font: inherit; padding: 5px 8px; border: 1px solid #cfd4e0; border-radius: 7px; }

/* Framework editor (principles + behaviours) */
.fw-principle > summary { cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fw-pname { font-weight: 700; color: #2e3566; font-size: 1.05rem; }
.fw-edit-crit { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 10px 0 4px; }
.fw-edit-crit label { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; font-weight: 600; color: #3a4050; flex: 1 1 220px; }
.fw-edit-crit input { font: inherit; padding: 6px 9px; border: 1px solid #cfd4e0; border-radius: 7px; }
.fw-tier { border-top: 1px solid #eef0f5; padding: 10px 0; }
.fw-tier-head { margin-bottom: 8px; }
.fw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fw-beh { display: flex; gap: 8px; align-items: start; margin: 4px 0; }
.fw-beh textarea { flex: 1; font: inherit; padding: 6px 8px; border: 1px solid #cfd4e0; border-radius: 7px; resize: vertical; }
.fw-beh-acts { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.fw-add textarea { background: #fbfcfe; border-style: dashed; }
@media (max-width: 768px) { .fw-cols { grid-template-columns: 1fr; gap: 8px; } }

/* Page-level segmented toggle (light background) — the primary view switch. */
.seg-toggle {
  display: inline-flex; gap: 4px; background: #eceef4; border: 1px solid #dde1ea;
  border-radius: 11px; padding: 4px;
}
.seg-toggle a {
  padding: 8px 18px; border-radius: 8px; color: #3a4050; font-weight: 600;
  font-size: .96rem; text-decoration: none; line-height: 1.1;
}
.seg-toggle a:hover { background: #e0e4ee; }
.seg-toggle a.active { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.seg-toggle a.active::after { content: none; display: none; }

/* Secondary "Show:" chip filter — clearly subordinate to the toggle. */
.subfilter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.subfilter .sf-label {
  font-size: .76rem; color: #6b7180; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin-right: 2px;
}
.subfilter a {
  padding: 4px 13px; border-radius: 999px; border: 1px solid #d4d9e6; background: #fff;
  color: #3a4050; font-size: .87rem; font-weight: 600; text-decoration: none;
}
.subfilter a:hover { background: #f4f7fd; }
.subfilter a.active { background: #2557d6; border-color: #2557d6; color: #fff; }
.subfilter a.active::after { content: none; display: none; }

/* Bulk-select users (Inactivate/Activate tabs): match-count banner + the
   action bar that appears once 1+ rows (or "select all matching") is on. */
.bulk-match-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #eef2fb; border: 1px solid #c7d3f2; border-radius: 8px;
  padding: 10px 14px; margin: 0 0 10px; font-size: 0.87rem; color: #252A59;
}
.bulk-select-all-btn {
  flex: none; background: #252A59; color: #fff; border: 1px solid #252A59;
  border-radius: 6px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.bulk-select-all-btn:hover { background: #1d2249; border-color: #1d2249; }
.bulk-action-bar:not([hidden]) {
  display: flex; align-items: center; gap: 12px; background: #fdeceb;
  border: 1px solid #f0b3ae; border-radius: 8px; padding: 10px 14px; margin: 0 0 10px;
}
.bulk-action-bar span { font-size: 0.87rem; font-weight: 600; color: #a32d2d; }

/* Phone: tighten the toggle + account so they fit a 375px bar without
   overflow. Placed last so it overrides the base .mod-tabs/.acct rules above. */
@media (max-width: 768px) {
  .mod-tabs a { padding: 6px 10px; font-size: 0.88rem; }
  .acct { margin-left: 4px; }
  .acct-trigger { padding: 7px 10px; font-size: 0.85rem; }
  .nav-dd-trigger { padding: 7px 10px; font-size: 0.85rem; }

  /* Behaviour-agreement rows (my-report + admin) stack on phones so the
     statement text and its bar/count don't overflow off-screen. The right
     cell carries inline width:240px/text-align:right, hence !important. */
  .agree-table, .agree-table tbody, .agree-table tr { display: block; width: 100%; }
  .agree-table tr { padding: 8px 0; }
  .agree-table td { display: block; width: 100% !important; text-align: left !important; padding: 4px 0; }
  .agree-table .stmt-text { margin-bottom: 2px; white-space: normal; }
  .agree-bar-wrap { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Reminder schedule editor (toggle switch + day rows + time)
   --------------------------------------------------------------------------- */
.sched-form { margin-top: 10px; }

/* On/off toggle switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; flex: none; width: 44px; height: 24px;
  background: #cdd3e2; border-radius: 999px; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + .track { background: #2557d6; }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 2px solid #2557d6; outline-offset: 2px; }
.switch .switch-label { font-weight: 600; color: #252a59; }

/* Two-column field grid (days list | send time) */
.sched-grid { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 16px; }
.sched-field { min-width: 220px; }
.sched-lab { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #6b7186; margin-bottom: 8px; }

.day-rows { display: flex; flex-direction: column; gap: 8px; }
.day-row { display: flex; align-items: center; gap: 8px; }
.day-row input[type="number"] { width: 76px; padding: 8px 10px; border: 1px solid #cdd3e2;
  border-radius: 6px; font: inherit; }
.day-suffix { color: #5f6678; font-size: 0.9rem; }
.day-rm { border: 1px solid #e3c4c4; background: #fff; color: #c0392b; width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.day-rm:hover { background: #fdecec; }
.add-day { margin-top: 10px; }
.time-input { padding: 8px 10px; border: 1px solid #cdd3e2; border-radius: 6px; font: inherit; }

/* Reminder email content editor: subject/body + token palette */
.reminder-body-input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem; line-height: 1.6; min-height: 160px; resize: vertical; }
.tok-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 20px; margin: 10px 0 4px; }
.tok-group { margin-bottom: 6px; }
.tok-group-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #6b7186; margin-bottom: 4px; }
.tok-btn { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 4px 6px; border: none; background: none; border-radius: 5px; cursor: pointer; }
.tok-btn:hover { background: #eef2fb; }
.tok-btn code { flex: none; font-size: 0.76rem; color: #252a59; background: #eef2fb;
  border: 1px solid #d6def5; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.tok-btn span { font-size: 0.78rem; color: #6b7186; line-height: 1.4; }
.reminder-locked { margin-top: 14px; border: 1px dashed #d6dae4; border-radius: 8px;
  padding: 12px 14px; background: #fafbfd; }
.reminder-locked-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #6b7186; margin: 0 0 6px; }
.reminder-locked p { margin: 3px 0; font-size: 0.78rem; color: #6b7186; }
.reminder-safety { display: flex; gap: 8px; margin-top: 12px; padding: 9px 11px;
  background: #eef2fb; border: 1px solid #d6def5; border-radius: 7px; }
.reminder-safety p { margin: 0; font-size: 0.8rem; color: #252a59; line-height: 1.5; }

/* Reminder recipients table: select-all banner + compact org columns */
.select-all-matching { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px;
  padding: 8px 12px; background: #eef2fb; border: 1px solid #d6def5; border-radius: 7px;
  font-size: 0.9rem; color: #252a59; cursor: pointer; }
.select-all-matching input { width: 16px; height: 16px; }
#subjects-table td.small, .admin-table td.small { font-size: 0.82rem; color: #4a5066; }

/* ---------------------------------------------------------------------------
   First-time product tour (static/tour.js)
   --------------------------------------------------------------------------- */
.tour-overlay { position: fixed; inset: 0; z-index: 100000; background: transparent; cursor: default; }
.tour-spot { position: fixed; z-index: 100001; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 19, 32, 0.55); transition: all .18s ease;
  outline: 2px solid #fff; }
.tour-pop { position: fixed; z-index: 100002; width: 320px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.28);
  padding: 16px 18px; color: #1f2330; }
.tour-pop-head { font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; color: #1f2330; }
.tour-pop-body { font-size: 0.9rem; line-height: 1.5; color: #4a5066; }
.tour-pop-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-count { font-size: 0.78rem; color: #8a93a6; }
.tour-spacer { flex: 1; }
.tour-btn { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 6px 12px;
  border-radius: 6px; border: 1px solid #cdd3e2; background: #fff; color: #2d3350; cursor: pointer; }
.tour-btn:hover { background: #f1f4fa; }
.tour-btn.tour-next { background: #2557d6; border-color: #2557d6; color: #fff; }
.tour-btn.tour-next:hover { background: #1c47b8; }
.tour-btn.tour-skip { border-color: transparent; color: #8a93a6; padding: 6px 8px; }
@media print { .tour-overlay, .tour-spot, .tour-pop { display: none !important; } }

/* ---- Draft with AI: single button opens a preset command menu ------------ */
.ai-draft { position: relative; }
.ai-split { position: relative; display: inline-flex; }
.ai-draft-btn[aria-expanded="true"] { background: #f1f4fa; border-color: #cdd3e2; }
.ai-draft-btn .ai-caret { font-size: 0.75rem; opacity: .8; margin-left: 2px; }
/* Daily limit reached (or mid-request): greyed out + inert (no hover effect). */
.ai-draft-btn:disabled, .ai-draft-btn:disabled:hover {
  opacity: .55;
  background: #f1f4fa; color: #8a93a6; border-color: var(--rl-line);
}
.ai-draft-btn:disabled .ai-caret { opacity: .45; }
.ai-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 270px; background: #fff; border: 1px solid var(--rl-line);
  border-radius: var(--rl-btn-radius); box-shadow: 0 8px 24px rgba(31,35,48,.14);
  overflow: hidden; padding: 4px 0;
}
.ai-menu[hidden] { display: none; }
.ai-menu .ai-menu-head {
  padding: 6px 12px; font-size: 0.68rem; letter-spacing: .04em;
  text-transform: uppercase; color: #8a93a6; border-bottom: 1px solid var(--rl-line-soft);
}
.ai-menu .ai-cmd {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 9px 12px; font-size: 0.88rem; color: var(--ink); font-weight: 500;
}
.ai-menu .ai-cmd:hover, .ai-menu .ai-cmd:focus-visible { background: #f1f4fa; outline: none; }
.ai-menu .ai-cmd .ai-cmd-ico { font-size: 1rem; width: 18px; text-align: center; }
.ai-menu .ai-cmd small { display: block; font-weight: 400; color: #8a93a6; font-size: 0.76rem; }
.ai-menu .ai-cmd.is-default { color: var(--navy); }
.ai-menu .ai-sep { border-top: 1px solid var(--rl-line-soft); margin: 4px 0; }
.ai-quota { color: #8a93a6; }
.ai-quota.is-last { color: #9c6200; }
.ai-quota.is-locked { color: #8a93a6; }

/* =========================================================================
   Calibration -- L/M/H distribution-vs-target bars. Clones the existing
   .panel-bar/.agree-bar rounded-meter mechanism (container div + inline-
   width child span) rather than introducing a chart library; the target
   tick is one more small absolutely-positioned child, still zero JS.
   ========================================================================= */
/* The distribution card stays pinned to the top of the viewport while the HOD
   scrolls the roster and adjusts bands, so the live target curve (which updates
   as bands change) is always in view. Compacted a touch so it doesn't dominate
   the screen while pinned; the sticky action bar keeps Lock/Reset at the bottom. */
/* The distribution has to stay on screen while you scroll the roster -- it is
   the thing every adjustment is judged against. The BG roll-up renders into
   #calib-panels rather than #calib-dist-box, so it needs the same treatment;
   without it the target simply scrolled away on that one page. */
.calib-panels {
  position: sticky; top: var(--topbar-h); z-index: 15;
  background: #f5f6fa; padding: 12px 0 10px; margin-bottom: 6px;
}
#calib-dist-box {
  position: sticky; top: var(--topbar-h); z-index: 15;
  padding: 12px 20px; margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(37,42,89,0.07);
}
#calib-dist-box h2 { font-size: 0.92rem; margin: 0 0 6px; }
#calib-dist-box .calib-dist-row { margin: 5px 0; }
.calib-dist-row { display: flex; align-items: center; gap: 14px; margin: 10px 0; }
.calib-dist-label { width: 42px; flex: none; font-weight: 600; font-size: 0.86rem; color: var(--ink); }
.calib-dist-bar {
  position: relative; flex: 1; height: 14px;
  border-radius: 999px; background: #eef0f6; overflow: visible;
}
.calib-dist-fill {
  display: block; height: 100%; border-radius: 999px 0 0 999px;
  max-width: 100%; overflow: hidden;
}
/* Same 3-colour family as .potential-pill[data-band] elsewhere in the app --
   roughly a third of the way from the pill's pale border tone toward its
   dark text tone: denser/more legible than the border colour alone, but
   still clearly lighter than a solid dark fill (which read as a mismatched,
   unrelated colour next to the pale pill backgrounds a few columns over). */
.calib-dist-low  { background: #d19a5c; }
.calib-dist-mid  { background: #7e9edb; }
.calib-dist-high { background: #74b788; }
/* Performance Management's 5-way UA/BE/ME/AE/OU spread (Department page) --
   same bar/fill shape as the 3-way Calibration bars above, worst-to-best
   colour ramp, no target-tick (PM has no target-distribution concept). */
.calib-dist-ua { background: #c96a5c; }
.calib-dist-be { background: #d19a5c; }
.calib-dist-me { background: #7e9edb; }
.calib-dist-ae { background: #74b788; }
.calib-dist-ou { background: #4a9d68; }
.calib-dist-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: #1f2330; opacity: 0.55; border-radius: 1px;
}
/* a department on the BU CEO's curve: the whole unit, faintly (2026-10-13) */
.calib-dist-unit {
  position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  border: 2px solid #8a90a2; background: #fff; box-sizing: border-box;
}
/* the BU CEO's filter on the curve card: the department pills (the Group Chief's row) and Moved only (2026-10-13) */
.rv-nav-item[hidden] { display: none; }   /* the BU CEO's curve filter hides the people it leaves out (2026-10-13) */
.rv-cal-filter { display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin: 0 0 6px;
  background: #f7f8fb; border: 1px solid #eef0f5; border-radius: 10px; }
.rv-cal-filter .rv-grp-frow { flex: 1 1 auto; min-width: 0; grid-template-columns: 92px minmax(0, 1fr); }
.rv-cal-movedtg { flex: none; display: inline-flex; align-items: center; gap: 6px; padding-left: 12px;
  border-left: 1px solid var(--rl-line, #e4e7ef); font-size: 12.5px; font-weight: 700; color: var(--navy, #252A59);
  cursor: pointer; white-space: nowrap; }
.rv-cal-movedtg input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy, #252A59); }
/* Live delta vs. the distribution as it stood when the page loaded --
   calibration.js positions these on every auto-saved adjustment. A band
   that grew shows the growth as a denser-coloured segment appended after
   the base fill; a band that shrank shows the gap it left behind as an
   unfilled, dense-bordered segment, so the person calibrating can see at a
   glance not just where they are now but how far they've already moved
   things since opening the page. */
.calib-dist-delta-up, .calib-dist-delta-down {
  position: absolute; top: 0; height: 100%; display: none; box-sizing: border-box;
}
.calib-dist-delta-up { border-radius: 0 999px 999px 0; }
.calib-dist-delta-down { border: 2px dashed; border-radius: 0 999px 999px 0; background: transparent !important; }
/* Filled variant (growth) and outline-only variant (shrinkage) are scoped as
   compound selectors, not a single shared "colour" class applied to both --
   a shared class sets `background` for both, and whichever rule happens to
   come later in the file wins the cascade regardless of intent, which is
   exactly what silently filled in the "shrank" segment the same as the
   "grew" one. Keeping fill and outline as separate, explicitly-scoped rules
   removes that ambiguity instead of relying on rule order. */
.calib-dist-delta-up.calib-delta-low  { background: #8a4500; }
.calib-dist-delta-up.calib-delta-mid  { background: #1b46b3; }
.calib-dist-delta-up.calib-delta-high { background: #1d6b34; }
.calib-dist-delta-down.calib-delta-low  { border-color: #8a4500; }
.calib-dist-delta-down.calib-delta-mid  { border-color: #1b46b3; }
.calib-dist-delta-down.calib-delta-high { border-color: #1d6b34; }
/* The same pairs for performance calibration's five bands. These are NOT
   optional decoration: the base rules above deliberately carry no colour of
   their own, so a delta segment with no `calib-delta-*` class renders a
   transparent "grew" segment (invisible -- the growth effect silently does
   nothing) and a "shrank" segment whose dashed border falls back to
   currentColor. Each value is that band's own .potential-pill text colour,
   the same source low/mid/high draw from, so a band reads as one colour
   across its pill, its fill and its delta. */
.calib-dist-delta-up.calib-delta-ua { background: #a02323; }
.calib-dist-delta-up.calib-delta-be { background: #8a4500; }
.calib-dist-delta-up.calib-delta-me { background: #1b46b3; }
.calib-dist-delta-up.calib-delta-ae { background: #1a7a54; }
.calib-dist-delta-up.calib-delta-ou { background: #1d6b34; }
.calib-dist-delta-down.calib-delta-ua { border-color: #a02323; }
.calib-dist-delta-down.calib-delta-be { border-color: #8a4500; }
.calib-dist-delta-down.calib-delta-me { border-color: #1b46b3; }
.calib-dist-delta-down.calib-delta-ae { border-color: #1a7a54; }
.calib-dist-delta-down.calib-delta-ou { border-color: #1d6b34; }
.calib-dist-pct { flex: none; width: 190px; font-size: 0.86rem; color: var(--muted); white-space: nowrap; }
.calib-dist-gap { flex: none; width: 150px; font-size: 0.86rem; font-weight: 600; white-space: nowrap; text-align: right; }
.calib-dist-gap.is-short { color: #8a6500; }
.calib-dist-gap.is-over  { color: var(--muted); font-weight: 400; }
.calib-dist-gap.is-onTarget { color: var(--muted); font-weight: 400; }

/* Before -> after band pair, shown in place of the single current-band pill
   once a row has been adjusted -- reuses the app's existing .potential-pill
   look and the same muted arrow colour as .potential-arrow (the Self ->
   After review hero panel elsewhere), just sized for an inline table cell
   instead of a large hero display. */
.calib-band-arrow { font-size: 0.95rem; color: #b7bdcc; margin: 0 2px; vertical-align: middle; }

.calib-adjust-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Acronym-only options, so the control only has to fit two characters plus
   the caret. Every pixel saved here goes to the employee columns, which are
   the ones that actually wrap (long company sublines, two-word departments). */
.calib-band-select { width: auto; min-width: 58px; padding: 6px 24px 6px 9px; font-size: 0.86rem; }
/* Hand the freed width to the employee's own details rather than letting the
   table spread it evenly: the Action column shrinks to its content, floored by
   the super-override textarea so that form stays usable when it renders. */
#calib-table th:last-child, #calib-table td:last-child { width: 1%; }
/* Only bites on the super-admin view, which is the one row shape that has a
   free-text box in this column -- an everyday calibrator's Action cell is just
   the select + note button and stays at its natural ~117px. */
#calib-table td:last-child textarea { min-width: 150px; }
/* Name carries two lines (person + their business unit) where the others carry
   one, so auto layout under-serves it -- left alone it hands the slack to Job
   Title, which has room to spare. Floor Name so the name never breaks mid-value
   and the unit subline wraps at most once, and cap Department / Job Title so
   that width is taken from THEIR slack rather than added to the table, which
   already overflows its wrapper at this column count. */
#calib-table th:first-child, #calib-table td:first-child { min-width: 250px; }
#calib-table td:nth-child(2), #calib-table td:nth-child(3) { max-width: 190px; }
.calib-justification {
  width: 170px; padding: 6px 9px; border: 1px solid #cdd1dd; border-radius: 6px;
  font-size: 0.86rem;
}
/* Auto-save status, replaces what used to be a per-row Save button --
   calibration.js fills this in as "Saving…" / "Saved" / an error message. */
.calib-save-status { font-size: 0.78rem; color: var(--muted); min-width: 46px; }
.calib-save-status.is-error { color: #b3261e; font-weight: 600; }

/* Sticky action bar: the Lock / Reset / Unlock buttons stay pinned to the
   bottom of the viewport so they're always reachable on a laptop without
   scrolling past the (tall) distribution card + roster table. Settles into
   its natural place once you scroll to the very end. Full-bleed to the
   container edges via negative margins so the bar reads as a real footer. */
.calib-actions {
  position: sticky; bottom: 0; z-index: 20;
  margin: 22px -24px 0; padding: 14px 24px;
  /* Right-aligned so the primary actions sit opposite the floating "Back"
     button in the bottom-left corner, never crowding it. */
  justify-content: flex-end; flex-wrap: wrap;
  background: rgba(245,246,250,0.96);
  border-top: 1px solid #e4e7ef;
  box-shadow: 0 -3px 10px rgba(37,42,89,0.05);
  backdrop-filter: blur(2px);
}
@media (max-width: 640px) { .calib-actions { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }

/* --- Calibration: clean OneHR header + per-department roll-up breakdown ---- */
.calib-head { margin-bottom: 18px; }
.calib-breadcrumb { font-size: 0.78rem; font-weight: 600; color: #8a90a2; }
.calib-breadcrumb a { color: #8a90a2; text-decoration: none; }
.calib-breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.calib-title { margin: 4px 0 9px; font-size: 1.5rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.15; }
.calib-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calib-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600; color: #4a5065;
  background: #eef0f6; border-radius: 999px; padding: 4px 11px;
}
.calib-chip--locked { background: #e3f6ee; color: #1b7a55; }
.calib-chip--open   { background: #e0e9fb; color: #1b46b3; }
.calib-chip--wait   { background: #fdecd2; color: #8a5200; }
.calib-head__note { margin: 11px 0 0; font-size: 0.85rem; line-height: 1.5; color: #5f6678; max-width: 780px; }

/* Card titles navy (was the legacy #2557d6 from .admin-card h2) so the
   calibration cards match the single-navy OneHR language. */
#calib-dist-box h2, .calib-dept-box h2 { color: var(--navy); }

/* Per-department roll-up: one row per department -- a stacked Low/Mid/High bar
   (same band palette as the distribution chart), the counts, and an over/under-
   target skew tag. Surfaces which department pulls the company off 15/70/15. */
.calib-dept-box { margin-bottom: 14px; }
.calib-dept-box h2 { font-size: 0.92rem; margin: 0 0 12px; }
.calib-dept-list { display: flex; flex-direction: column; gap: 9px; }
.calib-dept-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: minmax(120px, 1.3fr) minmax(110px, 2fr) auto auto;
}
.calib-dept-name { font-size: 0.85rem; font-weight: 600; color: var(--navy); min-width: 0; }
.calib-dept-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #eef0f6; }
.calib-dept-seg { height: 100%; }
.calib-dept-seg.seg-low  { background: #d19a5c; }
.calib-dept-seg.seg-mid  { background: #7e9edb; }
.calib-dept-seg.seg-high { background: #74b788; }
.calib-dept-counts { font-size: 0.8rem; font-weight: 600; color: #9096a8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calib-dept-counts .cd-low  { color: #8a4500; }
.calib-dept-counts .cd-mid  { color: #1b46b3; }
.calib-dept-counts .cd-high { color: #1d6b34; }
.calib-dept-skew { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.calib-dept-skew--over { background: #fdecd2; color: #8a5200; }
.calib-dept-skew--ok   { background: #e3f6ee; color: #1b7a55; }
@media (max-width: 620px) {
  .calib-dept-row { grid-template-columns: 1fr auto; grid-template-areas: "name skew" "bar counts"; row-gap: 6px; }
  .calib-dept-name { grid-area: name; } .calib-dept-skew { grid-area: skew; justify-self: end; }
  .calib-dept-bar { grid-area: bar; } .calib-dept-counts { grid-area: counts; justify-self: end; }
}

/* Roster readability: a little more row height + subtle zebra + hover, scoped
   to the calibration table so a long roll-up (dozens of rows) is easier to scan. */
#calib-table tbody td { padding-top: 9px; padding-bottom: 9px; }
#calib-table tbody tr.data-row:nth-child(even) { background: #fafbfd; }
#calib-table tbody tr.data-row:hover { background: #f1f3fa; }

/* --- Company (BUCEO) view: department filter + ghost distribution overlay - */
.calib-dist-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 8px; }
.calib-dist-head h2 { margin: 0; }
.calib-deptfilter { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a90a2; }
.calib-deptfilter select { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Two-layer bars: solid = selected department (z2), faded ghost = company (z1). */
#calib-dist-box.dept-mode .calib-dist-fill { position: absolute; left: 0; top: 0; height: 100%; z-index: 2; }
#calib-dist-box.dept-mode .calib-dist-ref { position: absolute; left: 0; top: 0; height: 100%; z-index: 1; border-radius: 999px 0 0 999px; display: none; }
#calib-dist-box.dept-mode .calib-dist-tick { z-index: 3; }
/* Overlay keeps the grew/shrank delta segments (the "increase intensity" cue
   when a band grows on adjust) -- layered above the ghost, below the tick. */
#calib-dist-box.dept-mode .calib-dist-delta-up, #calib-dist-box.dept-mode .calib-dist-delta-down { z-index: 2; }
.calib-ref-low  { background: #ecd3b8; }
.calib-ref-mid  { background: #cdd8ef; }
.calib-ref-high { background: #c3e0cd; }
.calib-dist-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #eef0f5; font-size: 0.7rem; color: #8a90a2; }
.cdl { display: inline-flex; align-items: center; gap: 6px; }
.cdl-sw { width: 16px; height: 9px; border-radius: 3px; display: inline-block; }
.cdl-solid { background: #7e9edb; }
.cdl-faded { background: #cdd8ef; }
.cdl-tick { width: 3px; height: 12px; background: #1f2330; opacity: .5; border-radius: 1px; }

/* Rows hidden by the department filter -- !important so it composes with
   colmenu's own inline display toggles (a row shows only if neither hides it). */
#calib-table tbody tr[data-dept-hidden] { display: none !important; }

/* HOD's-call cell: incoming band + "was X" + a hover popover for the note. */
.calib-hod-cell { white-space: normal; }
.calib-hod-line { display: inline-flex; align-items: center; gap: 6px; }
.calib-was { display: block; margin-top: 3px; font-size: 11px; color: #8a90a2; font-style: italic; }
.calib-note { position: relative; display: inline-flex; align-items: center; }
.calib-note-ic { display: inline-flex; align-items: center; justify-content: center; color: #9aa0b0; cursor: help; }
.calib-note-ic svg { width: 15px; height: 15px; display: block; }
.calib-note:hover .calib-note-ic, .calib-note-ic:focus { color: #1b46b3; }
.calib-note-tip { display: none; position: fixed; left: 0; top: 0; width: 240px; white-space: normal; background: var(--navy); color: #fff; padding: 8px 11px; border-radius: 8px; font-size: 11.5px; line-height: 1.45; font-weight: 400; font-style: normal; z-index: 1200; box-shadow: 0 8px 22px rgba(37,42,89,0.3); }
.calib-note:hover .calib-note-tip, .calib-note-ic:focus + .calib-note-tip { display: block; }
.calib-note-tip .cnt-row { display: block; }
.calib-note-tip .cnt-row + .cnt-row { margin-top: 6px; }
.calib-note-tip .cnt-row strong { font-weight: 700; }

/* Pop-out justification editor: a compact "Add note" button opening a floating
   textarea (shared across the calibration tier views' adjust forms). */
.calib-just-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #e0e3ec; border-radius: 7px; background: #fff; color: #5f6678; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.calib-just-btn svg { width: 14px; height: 14px; flex: none; }
.calib-just-btn:hover { border-color: #c3c8d4; background: #f7f8fc; color: var(--navy); }
.calib-just-btn.has-note { color: var(--navy); border-color: rgba(37,42,89,0.28); background: #f2f4fb; }
/* "Your review" read-out: the HOD's call → your call as before→after pills (the
   same illustration the HOD view uses), shown above the adjust control only
   when the band has actually been changed. */
.calib-outcome { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
/* BGCEO business-unit pills */
.calib-burow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.calib-burow__label { font-size: 13px; color: #5f6678; flex: none; white-space: nowrap; }
.calib-burow__hint { color: #9aa0b0; font-size: 11.5px; }
.calib-bu-scroller { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.calib-bu-pills { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; padding: 2px 0; scrollbar-width: none; -ms-overflow-style: none; }
.calib-bu-pills::-webkit-scrollbar { display: none; }
.bu-pill { flex: none; padding: 6px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: #fff; border: 1px solid #d7dbe6; color: #3a4060; cursor: pointer; font-family: inherit; white-space: nowrap; }
.bu-pill:hover { border-color: #c3c8d4; background: #f7f8fc; }
.bu-pill.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.bu-nav { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #d7dbe6; background: #fff; color: #5f6678; cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.bu-nav:hover { border-color: #c3c8d4; background: #f7f8fc; color: var(--navy); }
.bu-nav[hidden] { display: none; }
/* BGCEO per-BU distribution panels */
.calib-panels { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 18px; }
.calib-panels.is-multi { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.calib-panel { background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; padding: 12px 16px; }
.calib-panel--ref { background: #fafbfd; }
.calib-panel__title { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
/* BGCEO Self→HOD→BUCEO→BGCEO provenance chain */
/* "Potential band" provenance chain: fixed tier slots, labels once in the
   header (same slot width so header labels sit over the row pills). */
.calib-band-th { vertical-align: bottom; }
/* Centred over the tier labels below it rather than left-aligned to the cell --
   the title names the whole chain, so it should sit over the middle of it. */
.cchain-htitle { font-size: 11px; font-weight: 500; color: #5f6678; margin-bottom: 6px; text-align: center; }
.cchain-grid { display: grid; gap: 6px; justify-content: start; align-items: center; }
.cchain-hlabel { font-size: 10px; color: #9aa0b0; text-align: center; }
.cchain-hlabel--own { color: var(--navy); font-weight: 600; }
.cchain-slot { display: inline-flex; justify-content: center; align-items: center; }
.cchain-dash { color: #c9cdd8; }
.cchain-ring { box-shadow: 0 0 0 2px var(--navy); }
.calib-subco { font-size: 11px; color: #9aa0b0; margin-top: 2px; }
.calib-pot-basis { margin-top: 2px; }

/* Set my KPIs, once the scorecard is agreed: the same numbers, visibly settled.
   Muted rather than disabled -- there is no control here to disable, and a
   greyed READ of an agreed decision should still be comfortably readable. The
   KPI name stays at full strength so the page can be scanned for "which KPI",
   which is what people actually come back for. */
.pm-set-agreed .pm-set-table td { color: #6b7186; }
.pm-set-agreed .pm-set-table td strong { color: var(--navy); }
.pm-set-agreed .pm-set-table tfoot td { color: var(--navy); }

/* Performance Management: My Performance table (redesigned from a one-card-
   per-KPI list after benchmarking against Workday/Lattice -- table format,
   single bulk submit, on-demand rating-reference popover). */
.pm-kpi-table th, .pm-kpi-table td { vertical-align: top; }
.pm-kpi-table td { padding-top: 12px; padding-bottom: 12px; }
.pm-kpi-name-row { display: flex; align-items: center; gap: 5px; }
.pm-kpi-name { font-size: 14px; font-weight: 500; margin: 0; }
.pm-kpi-meta { font-size: 12px; color: #9aa0b0; margin: 2px 0 0; }
.pm-info-icon { display: inline-flex; flex: none; color: #9aa0b0; cursor: help; }
.pm-info-icon svg { width: 13px; height: 13px; }
.pm-info-icon:hover, .pm-info-icon:focus-visible { color: var(--navy); }

.pm-result-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-input-unit { position: relative; display: inline-flex; align-items: center; }
.pm-input-unit input { width: 150px; padding: 7px 44px 7px 9px; border: 1px solid #d7dbe6; border-radius: 8px; background: #fff; font-size: 13.5px; font-family: inherit; }
.pm-input-unit span { position: absolute; right: 9px; font-size: 11px; color: #9aa0b0; pointer-events: none; }
.pm-icon-btn { width: 28px; height: 28px; flex: none; border-radius: 7px; border: 1px solid #d7dbe6; background: #fff; color: #5f6678; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pm-icon-btn svg { width: 14px; height: 14px; }
.pm-icon-btn:hover { background: #eef0f6; color: var(--navy); }
/* Capped to .pm-result-cell's own natural width (150px input + 2x28px icon
   buttons + 2x6px gaps = 218px) so opening the note/AI-draft box can never
   widen the "Your Result" column past what the input row already occupies -
   auto table layout otherwise grows the column (and squeezes its
   neighbors) to fit whichever cell content is widest. */
.pm-note-field { margin-top: 8px; max-width: 218px; }
.pm-note-field textarea { width: 100%; border: 1px solid #d7dbe6; border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit; resize: vertical; }
.pm-file-name { margin: 6px 0 0; }
.pm-autosave-status { display: block; margin: 4px 0 0; min-height: 1em; }
.pm-status-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #eef0f3; color: #6b7280; white-space: nowrap; }
.pm-status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Multi-step approval chain stepper (Self -> approver -> approver). Only
   rendered for lines with more than one approver, so single-approver lines
   never show it. Each node is a compact pill; arrows between; per-status
   colour: acted = navy tint, this approver's pending turn = amber (reusing
   the .status-submitted tone), a later step not yet reached = muted. */
.pm-mchain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin: 0 0 8px; }
.pm-mchain-node { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #f4f6fb; border: 1px solid #e4e7ef; font-size: 11px; line-height: 1.4; }
.pm-mchain-lbl { font-weight: 700; color: #6b7280; }
.pm-mchain-val { font-weight: 600; color: #37406b; white-space: nowrap; }
.pm-mchain-val.muted { font-weight: 500; color: #9aa0b0; }
.pm-mchain-arrow { color: #b7bdcc; font-size: 12px; }
.pm-mchain-done_confirm, .pm-mchain-done_adjust { background: rgba(37,42,89,0.06); border-color: rgba(37,42,89,0.2); }
.pm-mchain-done_confirm .pm-mchain-val, .pm-mchain-done_adjust .pm-mchain-val { color: var(--navy); }
.pm-mchain-pending { background: #fff4e2; border-color: #f0cd93; }
.pm-mchain-pending .pm-mchain-lbl, .pm-mchain-pending .pm-mchain-val { color: #8a4500; }
.pm-mchain-future { background: #f4f6fb; border-color: #e6e8ef; opacity: 0.65; }
.pm-mchain .pm-icon-btn { width: 20px; height: 20px; border-radius: 5px; }
.pm-mchain .pm-icon-btn svg { width: 11px; height: 11px; }

.pm-rating-cell { display: flex; align-items: center; gap: 6px; }
.pm-ladder-h { border-collapse: collapse; margin-top: 6px; font-size: 11px; table-layout: fixed; width: 300px; }
.pm-ladder-h th, .pm-ladder-h td { width: 60px; padding: 3px 4px; text-align: center; border: 1px solid #eef0f5; white-space: nowrap; box-sizing: border-box; }
.pm-ladder-h th { font-weight: 700; color: #9aa0b0; background: #f8f9fb; }
.pm-ladder-h td { color: #5f6678; }
.pm-ladder-h td.pm-current { font-weight: 700; font-size: 13px; border-bottom: 2px solid; }
.pm-ladder-h td.pm-current[data-band="UA"] { background: #fbdada; color: #a02323; border-bottom-color: #a02323; }
.pm-ladder-h td.pm-current[data-band="BE"] { background: #fde6cc; color: #8a4500; border-bottom-color: #8a4500; }
.pm-ladder-h td.pm-current[data-band="ME"] { background: #e0e9fb; color: #1b46b3; border-bottom-color: #1b46b3; }
.pm-ladder-h td.pm-current[data-band="AE"] { background: #d7f0e0; color: #1a7a54; border-bottom-color: #1a7a54; }
.pm-ladder-h td.pm-current[data-band="OU"] { background: #d4f5dc; color: #1d6b34; border-bottom-color: #1d6b34; }

/* Team drill-down moderation: the self-rated rung fades toward transparent
   while a manager-typed adjustment becomes the visually prominent one --
   applied ONLY when they land on different rungs; when they're the SAME
   rung, plain .pm-current above is used instead (no dual-highlight, no new
   10-combination band matrix needed). */
.pm-ladder-h td.pm-current-self { font-weight: 400; opacity: 0.4; }
.pm-ladder-h td.pm-current-self[data-band="UA"] { background: #fbdada; color: #a02323; }
.pm-ladder-h td.pm-current-self[data-band="BE"] { background: #fde6cc; color: #8a4500; }
.pm-ladder-h td.pm-current-self[data-band="ME"] { background: #e0e9fb; color: #1b46b3; }
.pm-ladder-h td.pm-current-self[data-band="AE"] { background: #d7f0e0; color: #1a7a54; }
.pm-ladder-h td.pm-current-self[data-band="OU"] { background: #d4f5dc; color: #1d6b34; }
.pm-ladder-h td.pm-current-adjusted { font-weight: 800; font-size: 14px; border-bottom: 3px solid; box-shadow: inset 0 0 0 1px currentColor; }
.pm-ladder-h td.pm-current-adjusted[data-band="UA"] { background: #fbdada; color: #a02323; border-bottom-color: #a02323; }
.pm-ladder-h td.pm-current-adjusted[data-band="BE"] { background: #fde6cc; color: #8a4500; border-bottom-color: #8a4500; }
.pm-ladder-h td.pm-current-adjusted[data-band="ME"] { background: #e0e9fb; color: #1b46b3; border-bottom-color: #1b46b3; }
.pm-ladder-h td.pm-current-adjusted[data-band="AE"] { background: #d7f0e0; color: #1a7a54; border-bottom-color: #1a7a54; }
.pm-ladder-h td.pm-current-adjusted[data-band="OU"] { background: #d4f5dc; color: #1d6b34; border-bottom-color: #1d6b34; }
.calib-just-editor { position: absolute; z-index: 1100; width: 300px; max-width: 92vw; background: #fff; border: 1px solid #cdd1dd; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 10px; }
.calib-just-editor[hidden] { display: none; }
.calib-just-editor .cje-text { width: 100%; box-sizing: border-box; border: 1px solid #cdd1dd; border-radius: 7px; padding: 8px 9px; font: inherit; font-size: 0.86rem; line-height: 1.45; resize: vertical; min-height: 76px; color: #1f2330; }
.calib-just-editor .cje-text:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,.15); }
.calib-just-editor .cje-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.calib-just-editor .cje-foot button { padding: 6px 14px; border-radius: 6px; font-size: 0.83rem; font-weight: 600; cursor: pointer; border: 1px solid #cdd1dd; background: #fff; color: #1f2330; }
.calib-just-editor .cje-foot .cje-done { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Name hover -> potential score reference (the score column was removed from
   the BUCEO view; a dotted underline flags the hover/tap affordance). */
.calib-name { position: relative; border-bottom: 1px dotted #b7bdcc; cursor: help; outline: none; }
.calib-name-tip { display: none; position: absolute; left: 0; bottom: calc(100% + 7px); white-space: nowrap; background: var(--navy); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 400; z-index: 40; box-shadow: 0 8px 22px rgba(37,42,89,0.3); }
.calib-name-tip strong { font-weight: 700; }
.calib-name-tip::after { content: ""; position: absolute; top: 100%; left: 14px; border: 5px solid transparent; border-top-color: var(--navy); }
.calib-name:hover .calib-name-tip, .calib-name:focus .calib-name-tip { display: block; }

/* Reporting dashboard (/admin/reports) -- band-distribution cuts with the
   percentage rendered INSIDE each segment. Same 3-colour family as
   .calib-dist-low/mid/high (itself a third of the way from .potential-pill's
   pale border toward its dark text tone), just tall enough here to hold a
   legible in-bar label -- no new colours. */
.rpt-cut-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid #e6e8f0; }
.rpt-cut-row:last-child { border-bottom: none; }
.rpt-cut-name { font-size: 0.9rem; font-weight: 500; }
.rpt-cut-n { display: block; margin-top: 1px; }
.rpt-view-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin-left: 2px; border: none; background: none; color: #6b7186; border-radius: 4px; cursor: pointer; vertical-align: -5px; }
.rpt-view-btn:hover { background: #eef0f6; color: #2557d6; }
.rpt-cut-bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; background: #eef0f6; }
.rpt-seg { display: flex; align-items: center; justify-content: center; min-width: 0; }
.rpt-seg-label { font-size: 0.72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.rpt-seg[data-band="Low"]  { background: #d19a5c; }
.rpt-seg[data-band="Mid"]  { background: #7e9edb; }
.rpt-seg[data-band="High"] { background: #74b788; }

/* Module completion bar. Same three states as the status pills next to it
   (complete / in progress / not started), so the bar and the legend below it
   are read as one thing rather than two colour systems. */
.rpt-seg.seg-done    { background: #74b788; }
.rpt-seg.seg-active  { background: #7e9edb; }
.rpt-seg.seg-pending { background: #d19a5c; }
.rpt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
.rpt-dot[data-band="Low"]  { background: #d19a5c; }
.rpt-dot[data-band="Mid"]  { background: #7e9edb; }
.rpt-dot[data-band="High"] { background: #74b788; }

.rpt-principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .rpt-principles-grid { grid-template-columns: 1fr; } }
.rpt-principles-col-title { text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px; }
.rpt-principle-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e6e8f0; }
.rpt-principle-row:last-child { border-bottom: none; }
.rpt-rank-badge { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
.rpt-rank-badge.strong { background: #e3f6ee; color: #1b7a55; }
.rpt-rank-badge.weak { background: #fcf1de; color: #8a5a10; }
.rpt-principle-name { flex: 1; font-size: 0.9rem; }
.rpt-principle-tag { display: block; font-size: 0.78rem; color: #5f6678; font-style: italic; margin-top: 2px; }
.rpt-principle-pct { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Talent Box: performance (x) x potential (y) grid ---------------------
   Plain CSS grid, no charting library -- same discipline as .calib-dist-bar
   and .rpt-cut-bar. Category colours are the user's own mockup palette. */
.tbox-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #e4e7ef; margin: 0 0 16px; }
.tbox-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-size: 0.9rem; color: #5f6678; cursor: pointer; text-decoration: none; }
a.tbox-tab { line-height: 1.4; }
.tbox-tab:hover { color: var(--navy); }
.tbox-tab.is-active { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }

.tbox-axis-title { font-size: 0.8rem; font-weight: 600; color: #5f6678; margin: 0 0 6px; }
.tbox-axis-x { text-align: right; margin: 6px 0 0; }
.tbox-wrap { display: flex; gap: 8px; align-items: stretch; }
.tbox-ylab { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; flex: none; width: 26px; }
.tbox-ylab-cell { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 0.75rem; color: #5f6678; }
.tbox-grid { flex: 1; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Column count follows the view: 3 in the 9-box default, 5 in the 15-box. */
.tbox-grid-9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tbox-grid-15 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tbox-xlab { display: grid; gap: 8px; margin-top: 6px; }
.tbox-xlab-9 { grid-template-columns: 26px repeat(3, minmax(0, 1fr)); }
.tbox-xlab-15 { grid-template-columns: 26px repeat(5, minmax(0, 1fr)); }
.tbox-xlab-cell { text-align: center; font-size: 0.78rem; color: #5f6678; }

.tbox-cell { border: 1px solid #e4e7ef; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; min-height: 150px; background: #fff; }
.tbox-cell-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 9px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }
.tbox-cell-n { font-variant-numeric: tabular-nums; opacity: 0.9; }
/* Capped so one crowded cell can't stretch the whole grid -- a BG can hold
   ~1,000 people and the middle column takes most of them. */
.tbox-cell-body { padding: 6px; display: flex; flex-direction: column; gap: 3px; max-height: 210px; overflow-y: auto; }
.tbox-card { display: flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #e4e7ef; border-radius: 6px; padding: 4px 7px; font-size: 0.8rem; }
.tbox-card-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbox-card-flag { color: var(--navy); font-size: 0.55rem; flex: none; }

/* Per-cell reference target in the cell head, and the reference grid that
   explains where those numbers come from. */
.tbox-cell-head-right { display: inline-flex; align-items: baseline; gap: 6px; }
.tbox-cell-pct { font-size: 0.72rem; font-weight: 600; opacity: 0.9; }
.tbox-cell-ref { font-size: 0.66rem; font-weight: 600; padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,0.22); }
.tbox-cell-ref.is-over { background: rgba(255,255,255,0.34); }
.tbox-cell-ref.is-under { background: rgba(0,0,0,0.16); }

/* Names two-up and five rows deep, then scroll. One column meant a cell was as
   tall as its longest list and the grid ran off the screen; the whole point of
   a box is seeing all nine at once. */
.tbox-cell-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  align-content: start; max-height: 150px; overflow-y: auto;
}
.tbox-card { min-width: 0; }
.tbox-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1080px) { .tbox-cell-body { grid-template-columns: 1fr; } }

/* The company row's pills are links here (server-side filter) rather than the
   buttons the calibration pages use, so they need the anchor reset. */
.calib-bu-pills a.bu-pill { text-decoration: none; }

/* Reference guideline: above the grid, collapsible. */
.tbox-ref { margin: 0 0 14px; padding: 0; background: #fff;
  border: 1px solid rgba(37,42,89,0.08); border-radius: 10px; }
.tbox-ref > summary { list-style: none; cursor: pointer; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tbox-ref > summary::-webkit-details-marker { display: none; }
.tbox-ref > summary:hover { background: #f7f9fd; border-radius: 10px; }
/* The old ::before triangle was easy to miss on a bar this wide. A real
   chevron in a tinted disc, plus a "Show details" affordance at the far end,
   makes it read as an expandable row rather than a static caption. */
.tbox-ref-chev {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef1f9; color: var(--navy);
  transition: transform 0.15s ease, background 0.15s ease;
}
.tbox-ref-chev svg { width: 12px; height: 12px; }
.tbox-ref[open] > summary .tbox-ref-chev { transform: rotate(90deg); background: #e0e6f7; }
.tbox-ref-more {
  margin-left: auto;                  /* the summary's right-hand anchor */
  font-size: 0.72rem; font-weight: 600; color: var(--navy);
  border: 1px solid rgba(37,42,89,0.16); border-radius: 999px; padding: 3px 10px;
}
/* .tbox-capchip carries its own margin-left:auto for other contexts; inside
   this summary the "Show details" pill is the right-hand anchor instead. */
.tbox-ref > summary .tbox-capchip { margin-left: 0; }
.tbox-ref[open] > summary .tbox-ref-more-show,
.tbox-ref:not([open]) > summary .tbox-ref-more-hide { display: none; }
/* Collapsed-state summary of the adjustment: the same per-category deltas the
   expanded "How many to move" block shows, small enough to sit inline. */
/* Move dialog: before -> after on both axes, so a drag is reviewed rather
   than just executed. Two equal panels either side of an arrow; the "after"
   panel is tinted so the eye lands on the outcome. */
.tbox-ba {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  gap: 10px; margin: 14px 0 0;
}
.tbox-ba__side {
  background: #f4f6fb; border: 1px solid rgba(37,42,89,0.08);
  border-radius: 9px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tbox-ba__side.is-after { background: #eef3ff; border-color: rgba(37,87,214,0.22); }
.tbox-ba__lbl {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8b93a7;
}
.tbox-ba__cat { font-size: 0.92rem; font-weight: 600; color: var(--navy); }
.tbox-ba__side.is-after .tbox-ba__cat { color: #1b46b3; }
.tbox-ba__bands { font-size: 0.74rem; color: #5f6678; }
.tbox-ba__bands .is-same { color: #a3a9b8; }   /* axis this move doesn't touch */
.tbox-ba__arrow { align-self: center; color: #9aa0b0; }
.tbox-ba__arrow svg { width: 20px; height: 20px; display: block; }
/* .modal-card p sets its own colour and beats a bare class selector, so this
   is qualified to win inside the dialog it actually lives in. */
.modal-card p.tbox-ba__delta {
  margin: 9px 0 0; font-size: 0.78rem; font-weight: 600; color: #1b46b3;
}
.modal-card p.tbox-ba__delta.is-none { font-weight: 400; color: #8b93a7; }
@media (max-width: 520px) {
  .tbox-ba { grid-template-columns: 1fr; }
  .tbox-ba__arrow { transform: rotate(90deg); justify-self: center; }
}

.tbox-ref-mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tbox-delta-mini {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 0.72rem; color: #3a4060;
  background: #f1f3f9; border-radius: 999px; padding: 3px 9px;
}
.tbox-delta-mini b { font-size: 0.76rem; font-weight: 700; color: var(--navy); }
.tbox-delta-mini.is-on { color: #6a7183; background: #eef6f0; }
.tbox-ref-title { font-size: 0.82rem; font-weight: 600; color: var(--navy);
  letter-spacing: 0.01em; }
.tbox-ref-body { padding: 0 16px 14px; }

/* Calibration-time pins in the person panel. Deliberately quiet: they are
   notes taken while calibrating, not the decision the panel exists for, so
   they sit under the move form rather than competing with it. */
.tbox-tags {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e4e7ef;
}
.tbox-tags__head { margin: 0 0 8px; font-weight: 600; }
.tbox-tag {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px;
  font-size: 0.9rem; cursor: pointer;
}
.tbox-tag input { margin-top: 3px; flex: 0 0 auto; }
#tbox-tag-promo-fields input {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  border: 1px solid #d7dbe6; border-radius: 7px; font: inherit; font-size: 0.86rem;
}
.tbox-ref-sub { margin: 12px 0 6px; font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: #9aa0b0; }
.tbox-ref-cap { margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(37,42,89,0.07); }
.tbox-capchip { margin-left: auto; font-size: 0.72rem; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; background: #eef1f7; color: #5f6678; }
.tbox-capchip.is-full { background: #fbeceb; color: #b4483f; }

/* How many people each category is away from its reference share. The chip
   borrows its category colour so it reads against the grid below it. */
.tbox-deltas { display: flex; flex-wrap: wrap; gap: 8px; }
.tbox-delta { display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 7px; font-size: 0.76rem; }
.tbox-delta-cat { font-weight: 500; color: #3a4060; }
.tbox-delta-n { font-weight: 700; font-size: 0.82rem; color: var(--navy); }
.tbox-delta.is-on .tbox-delta-n { font-weight: 500; font-size: 0.72rem; color: #7f8694; }

.tbox-refgrid { display: grid; gap: 3px; max-width: 520px; }
.tbox-refgrid-9 { grid-template-columns: repeat(3, 1fr); }
.tbox-refgrid-15 { grid-template-columns: repeat(5, 1fr); }
.tbox-refcell { background: #f1f3f9; border-radius: 5px; padding: 5px 4px;
  text-align: center; font-size: 0.72rem; font-weight: 600; color: #5f6678; }

.tbox-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0;
  font-size: 0.78rem; color: #5f6678; align-items: center; }
.tbox-legend > span { display: inline-flex; align-items: center; gap: 5px; }

/* The lock is the end of the job -- keep it on screen rather than at the far
   end of a long roster, matching the potential-calibration pages. */
.tbox-lockbar {
  position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 12px 18px; background: #fff;
  border: 1px solid rgba(37,42,89,0.10); border-radius: 10px;
  box-shadow: 0 -4px 14px rgba(37,42,89,0.08);
}

/* Talent Box filter bar. Server-side filters, so this is a real form rather
   than a row of JS toggles. */
.tbox-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  margin: 0 0 14px; padding: 12px 16px; }
.tbox-filter { display: flex; flex-direction: column; gap: 4px; }
.tbox-pickbtn { text-align: left; cursor: pointer; min-width: 150px; }
.tbox-filter-note { flex-basis: 100%; margin: 2px 0 0; }

/* Moved this session: sorted to the top of its cell (server-side) and given a
   navy left edge, so the round's decisions read at a glance with no toggle. A
   single accent rather than a fill -- the cell's category colour has to stay
   the thing the eye groups by. */
/* inset shadow, not border-left: .tbox-card already has a 1px border, so a
   thicker left edge would shift this card's text out of line with the
   unmoved ones beside it. */
.tbox-card.is-moved { box-shadow: inset 3px 0 0 var(--navy); }

.tbox-card-move { flex: none; font-size: 0.72rem; font-weight: 700; line-height: 1; }
.tbox-card-move.is-up { color: #1f7a4d; }
.tbox-card-move.is-down { color: #b4483f; }

/* A recorded decision on the card itself -- the grid is where a calibrator
   scans, so "who's already on a PIP / already proposed" has to be visible
   without opening every person. */
.tbox-card-act {
  flex: none; font-size: 0.6rem; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 4px; letter-spacing: 0.02em;
}
.tbox-card-act.is-pip { background: #fbeceb; color: #b4483f; }
.tbox-card-act.is-promo { background: #e6f4ec; color: #1f7a4d; }

.tbox-act-check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.tbox-act-check input { margin-top: 3px; flex: none; }

.tbox-cat-pip-improvement .tbox-cell-head { background: #b4483f; }
.tbox-cat-pip-improvement { background: #fbeceb; }
.tbox-cat-solid-core .tbox-cell-head { background: #24406e; }
.tbox-cat-solid-core { background: #eaf0f9; }
.tbox-cat-star .tbox-cell-head { background: #3f8377; }
.tbox-cat-star { background: #e9f3f1; }
.tbox-cat-super-star .tbox-cell-head { background: #b28c2b; }
.tbox-cat-super-star { background: #faf3e2; }

@media (max-width: 900px) {
  /* Five columns can't survive a phone; scroll the grid rather than crush it. */
  .tbox-wrap, .tbox-xlab { overflow-x: auto; }
  .tbox-grid-15 { min-width: 760px; }
}

/* Talent Box drag affordances (native HTML5 drag -- no library). */
.tbox-grip { color: #b9bfcc; cursor: grab; font-size: 0.65rem; letter-spacing: -2px; flex: none; }
.tbox-card[draggable="true"] .tbox-card-name { cursor: pointer; }
.tbox-card.tbox-dragging { opacity: 0.4; }
.tbox-cell.tbox-over { outline: 2px dashed var(--navy); outline-offset: -3px; }

/* IDP 70:20:10 -- one column per development mode. The percentages are shown
   as labels only; nothing validates against them (see PM_IDP_MODES). */
.idp-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.idp-mode { border: 1px solid #e4e7ef; border-radius: 10px; padding: 9px 10px; background: #fff; }
.idp-mode-head { margin: 0 0 6px; font-size: 0.78rem; font-weight: 500; color: #5f6678; }
.idp-mode-pct {
  display: inline-block; min-width: 34px; margin-right: 4px; padding: 1px 6px;
  border-radius: 999px; background: var(--navy); color: #fff;
  font-size: 0.68rem; font-variant-numeric: tabular-nums; text-align: center;
}
/* The 70% column carries the weight, so it reads first. */
.idp-mode:first-child { background: #f7f8fd; border-color: #d8ddf0; }
@media (max-width: 860px) {
  .idp-modes { grid-template-columns: 1fr; }
}

/* IDP check-in: per-goal progress on a committed plan. */
.idp-progress { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e4e7ef; }
.idp-prog-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.idp-prog-btn {
  border: 1px solid #d7dbe6; background: #fff; color: #5f6678;
  border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; cursor: pointer;
  font-family: inherit;
}
.idp-prog-btn:hover { border-color: var(--navy); color: var(--navy); }
.idp-prog-btn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.idp-prog-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- Talent Box distribution (actual vs target, both axes) ---------------
   Segmented bar + a headcount gap per bucket. The gap is the actionable
   number: "+3 over" is something a calibration meeting can act on, where
   "42% vs 15%" still needs arithmetic doing in someone's head. */
.tbox-dists { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 14px; }
@media (max-width: 900px) { .tbox-dists { grid-template-columns: 1fr; } }
.tbox-dist-title { margin: 0 0 6px; font-weight: 600; font-size: 13.5px; }
.tbox-dist-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden;
                 background: #eef0f5; }
.tbox-dist-seg { display: flex; align-items: center; justify-content: center;
                 font-size: 11px; font-weight: 700; color: #fff; }
/* Left-to-right is worst-to-best on both axes, so one ramp serves both. */
.tbox-dist-1 { background: #d19a5c; }
.tbox-dist-2 { background: #7e9edb; }
.tbox-dist-3 { background: #74b788; }
.tbox-dist-4 { background: #4f9e6a; }
.tbox-dist-5 { background: #2f7d4f; }
.tbox-dist-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
                    font-size: 12.5px; }
.tbox-dist-key { display: inline-flex; align-items: center; gap: 5px; }
.tbox-dist-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tbox-gap { font-weight: 700; font-size: 11.5px; padding: 1px 6px; border-radius: 10px; }
.tbox-gap.is-over { background: #fde6cc; color: #8a4500; }
.tbox-gap.is-under { background: #e0e9fb; color: #1b46b3; }
.tbox-gap.is-on { background: #d7f0e0; color: #1a7a54; }

/* --- Calibration report viewer (shared by both calibration modules + the
   Talent Box). The report is evidence read beside a decision, so it opens in a
   modal rather than a page: the calibrator keeps their place in the grid or
   the table, and a half-composed move survives reading it. */
.calib-rep-ic { border: 0; background: none; padding: 0; margin-left: 5px; color: #9aa0b0; cursor: pointer; display: inline-flex; vertical-align: middle; }
.calib-rep-ic svg { width: 15px; height: 15px; display: block; }
.calib-rep-ic:hover, .calib-rep-ic:focus { color: #1b46b3; }
.calib-rep-link { font-size: 0.86rem; }
/* Wider and height-capped: these fragments carry a full KPI table or seven
   principles of agreement bars, which a form-sized modal card would crush. */
.calib-rep-card { max-width: 860px; width: calc(100vw - 48px); }
#calib-rep-body { max-height: min(72vh, 640px); overflow-y: auto; }
.calib-rep-eyebrow { margin: 0; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa0b0; }
.calib-rep-name { margin: 2px 0 0; font-size: 1.15rem; }
.calib-rep-meta { margin: 3px 0 14px; }
.calib-rep-hero { display: flex; flex-direction: column; gap: 3px; background: #f8fafd; border: 1px solid #e6e8f0; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.calib-rep-hero-lbl { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7186; }
.calib-rep-hero-val { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.calib-rep-table th, .calib-rep-table td { font-size: 0.86rem; vertical-align: top; }
.calib-rep-crit { border-top: 1px solid #eef0f5; padding-top: 12px; margin-top: 12px; }
.calib-rep-crit-name { margin: 0 0 2px; font-weight: 600; font-size: 0.95rem; }
.tbox-move-reports { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

/* ---------------------------------------------------------------------------
   Technical competency
   The rating control, the info tooltip, the AI-draft widget, the banners and
   the modals are all the 360 assessment's own classes, reused rather than
   restyled -- the two pages are the same act of judgement and should not look
   like two different products. Only what is genuinely new is below.
   --------------------------------------------------------------------------- */
/* The competency form reuses the 360's own .criterion / .crit-head /
   .stmt-table / .crit-comment furniture -- only what is genuinely different
   is below. */
.stmt-sub { display: block; margin: 2px 0 0 38px; color: #6b7186; font-size: 0.84rem; }
/* Manager review: the report's own answer sits beside the manager's control. */
.tc-review-table thead th {
  padding: 0 6px 6px; text-align: right; font-size: 0.72rem; letter-spacing: .04em;
  text-transform: uppercase; color: #8a93a6; font-weight: 600; border-bottom: 1px solid #eef0f5;
}
.tc-review-table thead th:first-child { text-align: left; }
.tc-selfcol { width: 120px; text-align: right; white-space: nowrap; }
.tc-self-answer { color: #4a5066; font-size: 0.9rem; }
/* Ringed where the manager moved it, the same "changed" signal the old table
   used -- the difference has to stay visible at a glance. */
.tc-self-answer.is-moderated {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #fdf0e3; color: #8a4500; box-shadow: 0 0 0 1px #f3c186;
}
/* Their comment and the manager's own, both right-aligned under the table. */
.tc-remark-row {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e4e7ef;
  display: flex; flex-direction: column; gap: 8px;
}
.tc-remark-row .crit-comment { margin-top: 0; padding-top: 0; border-top: 0; }
/* Two sibling tables (To review / Completed) must line up, same reason and same
   fixed-column idiom as .pm-team-table. */
.tc-team-table { table-layout: fixed; }
.tc-team-table th:nth-child(1), .tc-team-table td:nth-child(1) { width: 55%; }
.tc-team-table th:nth-child(2), .tc-team-table td:nth-child(2) { width: 27%; }
.tc-team-table th:nth-child(3), .tc-team-table td:nth-child(3) { width: 18%; }
/* The manager departed from the self-rating: ring it so the difference is
   visible without comparing two columns by eye. */
.rating-buttons.is-moderated { box-shadow: 0 0 0 2px rgba(37, 42, 89, 0.25); border-radius: 9px; }
.ai-status { font-size: 0.78rem; color: var(--muted); margin-left: 6px; }

/* --- Post-lock decision pages (PIP candidates / promotion list) -------------
   The Talent Box decides bands; these two pages decide what follows from them.
   They share one header, one table shape and one popup, so moving between them
   is the same page with a different question. Colours are reused from the box's
   own category palette rather than a second set -- "Star" must look like Star
   everywhere. */
.tdec-tabs { display: flex; gap: 4px; margin: 0 0 14px; flex-wrap: wrap; }
.tdec-tab {
  padding: 6px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 500;
  color: var(--muted); text-decoration: none; border: 1px solid #e4e7ef;
  background: #fff;
}
.tdec-tab:hover { background: #f4f6fb; }
.tdec-tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

.tdec-notice {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 0.88rem;
  background: #f4f6fb; border: 1px solid #e4e7ef; color: var(--muted);
}
.tdec-notice--warn { background: #fff9e8; border-color: #f0dca8; color: #7a5a10; }

.tdec-table td { vertical-align: top; }
.tdec-remark {
  width: 100%; min-width: 130px; box-sizing: border-box; resize: vertical;
  font-family: inherit; font-size: 0.85rem; padding: 6px 8px;
  border: 1px solid #d7dbe6; border-radius: 6px;
}
.tdec-toggle { display: flex; gap: 6px; align-items: center; font-size: 0.85rem; }
.tdec-confirm { display: grid; gap: 4px; margin-top: 6px; }
.tdec-confirm input {
  width: 100%; box-sizing: border-box; font-size: 0.82rem; padding: 4px 6px;
  border: 1px solid #d7dbe6; border-radius: 6px;
}
/* Icon buttons: no chrome until hovered, so a row of them reads as text
   affordances rather than a toolbar. */
.tdec-icon {
  border: 0; background: none; padding: 2px 4px; cursor: pointer;
  color: var(--muted); line-height: 1; vertical-align: middle;
}
.tdec-icon:hover { color: var(--navy); background: #f0f2f8; border-radius: 4px; }

.tdec-cat {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.tdec-cat--pip-improvement { background: #fbdada; color: #a02323; }
.tdec-cat--solid-core { background: #e0e5f5; color: #2c3563; }
.tdec-cat--star { background: #d7f0e0; color: #1a7a54; }
.tdec-cat--super-star { background: #fdf0cc; color: #8a6400; }

/* WHICH roles put this person forward. The set of roles is the argument -- a
   line manager and their HOD both saying yes is a different case from one of
   them saying it twice as loudly -- so the chips carry the labels, and the
   header column says what they are. */
.tdec-nomrole {
  display: inline-block; padding: 1px 7px; margin-right: 3px;
  border-radius: 999px; background: var(--navy); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap;
}
.tdec-auto {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #eef0f5; color: #5f6678; font-size: 0.75rem; font-weight: 600;
}
/* The name column carries a two-line subline (unit · department), so it needs
   room -- without a floor the browser squeezes it to the width of the longest
   word and wraps a person's name across four lines. */
.tdec-table td:first-child, .tdec-table th:first-child { min-width: 170px; }
.tdec-table th { white-space: nowrap; }
/* Icons sit on the same line as the status pill they annotate, never wrapping
   below it -- a lone icon under a pill reads as an unrelated control. */
.tdec-status-cell { white-space: nowrap; }
/* Stage state on the toggle: amber while a stage is still open, green once it
   is confirmed -- so the strip answers "where is this scope up to" without
   opening each page. */
.tdec-tab { display: inline-flex; align-items: center; gap: 7px; }
.tdec-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0a800; flex: 0 0 auto; }
.tdec-dot.is-done { background: #2f9e63; }
.tdec-tab.is-active .tdec-dot { box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }

/* --- Promotion nomination -------------------------------------------------
   Raised outside the season. Amber rather than navy: it isn't part of this
   round's list, and it should read as the exception it is. */
.tdec-offcycle {
  display: inline-block; margin-left: 4px; padding: 1px 8px;
  border-radius: 999px; background: #fff3d6; color: #8a5a10;
  border: 1px solid #f0dca8; font-size: 0.72rem; font-weight: 600;
  white-space: nowrap;
}
/* The long tail of nominable people, collapsed by default so the handful the
   record actually points at isn't buried under a whole business unit. */
.nom-rest > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  cursor: pointer; font-weight: 600; color: var(--navy); list-style: none;
}
.nom-rest > summary::-webkit-details-marker { display: none; }
.nom-rest > summary::before {
  content: "\25B8"; color: #9aa0b0; font-weight: 400; margin-right: 6px;
  transition: transform .15s ease;
}
.nom-rest[open] > summary::before { content: "\25BE"; }
.nom-rest > summary:hover { color: #000; }

/* Promotion nomination: the row is a checkbox, the proposal is a dialog. Stacked
   label-over-control, since three fields read better as a column than as a form
   grid at this size. */
.nom-field { display: block; margin-bottom: 12px; }
/* A class-set display beats [hidden]'s UA rule, so the Occasion field would
   show on the season page where it means nothing. Same trap the AI-draft
   widget hit; stated here so the next .nom-field doesn't repeat it. */
.nom-field[hidden] { display: none; }
.nom-field > span:first-child { display: block; font-weight: 500; font-size: 13.5px;
  margin-bottom: 4px; }
.nom-field .modern-select, .nom-field textarea { width: 100%; box-sizing: border-box; }
.nom-field textarea { padding: 8px 10px; border: 1px solid #d7dbe6; border-radius: 8px;
  font-family: inherit; font-size: 13.5px; resize: vertical; }
.nom-field .muted.small { display: block; margin-top: 4px; }
.nom-summary p { font-size: 13.5px; }

/* ---- Career map (idp_career.html) -------------------------------------
   Lanes of role cards rather than a node graph: a graph needs a layout
   engine and a library, and the question people actually ask of this
   screen -- "what could I do next, and what would it take" -- is a
   ranked list per direction, which CSS grid answers directly. */
.cmap-eyebrow { margin: 0; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8a90a6; font-weight: 600; }
.cmap-here, .cmap-target { border: 1px solid #e4e7ef; border-radius: 10px;
  padding: 14px 16px; margin: 0 0 4px; background: #fbfbfe; }
.cmap-target { border-color: var(--navy); background: #f4f6fd; }
.cmap-here-title { margin: 2px 0 0; font-weight: 600; font-size: 1rem; color: var(--navy); }
.cmap-selfnote { font-style: italic; }
.cmap-lane-title { margin: 0 0 2px; font-size: 0.86rem; font-weight: 600;
  color: var(--navy); letter-spacing: 0.01em; }
/* One row per group, scrolled sideways, rather than a wrapping grid: nine
   roles wrapped to three ragged rows and buried the ranking the groups exist
   to express. Fixed-width columns so the arrows can page by exactly one card,
   and snapping so a paged row never rests mid-card. */
.cmap-lane { display: grid; gap: 12px; grid-auto-flow: column;
  grid-auto-columns: minmax(288px, 320px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 14px 2px 8px; margin: -12px -2px 4px; }
.cmap-role { scroll-snap-align: start; }
.cmap-lane::-webkit-scrollbar { height: 8px; }
.cmap-lane::-webkit-scrollbar-thumb { background: #d7dbe6; border-radius: 999px; }
.cmap-lane-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin: 20px 0 8px; }
.cmap-nav { display: flex; gap: 6px; flex: none; }
.cmap-nav-btn { width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid #d7dbe6; background: #fff; color: var(--navy);
  font-size: 1rem; line-height: 1; display: grid; place-items: center; }
.cmap-nav-btn:hover:not(:disabled) { background: #f1f3f9; }
.cmap-nav-btn:disabled { opacity: .35; cursor: default; }
/* A column so the action sits on the card's foot. Grid stretches every card
   in a row to the tallest, and with the gap list open on the closest roles
   that left the buttons floating at four different heights. */
.cmap-role { border: 1px solid #e4e7ef; border-radius: 10px; padding: 14px 16px;
  background: #fff; position: relative; display: flex; flex-direction: column; }
.cmap-role-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cmap-role-title { margin: 0; font-weight: 600; font-size: 0.94rem; color: var(--navy); }
.cmap-pin { color: #b28c2b; }
.cmap-match { font-size: 0.72rem; color: #5f6678; white-space: nowrap; }
/* Readiness is the card's headline number -- how much of THAT role you already
   hold. Sized to be the first thing read, since it is the one figure a person
   can act on. */
.cmap-ready { font-size: 1.3rem; font-weight: 700; color: var(--navy);
  line-height: 1; white-space: nowrap; text-align: right; }
.cmap-ready s { display: block; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: #8a90a6;
  text-decoration: none; margin-top: 3px; }
/* Three segments in one track: held / hold-but-not-deep-enough / never
   assessed. Same three states the skill list uses, same three colours. */
.cmap-bar { height: 9px; border-radius: 999px; background: #eceef5;
  overflow: hidden; display: flex; }
.cmap-bar b { display: block; height: 100%; }
.cmap-bar b.is-met { background: #3f8377; }
.cmap-bar b.is-stretch { background: #d19a5c; }
.cmap-bar b.is-missing { background: #dfe3ec; }
.cmap-legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 7px 0 0;
  font-size: 0.75rem; color: #5f6678; }
.cmap-legend i { width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 5px; }
.cmap-legend i.is-met { background: #3f8377; }
.cmap-legend i.is-stretch { background: #d19a5c; }
.cmap-legend i.is-missing { background: #dfe3ec; }
/* The target is a commitment, so it reads as one: its own card is marked in
   place rather than repeated in a separate panel above the list. */
.cmap-role.is-target { border-color: #b28c2b; background: #fffdf4; }
.cmap-flag { position: absolute; top: -10px; right: 14px; background: #b28c2b;
  color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.cmap-chip { display: inline-flex; align-items: center; gap: 6px;
  background: #fdf6e3; color: #8a6410; border: 1px solid #f0dfae;
  border-radius: 999px; padding: 3px 10px; font-size: 0.74rem; font-weight: 600; }
.cmap-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; }
/* One role asking for twenty competencies must not set the height of the whole
   row -- past a point the list scrolls inside its own card. */
.cmap-skills { max-height: 176px; overflow-y: auto; }
/* One bar, three states, same widget as everywhere else in the app: the
   fill is what you already hold, the track is what is left. */
.cmap-bar { height: 8px; border-radius: 999px; background: #eceef5; overflow: hidden; }
.cmap-bar-fill { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.cmap-detail { margin-top: 8px; }
.cmap-detail summary { cursor: pointer; font-size: 0.78rem; color: #5f6678; }
.cmap-skills { list-style: none; margin: 8px 0 0; padding: 0; }
.cmap-skill { display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0 4px 10px; border-left: 3px solid transparent; font-size: 0.8rem; }
.cmap-skill.is-met { border-left-color: #3f8377; }
.cmap-skill.is-stretch { border-left-color: #d19a5c; }
.cmap-skill.is-missing { border-left-color: #b4483f; }

/* ---- Career profile: progress + save state + map-to-form prefill --------
   The profile is six free-text boxes people fill over weeks, so it needs to
   say how far through they are and prove it has kept what they wrote. */
/* Sticky, because its whole job is to be an indicator while you are filling
   the fields further down -- scrolled off the top it tells you nothing. The
   topbar is static (not fixed), so top:0 sits clear of it. */
.cp-bar { position: sticky; top: var(--topbar-h); z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e4e7ef; border-radius: 10px;
  padding: 10px 14px; margin: 26px 0 18px;
  box-shadow: 0 2px 8px rgba(20, 25, 60, .06); }
.cp-track { height: 7px; border-radius: 999px; background: #eceef5;
  flex: 1; min-width: 180px; overflow: hidden; }
.cp-track b { display: block; height: 100%; background: var(--navy);
  border-radius: 999px; transition: width .18s ease; }
.cp-saved { font-size: 0.82rem; font-weight: 600; color: #8a90a6; min-width: 90px;
  text-align: right; }
.cp-saved.is-saving { color: #8a90a6; }
.cp-saved.is-ok { color: #3f8377; }
.cp-saved.is-err { color: #b4483f; }
/* The one place the map hands work to the form. Offered, never auto-written. */
.cp-prefill { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; background: #eef3fb; border: 1px solid #c9d8f0;
  border-radius: 9px; padding: 10px 12px; margin: 0 0 8px; font-size: 0.83rem; }
.cp-prefill button.primary { padding: 5px 11px; font-size: 0.8rem; }

.cp-done { display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px;
  background: #fff; border: 1px solid #e4e7ef; border-radius: 10px; }
.cp-done a.primary { flex: none; text-decoration: none; white-space: nowrap;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  border-radius: var(--rl-btn-radius); font-weight: 600; padding: 9px 16px;
  transition: background .15s, border-color .15s; }
.cp-done a.primary:hover { background: var(--navy-700); border-color: var(--navy-700); }

/* ---- IDP: where you are in the plan ------------------------------------
   A strip above the existing cards. The page is a long scroll of four
   full-width cards and said nothing about progress or what blocked
   submitting; this answers both without moving any of them. */
.idp-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.idp-step { flex: 1; min-width: 168px; border: 1px solid #e4e7ef; border-radius: 10px;
  background: #fff; padding: 11px 13px; }
.idp-step.is-done { border-color: #bcdcd0; background: #f4fbf8; }
.idp-step.is-now { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,0.06); }
.idp-step .n { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8a90a6; margin: 0; }
.idp-step .t { font-weight: 600; color: var(--navy); font-size: 0.88rem; margin: 2px 0 0; }
.idp-step .s { font-size: 0.78rem; color: #5f6678; margin: 2px 0 0; }

/* Talent category as an inline pill. Reuses the Talent Box's own cell
   colours (.tbox-cat-*) for the fill, so a category reads the same on the
   employee dashboard, the record table and the release page as it does in
   the box where it was decided -- one colour per category, everywhere. */
.tcat-pill { display:inline-block; padding:2px 9px; border-radius:999px;
             font-size:.75rem; font-weight:600; line-height:1.55;
             white-space:nowrap; border:1px solid rgba(0,0,0,.07); }
.tcat-pill.tbox-cat-pip-improvement { color:#8f3630; }
.tcat-pill.tbox-cat-solid-core      { color:#24406e; }
.tcat-pill.tbox-cat-star            { color:#2f6259; }
.tcat-pill.tbox-cat-super-star      { color:#8a6b1d; }

/* A record row's cells open what they summarise. The link is invisible until
   hover -- the number is the content, not the affordance, and underlining every
   rating would make the table read like a list of links rather than a record. */
.dash-open { color: inherit; text-decoration: none; display: inline-block; }
.dash-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash-open:hover .potential-pill { filter: brightness(0.96); }
/* The report cell is a button now (it opens a pop-out) -- strip the UA's
   button chrome so it still reads as the pill it wraps. */
button.dash-open { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
/* The final band after calibration sits under the approved one once HR releases it (2026-10-02);
   a released 360 report with no released band reads as a plain link. */
.rec-final { display: block; margin-top: 4px; font-size: 0.78rem; color: #5b6275; }
.rec-final .potential-pill { margin-left: 4px; }
.rec-report-txt { color: var(--accent, #1f3a8a); font-size: 0.85rem; }
/* Release results (admin): each result cell = band, where it stands, released or not */
.rr-cell .rr-stage { display: block; margin-top: 3px; font-size: 0.74rem; color: #5b6275; }
.rr-cell .rr-stage.is-open { color: #9a5a12; }
.rr-cell .rr-rel { display: block; margin-top: 2px; font-size: 0.74rem; color: #0f6e56; }
.rr-cell .rr-rel.is-not { color: #8a90a0; }
.rr-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rr-filters select.modern-select { width: auto; min-width: 210px; max-width: 300px; }
.rr-bar .rr-what { display: inline-flex; gap: 6px; align-items: center; }

/* ---- Succession -----------------------------------------------------
   The list is a list: one row per seat, sorted by exposure. Everything you
   DO to a seat lives on its own page, so this file adds no button styles of
   its own beyond one quiet class -- the destructive actions here deliberately
   weigh LESS than the constructive ones, which was backwards before. */
.succ-bench { padding: 16px 20px; }
.succ-bench-row { display: flex; gap: 30px; flex-wrap: wrap; }
.succ-stat__label { margin: 0 0 3px; font-size: 0.68rem; letter-spacing: 0.06em;
                    text-transform: uppercase; color: #8b90a0; font-weight: 600; }
.succ-stat__val { margin: 0; font-size: 1.55rem; font-weight: 700; color: var(--navy);
                  line-height: 1.1; }
.succ-stat__val.is-good { color: #1a7a54; }
.succ-stat__val.is-warn { color: #8a4500; }
.succ-stat__val.is-bad  { color: #a02323; }
.succ-bench-note { margin: 12px 0 0; }
.succ-h2 { font-size: 1.02rem; margin: 22px 0 10px; }

.succ-table td { vertical-align: top; }
.succ-seat { font-weight: 600; color: var(--navy); text-decoration: none; }
.succ-seat:hover { text-decoration: underline; }
.succ-vacant { color: #a02323; font-weight: 600; }
.succ-empty { color: #9aa0b0; font-size: 0.86rem; }
.succ-status { white-space: nowrap; }

/* Risk x impact: two axes read as two chips, not a sentence to re-parse. */
.succ-grid { display: inline-flex; align-items: center; gap: 3px; margin-right: 5px;
             padding: 2px 7px; border-radius: 6px; font-size: 0.68rem; font-weight: 600;
             letter-spacing: 0.04em; background: #eef0f5; color: #6b7186; }
.succ-grid b { font-weight: 700; }
.succ-grid--high   { background: #fbdada; color: #a02323; }
.succ-grid--medium { background: #fde6cc; color: #8a4500; }
.succ-grid--low    { background: #e3f6ee; color: #1b7a55; }

/* A successor is a person, so their chip is a link to the person. */
.succ-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.succ-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px;
             border: 1px solid #e4e7ef; border-radius: 999px; background: #fff;
             font-size: 0.82rem; color: #1f2330; text-decoration: none; }
.succ-chip:hover { border-color: var(--navy); }
.succ-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa0b0; flex: none; }
.succ-dot--ready_now { background: #1a7a54; }
.succ-dot--ready_1_2 { background: #7e9edb; }
.succ-dot--ready_3_5 { background: #d19a5c; }
.succ-dot--emerging  { background: #b9bec9; }

.succ-seat-facts { display: flex; gap: 34px; flex-wrap: wrap; padding: 16px 20px; }
.succ-fact { margin: 0; font-size: 0.95rem; font-weight: 500; }
.succ-seat-note { flex-basis: 100%; margin: 4px 0 0; }

/* Forms are disclosures at the end of a page, never the page itself. */
.succ-add { padding: 14px 20px; margin-top: 16px; }
.succ-add > summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.succ-form { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr));
             gap: 10px 14px; max-width: 720px; }
.succ-form__wide { grid-column: 1 / -1; }
.succ-form input[type=text] { width: 100%; padding: 7px 10px; border: 1px solid #d7dbe6;
                              border-radius: 8px; }

/* Removing somebody is not a primary act. It reads as text until you want it. */
.succ-quiet { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 0.84rem;
              color: #6b7186; cursor: pointer; text-decoration: underline;
              text-underline-offset: 2px; }
.succ-quiet:hover { color: var(--navy); }
.succ-quiet--danger:hover { color: #a02323; }
.succ-row-action { text-align: right; white-space: nowrap; }

/* Candidate card */
.succ-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.succ-record { list-style: none; margin: 4px 0 0; padding: 0; }
.succ-record li { display: flex; align-items: center; justify-content: space-between;
                  gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef0f5;
                  font-size: 0.9rem; }
.succ-record li:last-child { border-bottom: 0; }
.succ-quote { margin: 2px 0 10px; padding: 9px 12px; background: #f4f6fb;
              border: 1px solid #e4e7ef; border-radius: 8px; font-size: 0.9rem; }
.succ-caveat { margin-top: 14px; padding-top: 10px; border-top: 1px solid #eef0f5; }

@media (max-width: 900px) {
  .succ-two-col { grid-template-columns: 1fr; }
  .succ-form { grid-template-columns: 1fr; }
}

/* The talent category as a chip. .tbox-cat-* are cell BACKGROUNDS for the box
   grid, not a component -- these borrow their exact colours so the card and
   the box can never drift apart on what "Star" looks like. */
.succ-cat { display: inline-block; padding: 4px 11px; border-radius: 999px;
            font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; }
.succ-cat--pip-improvement { background: #fbeceb; color: #b4483f; }
.succ-cat--solid-core      { background: #eaf0f9; color: #24406e; }
.succ-cat--star            { background: #e9f3f1; color: #3f8377; }
.succ-cat--super-star      { background: #f7f0dd; color: #8a6a14; }

/* Confirming a slate is a decision, so it gets its own bar rather than being
   one more disclosure among the forms. */
.succ-confirm { display: flex; align-items: center; justify-content: space-between;
                gap: 16px; flex-wrap: wrap; padding: 14px 20px; margin-top: 16px; }
/* Council-only notice. Amber, not red: it is a boundary to respect, not an
   error to fix. */
.succ-private { padding: 12px 18px; background: #fdf6e9; border: 1px solid #f0dcb4; }
.succ-private p { font-size: 0.9rem; }

/* ---- TRC session: moving between confirmed seats -------------------------
   Prev / jump / next on one row. The council works through seats in order, so
   the two ends carry the sequential moves and the middle is the escape hatch
   for jumping straight to one they want to revisit. */
.succ-trc-nav { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                margin-top:14px; padding:12px 16px; }
.succ-trc-nav__ends { flex:1 1 auto; min-width:140px; }
.succ-trc-nav__right { text-align:right; }
.succ-trc-nav__jump { flex:0 1 320px; margin:0; }
.succ-trc-nav__jump select { width:100%; }
@media (max-width: 720px) {
  .succ-trc-nav__right { text-align:left; }
  .succ-trc-nav__jump { flex:1 1 100%; order:3; }
}

/* ---- TRC side-by-side: what they said vs what the council decides -------
   Equal columns on purpose. The comparison only works if neither side reads
   as the authoritative one -- a wider "council" column would quietly make the
   person's own words look like context rather than half the evidence. */
.succ-sbs td { vertical-align: top; }
.succ-sbs__in { width:100%; box-sizing:border-box; padding:8px 10px;
                border:1px solid #d7dbe6; border-radius:8px;
                font-family:inherit; font-size:13.5px; resize:vertical; }
.succ-learn-year { padding:10px 0; border-top:1px solid #eef0f5; }
.succ-learn-year:first-of-type { border-top:0; padding-top:0; }

/* ==========================================================================
   ADMIN SURFACES — shared rhythm
   The admin pages are the oldest in the app and drifted from the look the PM
   and Reports work established. These rules key on classes every admin
   template already uses, so the whole section moves together and no 500-line
   template has to be rewritten to benefit.
   ========================================================================== */

/* A page head is a header: it needs room under it, and the subtitle should sit
   with the title rather than float. */
.page-head { margin-bottom: 18px; gap: 16px; }
.page-head h1 { margin-bottom: 2px; }

/* One accent. #2557d6 was a second blue that crept in only here -- every other
   surface in the app uses --navy, and a design with two accents has none. */
.admin-card h2 { color: var(--navy); }

/* Air. 8px rows turned a 3,600-row table into a wall of grey: the content
   never got denser, it just got harder to land on a line. */
.admin-table th, .admin-table td { padding: 11px 12px; }
.admin-table thead th { border-bottom: 1px solid #e2e5ee; padding-bottom: 9px; }

/* Cards need the same rhythm as the tables between them. */
.admin-card + .admin-card { margin-top: 16px; }

/* The settings strip carries nine module names now, so it earns a little more
   room than it did with three -- but ONLY it. Written unscoped, these two rules
   sat later in the file than the base .mod-tabs and so re-padded every strip in
   the app (My PM / Team PM, the calibration tabs, the succession toggle) to suit
   one page's problem. Scoped to .set-tabs, which is what the settings shell
   actually renders. */
.mod-tabs.set-tabs { padding: 4px; margin-bottom: 20px; }
.mod-tabs.set-tabs a { padding: 8px 16px; }

/* Nine names do not fit one row on a laptop, and .mod-tabs already wraps --
   this only gives the second row air so a wrapped strip reads as one control
   rather than two stacked ones. */
.mod-tabs.set-tabs { row-gap: 3px; }

/* Panel heads inside the settings shell: a section heading, not a page title.
   Smaller than an <h1>, with the same spacing discipline as .page-head. */
.set-panel-head { margin: 0 0 14px; }
.set-panel-head h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--navy); }

/* Two chip groups on one line. Both answer "which users am I looking at", so
   stacking them spent two rows saying one thing -- and on the Users page that
   sat above a search row and a toggle, so the table began below the fold. */
.subfilter-row { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 26px; margin: 14px 0 0; }
.subfilter-row .subfilter { margin: 0; }

/* A page-head action is a button, not a link that happens to be navy. Anchors
   don't inherit button.primary's box, so the shared shape is stated once here
   rather than by wrapping every such link in a <form>. */
.page-head-right a.primary { display: inline-block; padding: 9px 16px;
  border-radius: 8px; background: var(--navy); color: #fff; font-weight: 600;
  font-size: 0.92rem; text-decoration: none; line-height: 1.1; }
.page-head-right a.primary:hover { filter: brightness(1.08); }
.page-head-right a.primary::after { content: none; display: none; }

/* Users list: rank the cell instead of stacking it. Name leads at full weight,
   supporting lines sit back. Without this every line rendered at the same
   muted grey and the eye had nowhere to land on a 3,600-row table. */
.u-name { font-weight: 600; font-size: 0.94rem; color: var(--navy); text-decoration: none; }
.u-name:hover { text-decoration: underline; }
.u-meta { display: block; font-size: 0.78rem; color: #6b7186; line-height: 1.5; margin-top: 2px; }
.u-meta code { font-size: 0.74rem; background: #f2f4f9; padding: 0 4px; border-radius: 3px; }

/* ---------------------------------------------------------------------------
   Admin overview. One card per live module: what it is, its headline number,
   and whether anything is waiting. Cards are whole-card links because the only
   thing you do here is leave for a module.
   --------------------------------------------------------------------------- */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; margin-top: 14px; }
.ov-card { display: block; text-decoration: none; color: inherit; padding: 16px 18px; }
.ov-card:hover { box-shadow: 0 3px 12px rgba(20,25,50,.12); }
.ov-card::after { content: none; }
.ov-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ov-card__name { font-weight: 600; color: var(--navy); }
.ov-card__stat { margin: 10px 0 0; font-size: 1.5rem; font-weight: 700; color: var(--navy);
  line-height: 1.15; }
.ov-card__statlabel { margin: 2px 0 0; }
.ov-card__alert { margin: 10px 0 0; font-size: .84rem; font-weight: 600; }
.ov-card__alert.ov-warn { color: #8a4500; }
.ov-card__alert.ov-ok { color: #1a7a54; }
.ov-card__go { display: inline-block; margin-top: 12px; font-size: .84rem; font-weight: 600;
  color: var(--navy); }

/* Per-cycle module picker: a second row under each cycle, so seven checkboxes
   don't have to squeeze into an eighth column. Deliberately quieter than the
   row above it -- the dates describe the season, this decides its contents. */
.cyc-modules-row td { border-top: 0; padding-top: 0; background: #fafbfe; }
.cyc-modules { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cyc-modules .company-opt { font-size: .86rem; }

/* KPI library form. Three segments -- who it applies to / what the KPI is /
   how it is scored -- because the flat row of fifteen controls asked the same
   question (which grades? which departments?) more than once and gave no clue
   which answers belonged together. */
.kpi-seg { border: 1px solid #e6e8f0; border-radius: 10px; padding: 12px 16px 14px;
           margin: 0 0 14px; background: #fbfbfe; }
.kpi-seg > legend { font-size: 0.82rem; font-weight: 600; color: #5f6678;
                    text-transform: uppercase; letter-spacing: 0.04em; padding: 0 6px; }
.kpi-tierbtns { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; }
.kpi-tierbtns .kpi-tier-btn { font-size: 0.78rem; padding: 2px 8px;
                              border: 1px solid #d7dbe6; border-radius: 999px; background: #fff; }

/* ============================================================================
   Guided review (the chat) — OneHR-native. 2026-08-29.
   Phase C shipped the markup + logic with no CSS; these rules give it the app's
   own design language (navy/white/red, system fonts, the --rl-* tokens and the
   .admin-card idiom), using the mockup only for the conversational structure.
   The rv- prefix is unique to /review, so nothing here touches other pages.
   ========================================================================== */
.rv-wrap { display: grid; grid-template-columns: 224px 1fr; gap: 24px; align-items: stretch; }
/* The top band mirrors .rv-wrap's columns so the toggle sits above the rail and
   the KPI summary row sits above the chat (Chris: summary on the toggle band,
   chat aligned with the rail card). flex:none so it keeps its height in the frame. */
.rv-topbar { flex: none; display: grid; grid-template-columns: 224px 1fr; gap: 24px;
  align-items: center; margin-bottom: 12px; }
.rv-topbar-nav { display: flex; align-items: center; }
.rv-topbar-main { min-width: 0; display: flex; align-items: center; }
.rv-topbar-main .rv-kpi-pin { flex: 1; }
/* The UNIFIED journey's top band is a SLIM ONE-ROW banner (where you are + progress)
   -- the interactive widgets now live as in-chat cards, not pinned. So this is a
   single row, no scroll. */
#rv-journey-pin { align-self: start; }
#rv-journey-pin .rv-banner { display: flex; align-items: center; }
/* The live stage widget is an in-chat card; its wide table scrolls inside itself. */
.rv-stage-card .rv-table-scroll { overflow-x: auto; }
/* The card footer: "Save" and "Save & submit" side by side, the sign-off on the right (one card per part, 2026-09-29). */
.rv-kpi-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* The summarised overall remark on the scorecard / confirm card. */
.rv-sc-note { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.rv-sc-remark { margin-top: 10px; padding: 8px 10px; background: #f4f6fb; border-radius: 8px; }
.rv-sc-remark-h { font-weight: 600; font-size: 0.78em; text-transform: uppercase;
  letter-spacing: .03em; color: #6b7280; margin-bottom: 3px; }
/* On /review the toggle lives in review.html's OWN top bar (above the rail), so
   hide base.html's copy at EVERY width (not just desktop) -- otherwise mobile
   shows two. (/dashboard and /review/team have no .rv-wrap, so base's stays.) */
body:has(.rv-wrap) #main > .mod-tabs { display: none; }
.rv-main { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* the two header buttons ("See every KPI" / "Your team") were jammed together */
.rv-main .page-head > div:last-child { display: flex; gap: 10px; flex-wrap: wrap; }
/* Left column: the Dashboard/Review toggle sits above the rail (at the rail's
   width) so it aligns with the page heading; the rail fills the rest. */
.rv-railcol { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.rv-railcol .rv-rail { flex: 1; min-height: 0; }
/* My Review / Team Review switch -- reuses the .mod-tabs pill. Full rail width in
   the rail, but capped so it isn't a giant stretched bar on the full-width team
   page. Left-aligned there to match the rail's position. */
/* Content-width pill with fixed-size segments -- so "Mine" is the SAME size whether
   it's alone (solo) or beside "Team" (manager); it never stretches to fill. */
.rv-viewtabs { display: inline-flex; flex-wrap: nowrap; max-width: 100%; margin: 0 0 14px; }
.rv-viewtabs a { flex: 0 0 auto; min-width: 68px; text-align: center; white-space: nowrap; }
/* The Mine|Team switch when it sits in the journey top band (2026-09-07): spans the
   left-panel column (== the rail width) and matches the status-banner height so both
   top-band cells sit on one row. Scoped to .rv-topbar-nav so the legacy stage rails'
   viewtabs are untouched. */
.rv-topbar-nav .rv-viewtabs { display: flex; width: 100%; margin: 0; }
.rv-topbar-nav .rv-viewtabs a { flex: 1; min-width: 0; display: flex; align-items: center;
  justify-content: center; padding: 5px 12px; box-sizing: border-box; }
/* Mine | Team | Dept | BU | BG (2026-09-30): four or five views share the same 224px cell, so the segments tighten
   rather than wrap -- still one row, the full name on hover. */
.rv-topbar-nav .rv-viewtabs-n4 a, .rv-topbar-nav .rv-viewtabs-n5 a { padding: 5px 4px; }
.rv-topbar-nav .rv-viewtabs-n5 a { font-size: 0.8rem; }

/* --- the stage rail: a vertical stepper ---------------------------------- */
/* align-self:stretch (the grid default) so the rail is the SAME height as the
   chat card beside it, not just as tall as its own list. */
/* The outer PANEL: a light ground so the white per-module cards inside stand out
   ("separate card for each module, still under one panel"). overflow:auto is a
   safety net -- with single-line rows the rail fits in one view without scroll. */
.rv-rail { align-self: stretch; max-height: 100%; overflow: auto; background: #f3f4f8; border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius); padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
/* The rail is full-height now, so give the steps room to breathe. */
.rv-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Single-line rows now (the subline moved to a hover tooltip), so the dot is
   vertically centred rather than pinned near the top of a two-line item. */
.rv-rail li { position: relative; padding: 8px 8px 8px 26px; border-radius: 8px; line-height: 1.3; }
.rv-rail li::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: #cdd1dd; }
.rv-rail li.rv-done::before    { background: #3f8377; }
.rv-rail li.rv-open::before    { background: #c9862b; }
.rv-rail li.rv-waiting::before { background: #8a8f9f; }
.rv-rail li.rv-later::before   { background: #dfe2ea; }
/* Selection / hover is a soft filled row highlight (modern), not bold + underline.
   The li is rounded, so the fill reads as a pill. */
.rv-rail-sub li { transition: background 0.12s ease; }
.rv-rail-sub li:hover { background: #eef1f7; }
.rv-rail li.rv-here { background: #e8edfa; }
.rv-rail li.rv-here::before { box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }
.rv-rail .rv-label { display: block; font-weight: 600; font-size: 0.95rem; color: var(--ink); text-decoration: none; }
.rv-rail a.rv-label:hover { color: var(--navy); }
.rv-rail li.rv-here .rv-label { color: var(--navy); }
/* IDP locked until the KPI check-in + competency are done: dimmed, non-clickable. */
.rv-rail .rv-label.rv-locked { color: #aeb3c0; font-weight: 500; cursor: default; }
.rv-rail li .muted.small { display: block; margin-top: 3px; font-size: 0.8rem; }

/* ===== Journey redesign: module tabs (top) + dynamic navigator (left) ======
   Two-level nav (2026-09-08): the module lives on the top band (PM/TM/IDP, active
   glowing), the left panel is a pending-first navigator for the active stage. */
.rv-topbar-main #rv-modtabs { flex: 1; min-width: 0; }
.rv-modtabs { display: flex; gap: 8px; }
/* Inactive tabs sit flat + recessed (light grey); the active one is a RAISED white
   card with a navy border + a soft lift -- a clean "selected" affordance, no underline
   (the global a:hover underline is killed here), no harsh ring, no gradient. */
.rv-modtab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: row;
  align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid var(--rl-line);
  background: #f4f5f8; border-radius: 10px; text-decoration: none; white-space: nowrap;
  transition: box-shadow .16s, background .16s, border-color .16s; }
.rv-modtab:hover, .rv-modtab.rv-mt-on:hover { text-decoration: none; }
.rv-modtab .rv-mt-name { font-weight: 800; letter-spacing: .3px; color: var(--ink);
  display: flex; align-items: center; gap: 7px; flex: none; }
.rv-modtab .rv-mt-name svg { width: 16px; height: 16px; color: #6b7280; }
.rv-modtab .rv-mt-sub { font-size: 12px; color: #6b7280; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
/* The pending badge sits INSIDE the box, right-aligned (was clipped by overflow:hidden). */
.rv-modtab .rv-mt-count { margin-left: auto; flex: none; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 20px; background: #9a5a12; color: #fff; font-size: 11px;
  font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.rv-modtab .rv-mt-count.rv-mt-zero { background: #0f6e56; }
.rv-modtab:hover { border-color: #c3c9db; background: #eef1f7; }
.rv-modtab.rv-mt-on { border-color: var(--navy); background: #fff;
  box-shadow: 0 8px 20px -8px rgba(37,42,89,0.38); }
.rv-modtab.rv-mt-on .rv-mt-name, .rv-modtab.rv-mt-on .rv-mt-name svg { color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .rv-modtab { transition: none; } }
.rv-modtab-locked { cursor: default; opacity: .72; }
.rv-modtab-locked .rv-mt-name, .rv-modtab-locked .rv-mt-name svg { color: #aeb3c0; }
.rv-modtab-locked .rv-mt-lock { margin-left: auto; font-size: 12px; }
/* Expand/minimize (2026-09-23): the INACTIVE (and locked) modules shrink to a content-width
   icon+name chip; the ACTIVE module grows to carry its steps strip. */
.rv-modtab.rv-mt-min { flex: none; }
.rv-modtab.rv-mt-exp { flex: 1; }
/* The steps strip inside the expanded active tab: for the PM check-in, a Results progress
   RING + numbered/tick dots for Justification and Confirm; for TM/IDP, its live stages.
   Each step is done (green) / current (navy) / to-do (muted), joined by thin connectors. */
/* margin-left:auto pushes the strip to the RIGHT edge of the expanded tab (2026-09-23); the
   tab's own 9px gap stays the minimum space after the module name. */
.rv-mt-steps { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
/* The expanded tab names the module in FULL; the short code is its narrow-screen fallback --
   below ~1100px the full name + the 3-step strip + the two minimized chips no longer fit
   (measured: at 900px the strip spilled past the tab edge). */
.rv-mt-name .rv-mt-short { display: none; }
@media (max-width: 1100px) {
  .rv-mt-exp .rv-mt-name .rv-mt-full { display: none; }
  .rv-mt-exp .rv-mt-name .rv-mt-short { display: inline; }
}
/* Below ~900px even the short code + the strip outgrow a shrinking tab (measured at 800px: the
   strip spilled past the tab), so -- as on a phone -- each tab keeps its content width and the
   row scrolls instead of overlapping. */
@media (max-width: 900px) {
  #rv-modtabs { overflow-x: auto; }
  #rv-modtabs .rv-modtab { flex: 0 0 auto; }
}
.rv-mt-step { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.rv-mt-sep { width: 14px; height: 2px; border-radius: 2px; background: #d7dbe6; flex: none; }
.rv-mt-steplabel { font-size: 11px; font-weight: 700; color: #6b7280; white-space: nowrap; }
.rv-mt-step.rv-mt-done .rv-mt-steplabel { color: #0f6e56; }
.rv-mt-step.rv-mt-cur .rv-mt-steplabel { color: var(--navy); }
/* Results progress ring -- a conic donut filled to --frac (keyed/total), a white hole,
   and keyed/total (or a tick when done) at the centre. */
.rv-mt-ring { --frac: 0; position: relative; flex: none; width: 24px; height: 24px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--navy) calc(var(--frac) * 360deg), #d7dbe6 0); }
.rv-mt-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.rv-mt-ringnum { position: relative; z-index: 1; font-size: .56rem; font-weight: 800;
  line-height: 1; color: var(--navy); }
.rv-mt-step.rv-mt-done .rv-mt-ring { background: #0f6e56; }
.rv-mt-step.rv-mt-done .rv-mt-ringnum { color: #0f6e56; }
/* Numbered/tick dots for the non-ring steps. */
.rv-mt-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c3c9db;
  background: #fff; color: #6b7280; font-size: .62rem; font-weight: 800; display: inline-flex;
  align-items: center; justify-content: center; }
.rv-mt-step.rv-mt-cur .rv-mt-dot { border-color: var(--navy); color: var(--navy); }
.rv-mt-step.rv-mt-done .rv-mt-dot { background: #0f6e56; border-color: #0f6e56; color: #fff; }
/* TM (2026-09-24): each stage is a GROUP of the 3 steps -- the stage name, then its steps. Only the
   ACTIVE stage shows its steps (2026-09-25); the other open stage is MINIMIZED to its muted name
   (progress in the tooltip). A thin upright rule separates the groups. */
.rv-mt-grp { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.rv-mt-grplbl { font-size: 11px; font-weight: 800; color: var(--ink); white-space: nowrap; margin-right: 2px; }
.rv-mt-grp.rv-mt-mini .rv-mt-grplbl { color: #6b7280; font-weight: 700; margin-right: 0; }
.rv-mt-gsep { width: 1px; height: 20px; background: #d7dbe6; flex: none; margin: 0 6px; }
/* The TM strip (the active part's steps + the other part's name) is wider than PM's, so it steps down
   sooner -- measured 2026-09-25 with the other part minimized: ~428px, the tab needs ~653px with the full
   name, which fits down to ~1170px. First the tab names the module by its short code, then (<=1040px)
   the step labels go, leaving the dots and rings (labels stay in the tooltips). */
@media (max-width: 1180px) {
  .rv-mt-exp.rv-mt-tmsteps .rv-mt-name .rv-mt-full { display: none; }
  .rv-mt-exp.rv-mt-tmsteps .rv-mt-name .rv-mt-short { display: inline; }
}
@media (max-width: 1040px) {
  .rv-mt-grp .rv-mt-steplabel { display: none; }
}
/* The Team view's tabs say where each part stands (the UX review's F10, 2026-10-08): a tick only when everyone is
   done, else how many are waiting on you (amber, like the to-do counts) or how many you're waiting on (grey). The
   minimized tabs carry the same as a small count, "waiting on N" or a tick. */
.rv-mt-status { font-size: 11px; font-weight: 700; color: #6b7280; white-space: nowrap; }
.rv-mt-status.is-turn { background: #fdf0e2; color: #9a5a12; border-radius: 20px; padding: 2px 9px; }
.rv-mt-badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 18px; background: #fdf0e2;
  color: #9a5a12; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.rv-mt-minwait { font-size: 11px; font-weight: 600; color: #8a90a2; white-space: nowrap; }
.rv-mt-mintick { color: #0f6e56; font-weight: 800; font-size: 12px; }
/* TM's two parts as real tabs inside the TM tab (the UX review's F8, 2026-10-08): a small segmented pair, each with
   its count; the one you're in is the raised white segment. A part you've submitted carries a tick. */
.rv-modtab.rv-mt-tmparts { cursor: default; }
.rv-mt-parts { display: inline-flex; align-items: center; gap: 2px; padding: 3px; flex: none;
  background: #f1f3f8; border: 1px solid #e3e6ee; border-radius: 9px; }
.rv-mt-part { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 7px;
  font-size: 12px; font-weight: 700; color: #4b5164; text-decoration: none; white-space: nowrap; }
.rv-mt-part:hover { background: #e7eaf2; color: var(--navy); text-decoration: none; }
.rv-mt-part.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(20,24,45,0.16); }
.rv-mt-part:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.rv-mt-part-n { font-weight: 600; color: #8a90a2; font-variant-numeric: tabular-nums; }
.rv-mt-part.is-on .rv-mt-part-n { color: #5b6280; }
.rv-mt-part-tick { color: #0f6e56; font-weight: 800; }
@media (max-width: 1040px) {
  .rv-mt-tmparts .rv-mt-steps .rv-mt-steplabel { display: none; }
}
/* ...and below 1024px (the last width it fits, measured) the tabs keep their content width and the row
   scrolls, as it already does for everyone below 900px. */
@media (max-width: 1023px) {
  #rv-modtabs:has(.rv-mt-tmsteps) { overflow-x: auto; }
  #rv-modtabs:has(.rv-mt-tmsteps) .rv-modtab { flex: 0 0 auto; }
}

.rv-railcol .rv-nav { flex: 1; min-height: 0; }
.rv-nav { align-self: stretch; max-height: 100%; overflow: auto; background: #f3f4f8;
  border: 1px solid var(--rl-line); border-radius: var(--rl-radius); padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: #c9cede transparent; }
/* Thinnest practical scrollbar on the left navigator (Chris's ask). */
.rv-nav::-webkit-scrollbar { width: 5px; }
.rv-nav::-webkit-scrollbar-track { background: transparent; }
.rv-nav::-webkit-scrollbar-thumb { background: #c9cede; border-radius: 6px; }
.rv-nav::-webkit-scrollbar-thumb:hover { background: #aeb4c6; }
/* No hover underline on nav links (stage chips, team doors) -- the global a:hover
   underline must never touch nav/tab links (see docs/DESIGN_GUIDE.md). */
.rv-nav a, .rv-nav a:hover { text-decoration: none; }
.rv-nav-head { display: flex; flex-direction: column; gap: 3px; padding: 0 2px 9px;
  border-bottom: 1px solid var(--rl-line); }
.rv-nav-stage { font-weight: 800; color: var(--navy); font-size: 0.95rem; }
.rv-nav-prog { font-size: 0.78rem; color: #6b7280; }
.rv-nav-prog b { color: #9a5a12; }
.rv-nav-bar { height: 5px; border-radius: 5px; background: #dfe3ec; overflow: hidden; margin-top: 5px; }
.rv-nav-bar i { display: block; height: 100%; background: #0f6e56; border-radius: 5px; }
/* The stage switch: a custom dropdown whose menu opens BELOW the button (a native <select>
   popup positions itself; this one is CSS-controlled). Button reads like the old box; menu is a
   floating list. No glow (the "background highlight, not glow" rule). */
.rv-nav-switch { position: relative; }
.rv-nav-switch-btn { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--rl-line); border-radius: 9px; padding: 8px 10px; cursor: pointer;
  text-align: left; }
.rv-nav-switch-btn:hover { border-color: #aeb4c6; }
.rv-nav-switch-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-nav-switch-chev { flex: none; color: #6b7280; font-size: 0.7rem; }
.rv-nav-switch-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--rl-line); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
/* The `display:flex` above overrides the UA [hidden]{display:none}, so the menu would
   never close (nor start closed) -- restore the attribute's meaning with a rule that
   wins on specificity (.class[attr] > .class). */
.rv-nav-switch-menu[hidden] { display: none; }
.rv-nav-switch-opt { width: 100%; text-align: left; font: inherit; font-size: 0.82rem; color: var(--ink);
  background: none; border: none; border-radius: 6px; padding: 7px 9px; cursor: pointer; }
.rv-nav-switch-opt:hover { background: #eef1f7; }
.rv-nav-switch-opt.rv-on { font-weight: 700; }
.rv-nav-chips { display: flex; flex-direction: column; gap: 6px; }
.rv-nav-chip { flex: none; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border: 1px solid var(--rl-line); background: #fff; border-radius: 9px; text-decoration: none; }
.rv-nav-chip .rv-chip-step { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #dfe3ec;
  color: #4b5169; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.rv-nav-chip[data-done="1"] .rv-chip-step { background: #0f6e56; color: #fff; }
.rv-nav-chip .rv-chip-body { min-width: 0; display: flex; flex-direction: column; }
.rv-nav-chip .rv-chip-n { font-weight: 700; font-size: 0.8rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-nav-chip .rv-chip-s { font-size: 0.7rem; color: #6b7280; }
/* The active STAGE chip is teal/green -- deliberately NOT the navy the selected PEER card
   uses (.rv-nav-item[aria-current]), so "which stage" and "which peer" read as two levels. */
.rv-nav-chip.rv-chip-on { border-color: #0f6e56; background: #e8f3ef; box-shadow: 0 0 0 2px rgba(15,110,86,0.15); }
.rv-nav-todo { margin: 0 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #9a5a12; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* The pending count sits hard-right on the group header (letter-spacing:0 so the digit is not
   stretched by the label's uppercase tracking). Amber pill, matching .rv-pill.amber. */
.rv-nav-todo-n { flex: none; letter-spacing: 0; font-size: 0.7rem; background: #fdf0e2; color: #9a5a12;
  border-radius: 20px; padding: 0 7px; }
.rv-nav-items { display: flex; flex-direction: column; gap: 6px; }
.rv-nav-item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px;
  padding: 7px 11px; border: 1px solid var(--rl-line); border-left: 3px solid #c9862b;
  background: #fff; border-radius: 10px; font: inherit; cursor: pointer; transition: background .12s, border-color .12s; }
/* Hover is a card-background highlight only -- never touch border-color, which would grey
   out the amber left accent that marks a pending item. */
.rv-nav-item:hover { background: #e8edf6; }
/* A reviewed report (manager view): green left accent instead of the amber "to-do" one. */
.rv-nav-item.rv-ni-done { border-left-color: #0f6e56; }
.rv-nav-item.rv-ni-done .rv-ni-meta { color: #0f6e56; }
/* The Team list's Waiting on them group (the UX review's F9, 2026-10-08): nothing for the manager to do yet, so a grey
   accent and a grey header instead of the amber to-do ones; the items still open, to look. */
.rv-nav-item.rv-ni-wait { border-left-color: #c3c9db; }
.rv-nav-todo.is-wait { color: #6b7280; }
.rv-nav-todo.is-wait .rv-nav-todo-n { background: #eef0f5; color: #4b5164; }
.rv-nav-item[aria-current="true"] { border-color: var(--navy); background: #eef0fb; box-shadow: 0 0 0 2px rgba(37,42,89,0.14); }
.rv-ni-top { display: flex; align-items: center; gap: 8px; }
.rv-ni-name { font-weight: 600; font-size: 0.82rem; line-height: 1.3; color: var(--ink); min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.rv-ni-tag { flex: none; font-size: 0.66rem; color: #6b7280; background: #eef0f5; border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
/* the Talent Box navigator's "Pending calibration" on one line beside its count (2026-10-07) */
.rv-nav-todo.is-tbox > span:first-child { white-space: nowrap; letter-spacing: .02em; }
.rv-ni-meta { font-size: 0.74rem; color: #6b7280; display: flex; align-items: center; gap: 7px; }
.rv-ni-prog { flex: 1; max-width: 110px; height: 5px; background: #e4e7ee; border-radius: 5px; overflow: hidden; }
.rv-ni-prog i { display: block; height: 100%; background: #c9862b; border-radius: 5px; }
.rv-pill { font-size: 0.68rem; font-weight: 700; border-radius: 20px; padding: 1px 9px; }
.rv-pill.amber { background: #fdf0e2; color: #9a5a12; }
.rv-nav-empty { font-size: 0.82rem; color: #6b7280; padding: 4px 2px; }
.rv-nav-done { border: 1px solid var(--rl-line); border-radius: 10px; background: #fafbfc; }
.rv-nav-done > summary { list-style: none; cursor: pointer; padding: 8px 11px; font-size: 0.8rem;
  font-weight: 700; color: #6b7280; display: flex; align-items: center; gap: 8px; }
.rv-nav-done > summary::-webkit-details-marker { display: none; }
.rv-nav-done > summary .rv-nav-chev { margin-left: auto; transition: transform .15s; font-size: 1.1rem; }
.rv-nav-done[open] > summary .rv-nav-chev { transform: rotate(90deg); }
.rv-nav-donelist { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 1px; }
/* The manager's Done group holds full, clickable report cards (not the compact done rows). */
.rv-nav-done-team .rv-nav-doneitems { padding: 0 8px 8px; }
.rv-nav-donerow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 0.78rem; }
.rv-nav-donerow .rv-dn-name { color: var(--ink); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
/* A COMPACT tag (the KPI band code AE/ME/OU, a 360 N/N, ...): short tags show whole,
   a long value truncates rather than overflowing the panel. */
.rv-nav-donerow .rv-dn-meta { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 0.66rem; font-weight: 700; color: var(--navy);
  background: #eef0f5; border-radius: 20px; padding: 1px 9px; }
/* The KPI band tag carries the SAME colour as the app's performance-band pills
   (.potential-pill[data-band]) -- red / amber / blue / green / dark-green. */
.rv-nav-donerow .rv-dn-meta[data-band="UA"] { background: #fbdada; color: #a02323; }
.rv-nav-donerow .rv-dn-meta[data-band="BE"] { background: #fde6cc; color: #8a4500; }
.rv-nav-donerow .rv-dn-meta[data-band="ME"] { background: #e0e9fb; color: #1b46b3; }
.rv-nav-donerow .rv-dn-meta[data-band="AE"] { background: #d7f0e0; color: #1a7a54; }
.rv-nav-donerow .rv-dn-meta[data-band="OU"] { background: #d4f5dc; color: #1d6b34; }
.rv-tick { color: #0f6e56; flex: none; }
.rv-nav-team { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rl-line); display: flex; flex-direction: column; gap: 5px; }
.rv-nav-teamhead { margin: 0 2px 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a90a2; }
.rv-nav-teamdoor { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--rl-line); background: #fff; border-radius: 9px; text-decoration: none; }
.rv-nav-teamdoor:hover { border-color: #c3c9db; background: #fbfcff; }
.rv-nav-teamname { flex: 1; min-width: 0; font-weight: 600; font-size: 0.86rem; color: var(--ink); }
.rv-nav-teamcount { flex: none; background: var(--navy); color: #fff; font-size: 0.68rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.rv-nav-drawerbtn { display: none; }
.rv-nav-scrim { display: none; }
.rv-rail-foot { margin: 10px 4px 2px; padding-top: 10px; border-top: 1px solid var(--rl-line-soft); }
.rv-rail-head { margin: 0 4px 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: #8a90a2; }
.rv-rail-head-team { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rl-line-soft); }
/* Each module (PM / TM / IDP) is its OWN white card inside the panel -- the
   module name shown once in the card head, its stages beneath. */
.rv-rail-group { margin-bottom: 20px; background: #fff; border: 1px solid var(--rl-line);
  border-radius: 10px; padding: 7px 9px 8px; }
.rv-rail-group:last-of-type { margin-bottom: 0; }
.rv-rail-grouphead { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--rl-line-soft);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5a6072; }
/* A subtle per-module accent: the icon sits in a small tinted rounded badge. */
.rv-rail-grouphead .rv-ico { width: 15px; height: 15px; border-radius: 6px; padding: 3px;
  box-sizing: content-box; color: #7a8091; }
.rv-mod-pm  .rv-rail-grouphead .rv-ico { background: #e7f1ef; color: #2f6f63; }
.rv-mod-tm  .rv-rail-grouphead .rv-ico { background: #fbf1e2; color: #9a5a12; }
.rv-mod-idp .rv-rail-grouphead .rv-ico { background: #e9f0fb; color: #2b5fa1; }
.rv-rail li.rv-team-door { padding-left: 8px; display: flex; align-items: center; gap: 8px; }
.rv-rail li.rv-team-door::before { content: none; }
.rv-team-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
  height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 0.72rem; font-weight: 700; }

/* --- the turn: the conversation card ------------------------------------- */
.rv-turn { background: #fff; border: 1px solid var(--rl-line); border-radius: var(--rl-radius);
  padding: 18px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.rv-agent { font-size: 1.05rem; line-height: 1.55; color: var(--ink); margin: 0 0 14px; max-width: 62ch; }
.rv-agent:last-child { margin-bottom: 0; }
.rv-agent .muted.small { display: inline; font-size: 0.85rem; }
.rv-said { background: #eef7ee; color: #1f5c2e; border-radius: 8px; padding: 9px 13px; font-size: 0.96rem; }

/* --- the KPI card inside a turn ------------------------------------------ */
.rv-kpi { border: 1px solid var(--rl-line); border-radius: 10px; background: #fbfcfe;
  padding: 14px 16px; margin-top: 4px; }
.rv-kpi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rv-kpi-head strong { font-size: 1rem; }
.rv-kpi-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; }
.rv-kpi-desc { margin: 4px 0 0; line-height: 1.5; }
/* KPI overview picker */
.rv-overview { margin-top: 4px; }
.rv-ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rv-ov-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--rl-line); border-radius: 10px; background: #fbfcfe; padding: 11px 14px; }
.rv-ov-item.is-done { background: #fff; }
.rv-ov-name { font-weight: 600; }
.rv-ov-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rv-ov-right { flex: none; }
.rv-ov-start { padding: 6px 16px; }
/* compliment / evidence prompt */
.rv-evprompt { margin-top: 10px; }
.rv-evbody { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #cdd1dd;
  border-radius: var(--rl-btn-radius); font: inherit; min-height: 66px; resize: vertical; }
.rv-evbody:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }
.rv-evprompt-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.rv-ladder { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.rv-ladder li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #4a5066;
  background: #fff; border: 1px solid var(--rl-line); border-radius: 999px; padding: 3px 11px 3px 4px; }
.rv-ladder .n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
  height: 18px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 0.7rem; font-weight: 700; }
.rv-kpi-entry { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.rv-actual { width: 170px; max-width: 100%; padding: 8px 11px; border: 1px solid #cdd1dd;
  border-radius: var(--rl-btn-radius); font: inherit; }
.rv-actual:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }
.rv-note { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 8px 11px;
  border: 1px solid #cdd1dd; border-radius: var(--rl-btn-radius); font: inherit; }
.rv-note:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }

/* --- check-in answer chips ---------------------------------------------- */
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rv-chip { border: 1px solid #cdd1dd; background: #fff; color: var(--ink); border-radius: 999px;
  padding: 7px 15px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.rv-chip:hover { border-color: var(--navy); background: #f4f6fb; }
.rv-chip.rv-chip-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.rv-chip[disabled] { opacity: 0.55; cursor: default; }
/* Career-direction MCQ card: each group is ONE horizontal row of clickable role cards with slim
   L/R nav (thin bezel). The strip scrolls; the whole card is the pick control. (Chris, 2026-09-17.) */
.rv-dir .rv-dir-group { margin-top: 8px; }
.rv-dir .rv-dir-grouphead { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #6b7186; margin-bottom: 5px; }
.rv-dir .rv-dir-strip-wrap { display: flex; align-items: stretch; gap: 6px; }
.rv-dir .rv-dir-strip { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; flex: 1 1 auto;
  min-width: 0; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.rv-dir .rv-dir-strip::-webkit-scrollbar { display: none; }
/* Slim narrow-bezel nav flanking the row (distinct from the round chips). */
.rv-dir .rv-dir-nav { flex: none; width: 22px; padding: 0; border: 1px solid #cdd1dd;
  border-radius: 8px; background: #fff; color: var(--navy, #252a59); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.rv-dir .rv-dir-nav:hover:not(:disabled) { border-color: #aeb4c6; background: #f4f6fb; }
.rv-dir .rv-dir-nav:disabled { opacity: 0.35; cursor: default; }
.rv-dir .rv-dir-nav .rv-ico { width: 15px; height: 15px; }
/* The WHOLE card is the pick control: name+grade over the job profile; hover/focus background. */
.rv-dir .rv-dir-item { flex: 0 0 300px; max-width: 86%; box-sizing: border-box; background: #fff;
  border: 1px solid var(--rl-line, #e4e7ee); border-radius: 10px; padding: 10px 12px; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
.rv-dir .rv-dir-item:hover { background: #f4f6fb; border-color: var(--navy, #252a59); }
.rv-dir .rv-dir-item:focus-visible { outline: none; background: #eef1fb;
  border-color: var(--navy, #252a59); box-shadow: 0 0 0 2px rgba(37, 42, 89, 0.25); }
.rv-dir .rv-dir-c2 { margin-top: 4px; }
.rv-dir .rv-dir-name { font-weight: 700; color: var(--navy, #252a59); font-size: 0.95rem; }
.rv-dir .rv-dir-grade { font-size: 0.78rem; color: #6b7280; margin-top: 2px; }
.rv-dir .rv-dir-summary { font-size: 0.88rem; color: #2a3148; }
.rv-dir .rv-dir-complabel { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: #8a90a2; }
.rv-dir .rv-dir-comps { margin: 3px 0 0; padding-left: 16px; font-size: 0.82rem; color: #4b5164; }
.rv-dir .rv-dir-comps li { margin: 1px 0; }
.rv-dir .rv-dir-aitag { margin-top: 6px; display: inline-block; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; background: #eceef3;
  border-radius: 999px; padding: 2px 8px; }
.rv-dir .rv-dir-row { display: flex; flex-wrap: wrap; gap: 7px; }
.rv-dir .rv-dir-note { margin-top: 6px; color: #6b7186; font-size: 0.9rem; }
.rv-dir .rv-dir-opt { text-align: left; }
.rv-dir .rv-dir-row:last-child { margin-top: 10px; }
/* Once a direction is picked: grey + lock the whole card, keep the chosen role lit. */
.rv-dir.rv-dir-picked .rv-dir-item,
.rv-dir.rv-dir-picked .rv-dir-nav,
.rv-dir.rv-dir-picked .rv-dir-opt { pointer-events: none; }
.rv-dir.rv-dir-picked .rv-dir-item,
.rv-dir.rv-dir-picked .rv-dir-grouphead,
.rv-dir.rv-dir-picked .rv-dir-opt { opacity: 0.5; }
.rv-dir.rv-dir-picked .rv-dir-item.rv-dir-chosen { opacity: 1;
  border-color: var(--navy, #252a59); background: #eef1fb; }
/* Status snapshot card ("where am I"): every review part + state, the running KPI
   score, and next. Read-only; state pills reuse the app's status palette. */
.rv-status-card { display: flex; flex-direction: column; gap: 3px; }
.rv-status-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; }
.rv-status-row[aria-current="true"] { background: #eef0fb; box-shadow: 0 0 0 1px rgba(37,42,89,0.14); }
.rv-status-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-status-pill { flex: none; font-size: 0.66rem; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.rv-status-open { background: #fdf0e2; color: #9a5a12; }
.rv-status-waiting { background: #eef1f6; color: #566370; }
.rv-status-later { background: #f0f1f4; color: #8a90a2; }
.rv-status-done { background: #d9efe6; color: #0f6e56; }
.rv-status-meta { flex: none; font-size: 0.72rem; color: #8a90a2; text-align: right; }
.rv-status-score { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 8px 2px; border-top: 1px solid #e6e8ef; }
.rv-status-score-lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #7b8296; font-weight: 700; }
.rv-status-score-val { font-weight: 700; font-size: 0.95rem; color: var(--navy); }
.rv-status-score-cov { font-size: 0.72rem; color: #8a90a2; }
.rv-status-next { margin-top: 6px; font-size: 0.86rem; color: #6b7186; font-weight: 600; }
/* Attach: a labelled paperclip button (a file can't be pasted into the chat, so it
   must read unmistakably as "attach a file"). The busy class dims it while uploading. */
.rv-attach { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.rv-attach .rv-ico { flex: none; }
.rv-attach-lbl { font-weight: 600; }
.rv-attach-busy { opacity: 0.55; pointer-events: none; }
/* The one-tap "Attach file -- <KPI>" action (2026-09-23): leads the quick-reply row while a
   standout KPI still owes a supporting file; a navy tint so it reads as an ACTION, not a reply.
   Long KPI names truncate rather than widening the row. */
.rv-chip.rv-qr-attach { border-color: var(--navy); color: var(--navy); background: #eef2ff; max-width: 100%; }
.rv-chip.rv-qr-attach:hover { background: #e2e8fb; }
.rv-qr-attach .rv-attach-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.rv-qr-attach:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,42,89,0.28); }
@media (max-width: 480px) { .rv-qr-attach .rv-attach-lbl { max-width: 62vw; } }
/* KPI-row Files column: each file an icon + filename link (preview) + a remove x; a
   paperclip to add another. Icons inherit currentColor via .rv-ico. */
.rv-kpi-files { white-space: nowrap; }
.rv-att { display: inline-flex; align-items: center; gap: 2px; max-width: 160px;
  margin: 0 6px 3px 0; vertical-align: middle; }
.rv-att-link { display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  color: #2b5fa1; text-decoration: none; }
.rv-att-link:hover { text-decoration: underline; }
.rv-att-link .rv-ico { width: 14px; height: 14px; flex: none; }
.rv-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8rem; max-width: 120px; }
.rv-att-rm { border: none; background: none; cursor: pointer; color: #9aa0af;
  font-size: 0.95rem; line-height: 1; padding: 0 2px; }
.rv-att-rm:hover { color: #a02323; }
.rv-att-add { display: inline-flex; align-items: center; cursor: pointer; color: #6b7280;
  vertical-align: middle; }
.rv-att-add:hover { color: var(--ink); }
.rv-att-add .rv-ico { width: 15px; height: 15px; }
.rv-att-none { color: #9aa0af; }
/* Standout (AE/OU) KPI with no supporting file yet -- a required file is the step-1 gate. */
.rv-att-req { margin-left: 6px; font-size: 0.72rem; font-weight: 600; color: #9a5a12;
  background: #fdf0e2; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.rv-toggle-lbl { font-size: 0.78rem; }

/* The overall-remark block (employee) + the per-report remark (manager): a subtle text
   link that opens the .modal-card pop-out (View) / hands off to the agent (Add). */
.rv-remark-link { border: none; background: none; padding: 0; cursor: pointer;
  color: #2b5fa1; font: inherit; font-size: 0.82rem; }
.rv-remark-link:hover { text-decoration: underline; }
/* Career Plan: a field still to fill is outlined red (2026-09-28), cleared as soon as it's filled in. */
.rv-cp-need, .rv-cp-need:focus { border-color: #d64545 !important; box-shadow: 0 0 0 1px #d64545 !important; }
/* The remark help menu (2026-09-28): "Help me word it" opens three choices -- write / refine / improve clarity --
   each pre-filling the chat with a set prompt. Fixed to the page (placed by placeHelpMenu), so the scrolling table
   card never clips it: under the link, right-aligned, or above it when there's no room below. */
.rv-help-dd { position: relative; display: inline-flex; }
.rv-help-trigger { display: inline-flex; align-items: center; gap: 4px; }
.rv-help-trigger::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s ease; }
.rv-help-open .rv-help-trigger::after { transform: rotate(-135deg); margin-top: 3px; }
.rv-help-menu { position: fixed; top: 0; left: 0; z-index: 60; min-width: 212px;
  background: #fff; border: 1px solid #dde1ea; border-radius: 10px; padding: 4px;
  box-shadow: 0 8px 24px rgba(22, 30, 60, 0.14); display: flex; flex-direction: column; }
.rv-help-menu[hidden] { display: none; }
.rv-help-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  border: none; background: none; border-radius: 7px; padding: 8px 10px; cursor: pointer;
  font: inherit; font-size: 0.84rem; color: #1f2a44; white-space: nowrap; }
.rv-help-opt:hover, .rv-help-opt:focus-visible { background: #eef2fa; outline: none; }
.rv-help-note { display: none; font-size: 0.72rem; color: #9aa0af; }
.rv-help-opt.rv-help-off { color: #9aa0af; cursor: default; }
.rv-help-opt.rv-help-off:hover { background: none; }
.rv-help-opt.rv-help-off .rv-help-note { display: block; }
/* "Add remark" gets a leading + so it reads as an add action, distinct from "View". */
.rv-remark-add::before { content: "+"; margin-right: 3px; font-weight: 700; }
.rv-overall-remark { display: flex; align-items: baseline; gap: 8px; margin-top: 10px;
  padding-top: 8px; border-top: 1px solid var(--rl-line, #e6e8ef); }
.rv-or-label { font-size: 0.82rem; color: #6b7280; font-weight: 600; }
/* The remark pop-out is READ-ONLY (drafting is done by talking to the agent): a pane
   showing the saved text with line breaks kept. Reuses .modal-overlay/.modal-card. */
.rv-remark-view { white-space: pre-wrap; word-break: break-word; }
/* Labelled remark entries in the pop-out: each headed by its KPI/competency (or Overall),
   with a Demonstrate/Developing/KPI/General tag (Chris, 2026-09-15). */
.rv-remark-entry { border: 1px solid var(--rl-line, #e4e7ee); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.rv-remark-entry-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 3px; }
.rv-remark-entry-name { font-weight: 700; color: var(--navy, #252a59); }
.rv-remark-entry-desc { font-size: 0.82rem; color: #6b7280; margin: 0 0 4px; }
.rv-remark-entry-body { font-size: 0.92rem; color: #2a3148; white-space: pre-wrap; word-break: break-word; }
.rv-remark-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px; background: #eceef3; color: #4b5164; }
.rv-remark-tag-dem { background: #d9efe6; color: #0f6e56; }
.rv-remark-tag-dev { background: #fdf0e2; color: #9a5a12; }
.rv-remark-tag-kpi { background: #e0e9fb; color: #1b46b3; }
.rv-remark-tag-all { background: #eceef3; color: #4b5164; }
/* Per-remark Redraft button in each entry head (Chris, 2026-09-22): right-aligned, compact. */
.rv-remark-redraft { margin-left: auto; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  padding: 3px 12px; border-radius: 999px; border: 1px solid #c9cfdd; background: #fff; color: var(--navy, #252a59); }
.rv-remark-redraft:hover { background: #eef1f7; }

/* --- the cite turn ------------------------------------------------------- */
.rv-cite { margin-top: 14px; border-top: 1px solid var(--rl-line-soft); padding-top: 14px; }
.rv-cite-kpi { border: 1px solid var(--rl-line); border-radius: 8px; background: #fff; margin-top: 8px; }
.rv-cite-kpi > summary { cursor: pointer; padding: 9px 13px; font-weight: 600; font-size: 0.92rem; list-style: none; }
.rv-cite-kpi > summary::-webkit-details-marker { display: none; }
.rv-cite-kpi > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px;
  color: #9aa0b4; transition: transform 0.15s; }
.rv-cite-kpi[open] > summary::before { transform: rotate(90deg); }
.rv-cite-items { display: flex; flex-direction: column; gap: 6px; padding: 2px 13px 12px; }
.rv-cite-item { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45;
  padding: 6px 8px; border-radius: 7px; }
.rv-cite-item input { margin-top: 3px; flex: none; }
.rv-cite-item.rv-suggested { background: #fff8ec; box-shadow: inset 0 0 0 1px #f0d9a8; }

/* --- inline scorecard + the summary table ------------------------------- */
.rv-summary-inline { border-top: 1px solid var(--rl-line-soft); padding-top: 14px; }
.rv-summary-inline > summary { cursor: pointer; font-weight: 600; }

/* --- the conversational agent (chat) ------------------------------------ */
/* No border on the chat card -- that grey outer box made the input look
   double-boxed. A soft shadow defines the area; the composer floats as its own
   distinct input box (below). */
.rv-chat { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff;
  border-radius: var(--rl-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; }
.rv-chat-log { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 6px;
  flex: 1; min-height: 0; overflow-y: auto; }
/* No log child may be shrunk by the flex column -- each keeps its natural height
   and the log SCROLLS instead. Without this, a tall card (the scorecard) is
   crushed to a sliver and clipped behind its own auto-overflow. The KPI table
   already sets flex:none; this generalizes it to every child. */
.rv-chat-log > * { flex: none; }
.rv-msg { max-width: 80%; padding: 10px 14px; border-radius: 14px; line-height: 1.5;
  white-space: pre-wrap; font-size: 0.97rem; }
.rv-msg-agent { align-self: flex-start; background: #f2f4f9; color: var(--ink); border-bottom-left-radius: 4px; }
.rv-msg-user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
/* Read-only saved-transcript view (admin audit + employee history), reusing the chat bubbles. */
.rv-transcript { display: flex; flex-direction: column; gap: 8px; }
.rv-tx-msg { max-width: 78%; }
.rv-tx-body { white-space: pre-wrap; }
.rv-tx-when { display: block; margin-top: 4px; font-size: 0.68rem; opacity: 0.6; }
.rv-tx-card { margin-top: 4px; font-size: 0.78rem; font-style: italic; opacity: 0.7; }
.rv-tx-stage { align-self: center; margin: 12px 0 2px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.rv-cycle-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rv-cycle-pill { border: 1px solid #cdd1dd; background: #fff; color: var(--ink); border-radius: 999px;
  padding: 4px 12px; font-size: 0.82rem; text-decoration: none; }
.rv-cycle-pill:hover { border-color: var(--navy); background: #f4f6fb; }
.rv-cycle-pill.on { background: var(--navy); color: #fff; border-color: var(--navy); }
/* The in-flight "OneHR AI is working…" message: a muted line that gently pulses so it reads
   as active work rather than a stalled bubble. */
.rv-typing { color: #6b7280; font-size: 0.9rem; font-style: italic;
  animation: rvTypingPulse 1.4s ease-in-out infinite; }
@keyframes rvTypingPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rv-typing { animation: none; } }
.rv-card { max-width: 100%; overflow-x: auto; }
.rv-scorecard { min-width: 360px; }
.rv-scorecard { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.rv-scorecard th, .rv-scorecard td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rl-line); }
.rv-scorecard th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7186; font-weight: 700; }
.rv-scorecard td:first-child { font-weight: 600; }
.rv-scorecard-overall { margin-top: 8px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
/* The sign-off / double-verification card reads as a real bordered WHITE card (house
   style), not the grey agent chat bubble it inherits from .rv-msg-agent. */
.rv-confirm, .rv-remark-guide, .rv-fb-remark-guide { background: #fff; border: 1px solid var(--rl-line); border-radius: var(--rl-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 14px 16px; }
/* The 360 step-2 guide (2026-09-23): the reference list of fully-demonstrated principles is a
   quiet, display-only list (no tags, no buttons). Help line hides once inert. */
.rv-fb-remark-guide .rv-fb-strong { margin: 4px 0 2px; }
.rv-fb-remark-guide.rv-remark-guide-done .rv-rg-help { display: none; }
.rv-fb-sum-remark { margin-top: 10px; }
.rv-fb-sum-remark .rv-remark-redraft { display: block; margin: 8px 0 0 auto; }
/* The KPI check-in's STEP-2 guide (2026-09-23): why the overall remark matters + a STAR outline +
   a "Help me draft it with STAR" button. Not a sign-off, so it is not .rv-confirm (typing a
   message must not grey it); it goes inert once the remark is saved. */
.rv-rg-why { margin: 0 0 4px; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.rv-rg-star { margin: 0; padding-left: 18px; font-size: 0.9rem; line-height: 1.45; }
.rv-rg-star li { margin: 3px 0; }
.rv-rg-target, .rv-rg-help { margin: 8px 0 0; font-size: 0.86rem; color: #6b6f76; }
.rv-remark-guide-done .rv-rg-help { display: none; }
/* Competency + development-plan sign-off summary lines (were unstyled default text). */
.rv-plan-action { font-size: 0.92rem; color: var(--ink); padding: 5px 0; line-height: 1.45;
  border-bottom: 1px solid var(--rl-line-soft); }
.rv-plan-action:last-child { border-bottom: none; }
/* The final sign-off (confirm) card + the pending/confirmed state chip. */
.rv-confirm-warn { background: #fdf3e6; border: 1px solid #eccf9f; color: #8a5a12;
  border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; margin-bottom: 10px; }
/* A gentle, non-blocking nudge on the sign-off card: an underperforming line with no note. */
.rv-confirm-note { margin-top: 10px; font-size: 0.86rem; color: #6b6f76; }
.rv-confirm-head { font-weight: 700; margin: 4px 0 6px; }
.rv-confirm-subhead { font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: #6b7186; margin: 12px 0 4px; }
.rv-confirm-just { margin: 0; padding-left: 18px; font-size: 0.92rem; }
.rv-confirm-just li { margin: 3px 0; }
.rv-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; justify-content: flex-end; }
.rv-confirm-yes { padding: 9px 18px; border: none; border-radius: 8px; background: var(--navy);
  color: #fff; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rv-confirm-yes:hover { filter: brightness(1.08); }
.rv-confirm-yes:disabled { opacity: 0.55; cursor: default; }
.rv-confirm-no { padding: 9px 16px; border: 1px solid var(--rl-line); border-radius: 8px;
  background: #fff; font: inherit; color: #3a3f52; cursor: pointer; white-space: nowrap; }
.rv-confirm-no:hover { background: #f5f6fa; }
/* A phone: "Add remark" + "Submit feedback" were squeezed into the row and each wrapped onto two
   lines (measured at 375px, 2026-09-23). Tighter padding keeps both on one line; below that the
   row wraps (Submit drops under) rather than breaking the button text. */
@media (max-width: 560px) {
  .rv-confirm-actions .rv-confirm-yes { padding: 9px 14px; }
  .rv-confirm-actions .rv-confirm-no { padding: 9px 12px; }
}
.rv-confirm-done { opacity: 0.9; }
/* The "locked in" line on a replayed, already-submitted confirm card (no button). */
.rv-confirm-locked { margin-top: 12px; font-size: 0.86rem; font-weight: 600; color: #3f8377; }
.rv-confirm-state { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.rv-confirm-state-pending { background: #fdf0e2; color: #9a5a12; border: 1px solid #eccf9f; }
.rv-confirm-state-done { background: #d9efe6; color: #0f6e56; border: 1px solid #a9d8c6; }
/* --- demo-only controls (ZZ accounts): reset + mechanism switch ----------- */
/* Sits in the header row (right of the title) so it adds no height to the chat.
   Dashed amber so it never reads as product chrome -- it is a tester's tool. */
.page-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rv-demobar { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 9px; border: 1px dashed #c8a24a; border-radius: 10px; background: #fdf7e8; }
.rv-demobar-lbl { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9a6a12; }
.rv-demobar-seg { display: inline-flex; border: 1px solid #e0cfa0; border-radius: 8px; overflow: hidden; }
.rv-demobar-seg form { margin: 0; }
.rv-demoseg { padding: 4px 12px; border: none; border-right: 1px solid #e0cfa0; background: #fff;
  font: inherit; font-size: 0.78rem; color: #6b5a2e; cursor: pointer; }
.rv-demobar-seg form:last-child .rv-demoseg { border-right: none; }
.rv-demoseg:hover { background: #fbf0d6; }
.rv-demoseg.active { background: #9a6a12; color: #fff; }
.rv-demoreset { margin: 0 0 0 auto; }
.rv-demoreset-btn { padding: 4px 12px; border: 1px solid #d9b98f; border-radius: 8px; background: #fff;
  font: inherit; font-size: 0.78rem; color: #8a4b1d; cursor: pointer; }
.rv-demoreset-btn:hover { background: #fbeee2; }
/* Banner variant: the demo strip lives in the navy topbar now (temporary; deleted
   for live). No light box on the dark bar -- just a dashed edge + a light label;
   the white/amber pills read fine on navy. Sits before Account in .nav-links. */
.rv-demobar-nav { background: transparent; border: 1px dashed rgba(255,255,255,0.30);
  padding: 3px 8px; margin-left: 10px; }
.rv-demobar-nav .rv-demobar-lbl { color: rgba(255,255,255,0.62); }

/* --- the slim status header (replaces the pinned table) -------------------- */
/* A short flex:none header ABOVE the scrolling log: progress dots, the current
   KPI, the weighted Final stat, and a Details toggle. The full table lives in the
   Details drawer below it; result entry lives in an inline focus card in the chat. */
.rv-kpi-pin { flex: none; margin: 0; }
.rv-kpi-pin:empty { display: none; }
.rv-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; background: #fff; border: 1px solid var(--rl-line); border-radius: 12px; }
.rv-dots { display: flex; align-items: center; gap: 5px; }
.rv-dot { width: 9px; height: 9px; border-radius: 50%; background: #d3d7e2; box-sizing: border-box; }
.rv-dot-done { background: #7b8296; }
.rv-dot-current { background: #fff; border: 2px solid var(--navy); }
.rv-dot-done[data-band="UA"] { background: #d84a4a; }
.rv-dot-done[data-band="BE"] { background: #e0902f; }
.rv-dot-done[data-band="ME"] { background: #3a86d6; }
.rv-dot-done[data-band="AE"] { background: #4e9a3f; }
.rv-dot-done[data-band="OU"] { background: #2f8f6f; }
.rv-now { font-size: 0.9rem; min-width: 0; }
.rv-now-lbl { color: #7b8296; }
.rv-now-kpi { font-weight: 700; }
.rv-status-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Expand / minimize the KPI table. */
.rv-table-toggle { flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border: 1px solid var(--rl-line); border-radius: 8px;
  background: #fff; font: inherit; font-size: 0.78rem; color: #3a3f52; cursor: pointer; white-space: nowrap; }
.rv-table-toggle:hover { background: #f5f6fa; }
.rv-final-stat { display: flex; align-items: center; gap: 7px; padding: 3px 10px;
  background: #f5f6fa; border: 1px solid var(--rl-line); border-radius: 20px; }
.rv-final-lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #7b8296; font-weight: 700; }
.rv-final-num { font-weight: 700; white-space: nowrap; }
.rv-final-cov { font-size: 0.68rem; color: #8a90a2; }
.rv-details-toggle { flex: none; padding: 5px 12px; border: 1px solid var(--rl-line); border-radius: 8px;
  background: #fff; font: inherit; font-size: 0.8rem; color: #3a3f52; cursor: pointer; }
.rv-details-toggle:hover { background: #f5f6fa; }
.rv-details-toggle[aria-expanded="true"] { background: #eef0f6; border-color: #c7ccda; }
/* The Details drawer -- the read-only full table, bounded + scrolling, on demand. */
.rv-details { margin-top: 8px; max-height: 40vh; overflow: auto;
  background: #fff; border: 1px solid var(--rl-line); border-radius: 12px; padding: 8px 12px; }
.rv-details[hidden] { display: none; }
/* The inline FOCUS CARD for the current KPI -- its own surface within the chat. */
.rv-focus { max-width: 88%; align-self: flex-start; background: #fff;
  border: 1px solid var(--rl-line); border-radius: 14px; border-bottom-left-radius: 4px;
  box-shadow: 0 2px 10px rgba(20,24,45,0.06); padding: 12px 14px; }
.rv-focus-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.rv-focus-name { font-weight: 700; font-size: 0.98rem; }
.rv-focus-meta { font-size: 0.78rem; color: #6b7186; }
.rv-focus .rv-scale-grid { margin: 0 0 12px; }
.rv-focus-body { display: flex; }
.rv-focus-doneline { font-size: 0.94rem; }
.rv-focus-tick { color: #2f8f6f; font-weight: 700; }
.rv-focus-pill { margin-left: 6px; }
.rv-kpi-pin-flash { animation: rvPinFlash 1.1s ease-out; }
@keyframes rvPinFlash { 0% { box-shadow: 0 0 0 3px rgba(37,42,89,0.28); } 100% { box-shadow: none; } }
/* "Show me the table" highlights the ONE live stage card (journey) rather than adding a copy. */
.rv-stage-card.rv-flash { animation: rvPinFlash 1.1s ease-out; }

/* One row per KPI. Mech A puts the rating rungs 1-5 in the header; the weighted
   Final score is an isolated column on the right. Wider than the chat -> the
   card scrolls horizontally on a phone. */
.rv-kpi-overview { width: 100%; }
/* The full editable KPI table OVERLAYS the top of the chat (position:absolute
   inside the positioned .rv-chat) -- so toggling "KPIs" floats it OVER the
   conversation without pushing the dialogue down. Built once, rows updated in
   place (inputs survive); .rv-chat's overflow:hidden clips it to the chat card. */
.rv-kpi-inline { position: absolute; top: 8px; left: 12px; right: 12px; z-index: 6;
  max-height: 72%; overflow: auto;
  border: 1px solid var(--rl-line); border-radius: 12px;
  background: #fff; padding: 6px 12px 8px; box-shadow: 0 10px 28px rgba(20,24,45,0.20); }
/* No fixed min-width: the flat table fills the chat (width:100%) and its
   overflow-x:auto scroller kicks in ONLY when the columns' own content genuinely
   cannot fit -- so a roomy chat never shows a needless horizontal scrollbar.
   (The .rv-kpi-mechA/mechB rules were dead -- those classes are never applied.) */
.rv-kpi-flat td { vertical-align: middle; }
.rv-kpi-flat thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
/* The total-score row: the weighted overall + performance band, set apart as a summary
   row at the bottom of the KPI table. The value group is right-aligned. */
.rv-kpi-total td { border-top: 2px solid var(--rl-line, #e4e7ee); background: #f2f4f8; padding-top: 9px; padding-bottom: 9px; }
.rv-kpi-total-row { display: flex; align-items: center; gap: 9px; }
.rv-kpi-total-lbl { font-weight: 700; color: var(--navy, #252a59); }
.rv-kpi-total-val { margin-left: auto; font-weight: 700; font-size: 0.98rem; color: var(--navy, #252a59); }
.rv-kpi-total-none { color: #8a90a2; }
.rv-kpi-total-cov { font-size: 0.78rem; color: #8a90a2; font-weight: 600; }
/* A clear gap between the last rating column and the Result column. */
.rv-kpi-flat .rv-kpi-result { padding-left: 26px; }
.rv-kpi-cell { min-width: 150px; }
.rv-kpi-name { font-weight: 700; }
.rv-kpi-meta { font-weight: 400; font-size: 0.78rem; color: #6b7186; margin-top: 1px; }
/* The KPI description under the name in the setting/check-in table cell (scoped so
   it doesn't inherit the larger generic .rv-kpi-desc used elsewhere). */
.rv-kpi-cell .rv-kpi-desc { font-weight: 400; font-size: 0.76rem; color: #7a8092;
  margin: 2px 0 0; line-height: 1.35; max-width: 340px; }
/* Rating scale 1-5 as header columns (Mech A): the group head spans them, each
   rung is a centered cell, and the landed rung is filled + coloured by band. */
.rv-scale-grouphead { text-align: center; }
.rv-rung-head { text-align: center; width: 52px; }
.rv-rung { text-align: center; font-variant-numeric: tabular-nums; color: #6b7186;
  transition: background-color .2s ease, box-shadow .2s ease; }
.rv-rung.rv-scale-hit { font-weight: 700; border-radius: 6px; }
/* Live "glow" as the employee types a result on the check-in (Mechanism A): the rung
   the value lands on lights up before Save. The band tint comes from
   .rv-scale-hit[data-band]; this only adds the glow ring + a brief entry animation.
   The committed post-save rung keeps the steady band fill (no .rv-scale-live). */
@keyframes rvRungGlow {
  from { box-shadow: 0 0 0 0 rgba(37, 64, 110, 0.40); }
  to   { box-shadow: 0 0 0 3px rgba(37, 64, 110, 0.16), 0 0 10px rgba(37, 64, 110, 0.22); }
}
.rv-rung.rv-scale-live { position: relative; z-index: 1;
  box-shadow: 0 0 0 3px rgba(37, 64, 110, 0.16), 0 0 10px rgba(37, 64, 110, 0.22);
  animation: rvRungGlow .25s ease-out; }
/* Mechanism B: the live glow lights the achievement-% Rating cell (there is no 1-5 rung).
   The band fill still comes from .rv-rating-cell[data-band]; this only adds the glow. */
.rv-rating-cell { transition: box-shadow .2s ease; }
.rv-rating-cell.rv-rating-live { position: relative; z-index: 1;
  box-shadow: 0 0 0 3px rgba(37, 64, 110, 0.16), 0 0 10px rgba(37, 64, 110, 0.22);
  animation: rvRungGlow .25s ease-out; }
.rv-rung.rv-scale-hit[data-band="UA"] { background: #fbecec; color: #a12b2b; }
.rv-rung.rv-scale-hit[data-band="BE"] { background: #fdf0e2; color: #9a5a12; }
.rv-rung.rv-scale-hit[data-band="ME"] { background: #e6f1fb; color: #185fa5; }
.rv-rung.rv-scale-hit[data-band="AE"] { background: #e4f3e0; color: #3b6d11; }
.rv-rung.rv-scale-hit[data-band="OU"] { background: #d9efe6; color: #0f6e56; }
/* The "before" rung on a manager moderation ladder: the employee's own rung when the
   manager moved to a different one -- dampened + struck through, same per-band tint. */
.rv-rung.rv-scale-was { border-radius: 6px; opacity: 0.45; text-decoration: line-through; }
.rv-rung.rv-scale-was[data-band="UA"] { background: #fbecec; color: #a12b2b; }
.rv-rung.rv-scale-was[data-band="BE"] { background: #fdf0e2; color: #9a5a12; }
.rv-rung.rv-scale-was[data-band="ME"] { background: #e6f1fb; color: #185fa5; }
.rv-rung.rv-scale-was[data-band="AE"] { background: #e4f3e0; color: #3b6d11; }
.rv-rung.rv-scale-was[data-band="OU"] { background: #d9efe6; color: #0f6e56; }
/* Mech B / mixed fallback: the per-row scale strip in one column. */
.rv-scale-cell { min-width: 240px; }
.rv-scale-grid { display: grid; gap: 3px; }
.rv-scale-col { display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 2px; border-radius: 6px; line-height: 1.15; }
.rv-scale-lbl { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; color: #9099ad; }
.rv-scale-val { font-size: 0.8rem; color: #4a5064; font-variant-numeric: tabular-nums; }
.rv-scale-col.rv-scale-hit { background: rgba(63,131,119,0.16); }
/* Mechanism B: a dedicated per-KPI Rating column (no rung to colour). The value
   + band pill, lightly band-tinted for parity with Mech A's coloured rung. */
.rv-rating-cell { white-space: nowrap; }
.rv-rating-val { font-weight: 700; margin-right: 6px; }
.rv-rating-pill { vertical-align: middle; }
.rv-rating-cell[data-band="UA"] { background: #fbecec; }
.rv-rating-cell[data-band="BE"] { background: #fdf0e2; }
.rv-rating-cell[data-band="ME"] { background: #e6f1fb; }
.rv-rating-cell[data-band="AE"] { background: #e4f3e0; }
.rv-rating-cell[data-band="OU"] { background: #d9efe6; }
/* The result field, or the recorded value. */
.rv-res-entry { display: flex; gap: 6px; align-items: center; }
.rv-res-input { width: 100%; min-width: 96px; max-width: 200px; box-sizing: border-box;
  padding: 6px 8px; border: 1px solid #cdd1dd; border-radius: 8px;
  font: inherit; font-size: 0.84rem; background: #fff; }
.rv-res-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }
/* The journey's KPI check-in (the UX review's F7, 2026-10-08): the box, then its unit after it ("RM (mil)") -- the
   unit used to sit in the placeholder, which the 96px box cut to "Result (RM (". The card takes the chat's full width,
   as the Talent Box and the calibration cards do, so the table fits it with no sideways scrollbar. */
.rv-res-field { display: flex; align-items: center; gap: 6px; }
.rv-res-field .rv-res-input { flex: none; width: 112px; min-width: 0; }
.rv-res-unit { font-size: 0.8rem; color: #6b7186; white-space: nowrap; }
.rv-stage-card:has(.rv-kpi-overview), .rv-stage-snapshot:has(.rv-kpi-overview) { width: 100%; }
/* A muted "No note added" placeholder on the confirm scorecard, so a missing per-KPI note
   is visible at sign-off (the notes themselves are drafted with the agent). */
.rv-sc-note-none { color: #9aa0ad; font-style: italic; }
/* Competency reflection draft card + the >80% demonstrated-list challenge. */
.rv-reflection-text { margin: 8px 0 4px; padding: 10px 12px; background: #f4f6fb; border: 1px solid #e2e6f0;
  border-radius: 8px; font-size: 0.92rem; line-height: 1.5; color: #2a2f45; white-space: pre-wrap; }
.rv-demo-list { margin: 8px 0 0; padding-left: 18px; }
.rv-demo-list li { margin: 3px 0; font-size: 0.9rem; }
.rv-demo-tag { font-size: 0.76rem; padding: 1px 7px; border-radius: 6px; margin-left: 6px; }
.rv-demo-ok .rv-demo-tag { background: #d9efe6; color: #0f6e56; }
.rv-demo-missing .rv-demo-tag { background: #fdf0e2; color: #9a5a12; }
.rv-demo-list li { margin-bottom: 12px; }
/* The head row of a justify item: name + tag, and (for a needs-a-comment item) a right-aligned
   "Add comment" pick button so the person can choose which principle to comment on (Chris, 2026-09-22). */
.rv-demo-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rv-demo-pick { margin-left: auto; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  padding: 3px 12px; border-radius: 999px; border: 1px solid #c9cfdd; background: #fff; color: var(--navy, #252a59); }
.rv-demo-pick:hover { background: #eef1f7; }
/* Both levels of a competency, side by side (no labels) -- each column its own descriptor + abilities,
   a faint left rule so the two read as distinct without a header. Stacks on a narrow screen. */
.rv-demo-levels { display: flex; gap: 16px; margin-top: 4px; }
.rv-demo-level { flex: 1 1 0; min-width: 0; padding-left: 10px; border-left: 2px solid #e3e5ec; }
@media (max-width: 640px) { .rv-demo-levels { flex-direction: column; gap: 8px; } }
/* Career Plan editable widget: dev-plan goal cards + profile fields, on a grey ground
   (mirroring the standalone IDP module's goal cards + profile sections). */
.rv-cp-pin { display: flex; flex-direction: column; gap: 14px; }
.rv-cp-sec { background: #f4f5f8; border-radius: 12px; padding: 10px 12px; }
.rv-cp-goals { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.rv-cp-goal { background: #fff; border: 1px solid var(--rl-line, #e4e7ee); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.rv-cp-area, .rv-cp-act, .rv-cp-input { width: 100%; box-sizing: border-box; padding: 7px 10px;
  border: 1px solid #cdd1dd; border-radius: 8px; font: inherit; }
.rv-cp-area { font-weight: 600; }
.rv-cp-act, .rv-cp-input { resize: vertical; }
.rv-cp-area:focus, .rv-cp-act:focus, .rv-cp-input:focus, .rv-cp-date:focus, select.rv-cp-input:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }
.rv-cp-mode { display: flex; flex-direction: column; gap: 3px; }
.rv-cp-mode-lbl { font-size: 0.78rem; color: #6b7280; font-weight: 600; }
.rv-cp-daterow { display: flex; align-items: center; gap: 8px; }
.rv-cp-datelbl { font-size: 0.8rem; color: #6b7280; }
.rv-cp-date { padding: 6px 9px; border: 1px solid #cdd1dd; border-radius: 8px; font: inherit; }
.rv-cp-remove { align-self: flex-start; padding: 3px 12px; border: 1px solid #e0c3c3; border-radius: 999px;
  background: #fff; color: #9a3b3b; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.rv-cp-remove:hover { background: #fbeaea; }
.rv-cp-add { margin-top: 10px; padding: 6px 14px; border: 1px dashed #b9c0d4; border-radius: 8px;
  background: #fff; color: var(--navy, #252a59); font: inherit; font-weight: 600; cursor: pointer; }
.rv-cp-add:hover { background: #eef1f7; }
.rv-cp-grp { margin-top: 8px; }
.rv-cp-grp-lbl { font-size: 0.82rem; font-weight: 700; color: var(--navy, #252a59); margin: 8px 0 4px; }
.rv-cp-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.rv-cp-lbl { font-size: 0.82rem; font-weight: 600; color: #333; }
.rv-cp-hint { font-size: 0.76rem; color: #6b7280; }
select.rv-cp-input { background: #fff; }
.rv-cp-foot { align-self: stretch; }
/* Career Plan is paged one section at a time: every page is built (inputs stay in the DOM),
   only the current one is shown. A profile-section page gets the same grey card as the
   dev-goals page for a consistent look; the section label lives in the pager's nav bar. */
.rv-cp-pages { display: block; }
.rv-cp-page[hidden] { display: none; }
.rv-cp-page > .rv-cp-grp { background: #f4f5f8; border-radius: 12px; padding: 10px 12px; margin-top: 0; }
@media (max-width: 480px) { .rv-cp-daterow { flex-wrap: wrap; } .rv-cp-date { width: 100%; } }
.rv-res-save { flex: none; padding: 7px; border: none; border-radius: 8px;
  background: var(--navy); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.rv-res-save:hover { filter: brightness(1.08); }
.rv-res-save:disabled { opacity: 0.55; cursor: default; }
.rv-res-val { font-weight: 700; }
/* A BU-level KPI's result cell before HR fills it: read-only "Filled by HR". */
.rv-res-hr { font-size: 0.82em; font-style: italic; color: var(--muted, #6b7280); white-space: nowrap; }

/* --- KPI-setting widget (setting_chat.js) -------------------------------- */
/* The running weight total in the summary line: green when it hits 100%, amber
   while it is short/over -- the single most important signal while building. */
.rv-weight-total { display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.rv-weight-total.rv-weight-ok { background: #d9efe6; color: #0f6e56; border: 1px solid #a9d8c6; }
.rv-weight-total.rv-weight-short { background: #fdf0e2; color: #9a5a12; border: 1px solid #eccf9f; }
.rv-weight-lbl { font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; opacity: 0.75; }
.rv-weight-num { font-variant-numeric: tabular-nums; }
/* The inline weight editor in the table (input + % + Save). */
.rv-weight-input { width: 62px; text-align: right; }
.rv-weight-pct { font-size: 0.82rem; color: #6b7280; }
/* Per-KPI completeness: a green tick once its numbers are in, a muted note else. */
.rv-set-complete { color: #0f6e56; display: inline-flex; align-items: center; }
.rv-set-complete .rv-ico { width: 18px; height: 18px; }
.rv-set-incomplete { font-size: 0.74rem; color: #9a5a12; }
.rv-set-status { white-space: nowrap; }
.rv-scale-empty { font-size: 0.74rem; color: #8a90a2; font-style: italic; }
.rv-scorecard-overall.rv-weight-short { color: #9a5a12; }

/* --- Competency widget (competency_chat.js) ------------------------------ */
/* A category subheading row inside the competency list. */
.rv-tc-cat td { background: #eef1f7; font-weight: 700; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: #4a5169; padding: 5px 10px; }
/* The Demonstrate / Developing two-button rating control (editable). */
.rv-tc-answer { display: inline-flex; gap: 6px; }
.rv-tc-btn { padding: 5px 12px; border: 1px solid #cdd1dd; border-radius: 999px;
  background: #fff; font: inherit; font-size: 0.8rem; cursor: pointer; white-space: nowrap; color: #3a4158; }
.rv-tc-btn:hover { border-color: #aeb4c6; }
.rv-tc-btn-yes.rv-tc-on { background: #d9efe6; color: #0f6e56; border-color: #a9d8c6; font-weight: 700; }
.rv-tc-btn-no.rv-tc-on { background: #fdf0e2; color: #9a5a12; border-color: #eccf9f; font-weight: 700; }
.rv-tc-answer-cell { white-space: nowrap; }
/* Read-only answer (submitted, or in a snapshot card). */
.rv-tc-static { font-weight: 700; }
.rv-tc-static.rv-tc-is-yes { color: #0f6e56; }
.rv-tc-static.rv-tc-is-no { color: #9a5a12; }
/* The section nav bar at the top of the floating competency card: name + counter on
   the left, prev/next in the top-right corner. */
.rv-tc-navbar { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 4px 8px; border-bottom: 1px solid var(--rl-line, #e6e8ef); margin-bottom: 4px; }
.rv-tc-navname { font-weight: 700; font-size: 0.9rem; color: #2f3552; }
.rv-tc-navcount { font-size: 0.74rem; color: #8a90a2; margin-left: 6px; }
.rv-tc-nav { display: inline-flex; gap: 6px; flex: none; }
.rv-tc-navbtn { width: 28px; height: 28px; padding: 0; border: 1px solid #cdd1dd; border-radius: 8px;
  background: #fff; color: #3a4158; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rv-tc-navbtn:hover:not(:disabled) { border-color: #aeb4c6; }
.rv-tc-navbtn:disabled { opacity: 0.4; cursor: default; }
.rv-tc-navbtn .rv-ico { width: 16px; height: 16px; }
/* Section paging as two THIN FULL-HEIGHT SIDE STRIPS on the card (Chris, 2026-09-24) -- the whole edge
   is the target, for the 360, the competency board and the Career Plan. The card drops its padding so
   the strips sit flush with its edges (overflow clips them to its rounded corners); the widget gets
   the padding back inside. The strip at an end is dimmed and inert; one section hides both. */
.rv-stage-card:has(> .rv-bz) { padding: 0; overflow: hidden; }
.rv-bz { display: flex; align-items: stretch; min-width: 0; }
.rv-bz-body { flex: 1 1 auto; min-width: 0; padding: 10px 14px; }
.rv-bz-btn { flex: 0 0 22px; width: 22px; padding: 0; border: 0; background: #e8ebf3; color: #5b6275;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s; }
.rv-bz-prev { border-right: 1px solid #dde1ea; }
.rv-bz-next { border-left: 1px solid #dde1ea; }
.rv-bz-btn:hover:not(:disabled) { background: #d9e0f3; color: var(--navy); }
.rv-bz-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.rv-bz-btn:disabled { cursor: default; background: #eef0f5; color: #c9cedb; }
.rv-bz-btn .rv-ico { width: 16px; height: 16px; }
.rv-bz.rv-bz-single > .rv-bz-btn { display: none; }
.rv-stage-snapshot .rv-bz-btn { display: none; }
@media (prefers-reduced-motion: reduce) { .rv-bz-btn { transition: none; } }
@media (max-width: 560px) {
  .rv-bz-btn { flex-basis: 18px; width: 18px; }
  .rv-bz-body { padding: 10px; }
}
/* The competency the agent is currently on -- a subtle highlight. */
.rv-tc-focus > td { background: #eef1fb; }
/* 360 peer selector: ONE scrollable row of colleagues + L/R arrows (.rv-tc-navbtn).
   A done colleague (every behaviour answered) is greyed; the focused one wins. */
.rv-fb-peers { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.rv-fb-strip { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; flex: 1 1 auto;
  min-width: 0; padding: 2px 1px; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.rv-fb-strip::-webkit-scrollbar { display: none; }
.rv-fb-chip { flex: 0 0 auto; white-space: nowrap; border: 1px solid #cdd1dd; border-radius: 999px;
  background: #fff; color: #3a4158; font-family: inherit; font-size: 0.82rem; line-height: 1.2;
  padding: 5px 12px; cursor: pointer; }
.rv-fb-chip:hover { border-color: #aeb4c6; }
.rv-fb-chip.rv-fb-done { color: #9aa0b0; background: #f4f5f8; border-color: #e4e7ee; }
.rv-fb-chip.rv-fb-on { border-color: var(--navy, #252a59); background: #e8edfa;
  color: var(--navy, #252a59); font-weight: 600; }
/* Competency / 360 card row: the title + ability items on the left, the
   Demonstrate/Developing buttons on the right BOTTOM-aligned with the content -- level
   with the last line, so there's no empty band below the card (Chris, 2026-09-09). */
.rv-fb-row.rv-tc-row { display: flex; align-items: flex-end; }
.rv-tc-cell { flex: 1 1 auto; min-width: 0; }
.rv-tc-detail { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.rv-tc-abilities { margin: 5px 0 0; padding-left: 16px; font-size: 0.8rem; color: #6b7280; }
.rv-tc-abilities li { margin: 1px 0; }
/* In-chat widget wrapper + its header (were unstyled): even spacing, a real heading.
   .rv-fb-head is shared by competency / career / gaps / routes / manager heads. */
.rv-tc-pin { display: flex; flex-direction: column; gap: 10px; }
.rv-fb-head { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.rv-fb-text { font-weight: 600; }
/* Modern Demonstrate/Developing (and 360 Yes/Not-yet) pill buttons -- the .rv-fb-btn
   family had no styling and fell back to plain default buttons. Same palette as the
   standalone competency widget's .rv-tc-btn so the two never drift. */
.rv-fb-btns { display: inline-flex; gap: 6px; flex: none; }
.rv-fb-btn { padding: 6px 14px; border: 1px solid #cdd1dd; border-radius: 999px;
  background: #fff; font: inherit; font-size: 0.84rem; font-weight: 600; color: #3a4157;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.rv-fb-btn:hover { border-color: #aeb4c6; background: #f7f8fb; }
.rv-fb-btn-yes.rv-fb-btn-on { background: #d9efe6; color: #0f6e56; border-color: #a9d8c6; font-weight: 700; }
.rv-fb-btn-no.rv-fb-btn-on { background: #fdf0e2; color: #9a5a12; border-color: #eccf9f; font-weight: 700; }
/* Competency widget only (scoped by .rv-tc-grp): each competency a white card on a
   light-grey ground, so the board reads in bands like the KPI table. 360 rows (plain
   .rv-fb-grp, no .rv-tc-grp) are untouched. */
.rv-tc-grp { background: #f4f5f8; border-radius: 12px; padding: 8px;
  display: flex; flex-direction: column; gap: 8px; }
.rv-tc-grp .rv-tc-row { background: #fff; border: 1px solid var(--rl-line, #e4e7ee);
  border-radius: 10px; padding: 10px 12px; margin: 0; gap: 10px; }
/* The Demonstrate/Developing buttons sit below the descriptor, aligned to the card's
   right edge (Chris, 2026-09-07) -- both 360 and competency, since both are .rv-tc-grp. */
.rv-tc-grp .rv-fb-btns { display: flex; justify-content: flex-end; }
/* A competency assessed at two levels is ONE card (the UX review's F13, 2026-10-08): its title, then each level as a
   row divided by a hairline, like a 360 principle and its behaviours -- the levels stay unlabelled. */
.rv-tc-grp .rv-tc-comp { background: #fff; border: 1px solid var(--rl-line, #e4e7ee); border-radius: 10px;
  padding: 10px 12px 2px; }
.rv-tc-grp .rv-tc-comp > .rv-tc-row { background: transparent; border: 0; border-top: 1px solid #eef0f5;
  border-radius: 0; padding: 10px 0 10px 10px; margin-top: 8px; }
.rv-tc-grp .rv-tc-comp > .rv-tc-row + .rv-tc-row { margin-top: 0; }
.rv-tc-comp .rv-tc-detail { font-size: 0.86rem; color: #2a2f45; margin-top: 0; }
/* On a phone the two buttons (~225px) leave no room beside the text in a nowrap row -- the text
   column was crushed to ~6px, one word per line (measured, 2026-09-23). Stack the text above the
   buttons instead (buttons stay right-aligned). */
@media (max-width: 560px) {
  .rv-fb-row.rv-tc-row { flex-direction: column; align-items: stretch; }
}
/* A 360 behaviour still unanswered: a red inset bar + reddish border so the incomplete
   principle stands out when the agent asks the person to finish it (Chris, 2026-09-22).
   No layout shift -- the card already carries a 1px border. */
.rv-tc-grp .rv-fb-row.rv-fb-row-todo { border-color: #e0a3a3;
  box-shadow: inset 3px 0 0 #d64545; }
/* ...and only once they've pressed Save (the UX review's F6, 2026-10-08): the line above the rows says how many are
   still to answer and whether any are on this page. */
.rv-todo-note { margin: 6px 0 8px; font-size: 0.82rem; line-height: 1.35; color: #a3312f; }
/* Competency board LOCKED after Save (journey only): every competency has a saved answer
   and nothing is pending, so the marking board is read-only -- greyed out, with the
   Demonstrate/Developing buttons disabled. Section paging (the arrows) stays live so the
   saved answers can still be reviewed. (Chris, 2026-09-15.) */
.rv-tc-pin.rv-tc-locked .rv-tc-grp { opacity: 0.6; filter: grayscale(1); }
.rv-tc-pin.rv-tc-locked .rv-fb-btn { cursor: default; }
/* The 360 submission-summary card: each principle a white card on a grey ground
   (matching the assessment widget), name on the left, the Demonstrated/Developing
   counts in two fixed-width columns so they line up across the cards, colour-coded
   to match the buttons (Chris, 2026-09-07). */
.rv-fb-sum { background: #f4f5f8; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.rv-fb-sum-card { background: #fff; border: 1px solid var(--rl-line, #e4e7ee); border-radius: 10px; padding: 10px 12px; }
.rv-fb-sum-row { display: flex; align-items: baseline; gap: 10px; }
.rv-fb-sum-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--navy, #252a59); }
.rv-fb-sum-dem, .rv-fb-sum-dev { flex: none; text-align: right; white-space: nowrap; font-size: 0.86rem; font-weight: 700; }
.rv-fb-sum-dem { width: 120px; color: #0f6e56; }
.rv-fb-sum-dev { width: 100px; color: #9a5a12; }
.rv-fb-sum-comment { font-size: 0.82rem; color: #6b7280; font-style: italic; margin: 6px 0 0; }
@media (max-width: 480px) {
  .rv-fb-sum-row { flex-wrap: wrap; }
  .rv-fb-sum-name { flex: 1 0 100%; }
  .rv-fb-sum-dem { width: auto; text-align: left; }
  .rv-fb-sum-dev { width: auto; margin-left: auto; }
}
/* Competency sign-off summary: mirrors the assessment board (.rv-tc-grp) it summarizes --
   grouped by category, a white row per competency on a grey ground, a right-aligned
   colour-coded verdict pill. Reuses the board's Demonstrate green / Developing amber. */
.rv-tc-sum { background: #f4f5f8; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.rv-tc-sum-group { display: flex; flex-direction: column; gap: 6px; }
.rv-tc-sum-cat { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7186; padding: 0 2px; }
.rv-tc-sum-row { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--rl-line, #e4e7ee); border-radius: 10px; padding: 9px 12px; }
.rv-tc-sum-cell { flex: 1 1 auto; min-width: 0; }
.rv-tc-sum-name { font-weight: 600; color: var(--navy, #252a59); }
.rv-tc-sum-desc { font-size: 0.82rem; color: #6b7280; margin-top: 2px; line-height: 1.35; }
.rv-tc-sum-verdict { flex: none; font-size: 0.74rem; font-weight: 700; border-radius: 20px; padding: 3px 11px; white-space: nowrap; }
.rv-tc-sum-verdict[data-answer="yes"] { background: #d9efe6; color: #0f6e56; }
.rv-tc-sum-verdict[data-answer="no"] { background: #fdf0e2; color: #9a5a12; }
.rv-tc-sum-verdict[data-answer=""] { background: #f0f1f4; color: #8a90a2; }
/* The competency final card pages one section at a time between the thin side strips, with the remark written out
   below (Chris, 2026-09-25). */
.rv-tc-sum-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rv-tc-sum-tally { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; font-weight: 600; padding: 0 2px; }
.rv-tc-sum-tally-dem { color: #0f6e56; }
.rv-tc-sum-tally-dev { color: #9a5a12; }
.rv-tc-sum-tally-n { margin-left: auto; color: #8a90a2; font-weight: 500; }
.rv-tc-sum-pager { border: 1px solid var(--rl-line, #e4e7ee); border-radius: 12px; overflow: hidden; background: #f4f5f8; }
.rv-tc-sum-pager .rv-bz-body { padding: 8px 10px 10px; }
.rv-tc-sum-pager .rv-tc-sum { background: transparent; padding: 0; border-radius: 0; gap: 6px; }
.rv-tc-sum-pager .rv-tc-navbar { margin: 0 0 2px; }
.rv-tc-sum-note { font-size: 0.8rem; color: #4b5163; margin-top: 4px; font-style: italic; }
.rv-tc-sum-remark { margin-top: 0; }
.rv-tc-sum-remark-text { white-space: pre-wrap; line-height: 1.45; color: #2f3552; overflow-wrap: anywhere; }
.rv-tc-sum-remark-none { color: #8a90a2; font-size: 0.86rem; }
.rv-tc-sum-remark .rv-remark-redraft { display: block; margin: 8px 0 0 auto; }
/* once submitted, a card's Redraft goes with its button */
.rv-confirm-done .rv-remark-redraft { display: none; }
/* ...and its "once you submit, it's locked" warning (it now says "Submitted ... locked in" instead) */
.rv-confirm-done[data-card] > .rv-confirm-warn { display: none; }
.rv-tc-sum-pager .rv-tc-navcount { white-space: nowrap; }
/* The Career Plan's final page view (2026-09-28): goals / where you want to go / how far you'd move, one page each. */
.rv-cpf-group { display: flex; flex-direction: column; gap: 6px; }
.rv-cpf-goal { background: #fff; border: 1px solid var(--rl-line, #e4e7ee); border-radius: 10px; padding: 9px 12px; }
.rv-cpf-area { font-weight: 700; font-size: 0.86rem; color: var(--ink); margin-bottom: 3px; }
.rv-cpf-act { font-size: 0.82rem; color: #2b3040; line-height: 1.45; overflow-wrap: anywhere; }
.rv-cpf-lbl { font-weight: 600; color: #5b6275; }
.rv-cpf-date { font-size: 0.76rem; color: #6b7186; margin-top: 4px; }
.rv-cpf-lbl2 { font-size: 0.72rem; font-weight: 700; color: #6b7186; text-transform: uppercase; letter-spacing: 0.04em; }
.rv-cpf-val { font-size: 0.86rem; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }
.rv-cpf-none { color: #8b93b0; font-style: italic; }
/* phone: the text gets the row's full width, the verdict pill sits under it (it squeezed the text to ~130px) */
@media (max-width: 560px) {
  .rv-tc-sum-pager .rv-tc-sum-row { flex-direction: column; gap: 6px; }
  .rv-tc-sum-pager .rv-tc-sum-verdict { align-self: flex-start; }
}
/* 360 behaviours now use the SAME white-card layout as competency (Chris, 2026-09-07):
   the descriptor sits inside the card, the Demonstrate/Developing buttons beneath it,
   right-aligned. Both journey widgets render .rv-fb-row.rv-tc-row, so the old flat
   :not(.rv-tc-row) layout was retired. */
/* The 360 card's header (the UX review's F22, 2026-10-08): who you're rating and how you work with them, once; the
   principle is the page title under it, with its "(1 of 7)". It used to read "Rating X · <principle> (1 of 7)" and then
   a separate "Your relationship" row. */
.rv-fb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rl-line-soft, #eef0f5); }
.rv-fb-who { font-size: 0.8rem; color: #6b7280; }
.rv-fb-who b { color: var(--ink); font-weight: 700; font-size: 0.92rem; }
.rv-fb-rel-val { font-size: 0.76rem; font-weight: 700; color: var(--navy, #252a59);
  background: #eef1f7; border: 1px solid #dfe3ec; border-radius: 999px; padding: 1px 10px; }
/* Separate the peer selector from the assessment panel below it. */
.rv-fb-peers { border-bottom: 1px solid var(--rl-line, #e6e8ef); padding-bottom: 10px; margin-bottom: 14px; }
/* Consistent evaluation-widget width: the stage card sizes to content by default,
   so paging between sections of different length shifts the right-aligned nav
   buttons. Pin the journey stage card to a fixed width so ◀ ▶ hold position. */
.rv-stage-card { width: 80%; }
@media (max-width: 768px) { .rv-stage-card { width: 100%; } }
/* A card that PAGES (the thin side strips) keeps one width whatever the page holds (Chris, 2026-09-28: "always keep
   the card width for card with navigation between pages") -- a final view with a one-line last page no longer
   shrinks to it. */
.rv-msg.rv-card:has(.rv-bz) { width: 80%; }
@media (max-width: 768px) { .rv-msg.rv-card:has(.rv-bz) { width: 100%; } }
/* A superseded stage card left in the transcript: greyed out completely + inert, so it's
   clearly no longer the active step (and a stale button can't fire against the live card). */
.rv-stage-card.rv-stage-expired { opacity: 0.5; filter: grayscale(1); pointer-events: none; }

/* A READ-ONLY snapshot of a COMPLETED past stage, rendered on reload at that stage's boundary so
   scroll-back still shows its widget. Greyed out + inert like rv-stage-expired, so a non-locked
   stage's interactive-looking table (empty inputs, a Save button) can't read as active/editable. */
/* A part you've moved on from, folded to one line (the UX review's F15, 2026-10-08): its name and where it stands, and
   View to open the card in place. The card itself is hidden by a class -- .rv-msg sets display, which beats [hidden]. */
.rv-msg.rv-fold-hidden { display: none !important; }
.rv-fold-line { align-self: flex-start; max-width: 80%; display: flex; align-items: center; gap: 12px;
  padding: 7px 12px; border: 1px solid var(--rl-line, #e4e7ee); border-radius: 10px; background: #f7f8fb;
  font-size: 0.84rem; color: #4b5164; }
.rv-fold-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-fold-btn { flex: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--navy, #252a59); cursor: pointer; }
.rv-fold-btn:hover { text-decoration: underline; }
.rv-fold-btn:focus-visible { outline: 2px solid var(--navy, #252a59); outline-offset: 2px; border-radius: 3px; }
.rv-stage-snapshot { width: 80%; opacity: 0.5; filter: grayscale(1); pointer-events: none;
  border-left: 3px solid var(--rl-line, #cdd1dd); }
@media (max-width: 768px) { .rv-stage-snapshot { width: 100%; } }
.rv-snap-cap { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: #6b7280; margin: 0 0 6px; }
/* A widget brought down to the reply leaves this retired copy behind (journey_chat.js retiredStageCopy):
   greyed + inert through .rv-stage-expired; the caption says where the live one went. A card with side strips
   has no padding, so its caption gets its own. */
.rv-stage-retired { border-left: 3px solid var(--rl-line, #cdd1dd); }
.rv-stage-retired:has(> .rv-bz) > .rv-retired-cap { padding: 10px 14px 0; }

/* THE ONE-CARD SIGN-OFF (2026-09-29). A SUBMITTED part keeps its card as the record -- legible, inert, never greyed
   (there is no final card any more): an earlier part's locked card, a 360 colleague submitted before the next one's
   card came, and a submitted part's snapshot on reload. */
.rv-stage-card.rv-stage-locked { pointer-events: none; }
.rv-stage-card.rv-stage-locked .rv-bz-btn, .rv-stage-record .rv-bz-btn { visibility: hidden; }
.rv-stage-record { pointer-events: none; border-left: 3px solid #3f8377; }
.rv-stage-record:has(> .rv-bz) > .rv-record-cap { padding: 10px 14px 0; }
.rv-record-cap { color: #3f8377; }
.rv-stage-snapshot.rv-snap-locked { opacity: 1; filter: none; border-left-color: #3f8377; }
.rv-stage-snapshot.rv-snap-locked > .rv-snap-cap { color: #3f8377; }
.rv-card-lockline { text-align: right; }
.rv-card-remark-ro { margin-top: 12px; }
/* The pop-up: the app's dialog (.modal-card + .confirm-dialog), wide enough for a scorecard or a paged summary. */
.rv-signoff-dialog .modal-card { max-width: 680px; max-height: calc(100vh - 40px); overflow-y: auto; }
.rv-so-body { margin-top: 12px; }
.rv-so-body .confirm-dialog__msg { margin: 0 0 8px 45px; }
.rv-so-summary { margin: 0 0 14px; }
.rv-so-summary .rv-scorecard { font-size: 0.86rem; }
.rv-so-summary .rv-bz-btn { flex-basis: 20px; width: 20px; }
.rv-so-blockers { margin: 4px 0 0 45px; padding: 0; max-height: 40vh; }   /* the bordered list, each gap a line */
.rv-so-blockers li { line-height: 1.45; color: #2a3148; font-size: 0.93rem; }
.rv-so-warn strong { display: block; margin-bottom: 2px; }
.rv-so-error { margin-top: 10px; color: #b3261e; font-size: 0.9rem; }

/* Manager (team) review widgets -- read-only in this phase. The report's OWN entry
   (the reference column) is tinted so it reads as "theirs" beside what the manager
   moderates. */
.rv-mgr-pin { display: flex; flex-direction: column; gap: 10px; }
.rv-mgr-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rv-mgr-table th { text-align: left; font-size: 0.68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #6b7280; padding: 4px 8px; border-bottom: 1px solid var(--rl-line); white-space: nowrap; }
.rv-mgr-table td { padding: 7px 8px; border-bottom: 1px solid #eef0f5; vertical-align: top; }
.rv-mgr-table td:first-child { font-weight: 600; color: var(--ink); }
.rv-mgr-their { background: #f3f6fc; }
.rv-mgr-foot { font-size: 0.78rem; color: #4b5169; font-weight: 600; padding-top: 2px; }
.rv-mgr-modov { font-size: 0.82rem; font-weight: 700; color: var(--ink); margin-top: 6px;
  display: flex; align-items: center; gap: 6px; }
.rv-mgr-empty { font-size: 0.85rem; color: #6b7280; padding: 6px 2px; }
.rv-mgr-sec { font-size: 0.72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #9a5a12; margin: 6px 2px 2px; }
.rv-mgr-cmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px;
  font-size: 0.74rem; color: #6b7280; }
.rv-mgr-note { font-size: 0.78rem; color: #4b5169; margin-top: 4px; font-style: italic; }
.rv-mgr-goal { border: 1px solid var(--rl-line); border-left: 3px solid #c9862b; border-radius: 10px;
  background: #fff; padding: 9px 11px; }
.rv-mgr-goal-h { font-weight: 700; color: var(--ink); font-size: 0.86rem; }
.rv-mgr-goal-l { font-size: 0.8rem; color: #4b5169; margin-top: 3px; }
/* The per-line moderation control (PM KPI review, actionable lines). */
.rv-mod-cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 160px; }
.rv-mod-val { width: 100%; font: inherit; font-size: 0.8rem; color: var(--ink);
  background: #fff; border: 1px solid #cdd1dd; border-radius: 7px; padding: 5px 8px; }
.rv-mod-val:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }
.rv-mod-cur { font-size: 0.76rem; }
.rv-mod-go { font-size: 0.78rem; padding: 5px 10px; }
.rv-mod-err { font-size: 0.74rem; color: #a02323; }
/* 2+ band moderation move: an amber inline hint on the line + a badge on the KPI. */
.rv-mod-warn { font-size: 0.74rem; color: #9a5a12; }
.rv-bigmove { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; background: #fdf0e2; color: #9a5a12; border: 1px solid #eccf9f;
  vertical-align: middle; white-space: nowrap; }
/* Manager moderation cell: the moderated rating (Mech B) beside the input, with a
   before->after treatment -- the self pill dampened + struck, then the moderated pill. */
.rv-mod-rating { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-top: 4px; }
.rv-rating-was { opacity: 0.45; text-decoration: line-through; }
.rv-mod-arrow { color: #9099ad; font-weight: 700; }
.rv-mgr-wait { font-size: 0.78rem; color: #6b7280; margin-right: 6px; }
/* Team-summary <-> Individual toggle + the whole-team score table. */
.rv-mgr-wrap { display: flex; flex-direction: column; gap: 10px; }
.rv-mgr-toggle { align-self: flex-start; max-width: 340px; }
.rv-mgr-sumtable tbody tr { cursor: pointer; }
.rv-mgr-sumtable tbody tr:hover td { background: #eef1f7; }
.rv-mgr-sumstatus { color: #6b7280; font-size: 0.78rem; white-space: nowrap; }
/* Bulk-approve on the summary: a checkbox column on ready rows + an Approve control. */
.rv-sum-chk { width: 34px; text-align: center; }
.rv-sum-chk input { cursor: pointer; }
.rv-sum-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
/* IDP manager review: debounced comment textareas, the career reference block and
   the close form. Reuses .rv-mgr-* for cards/notes and .rv-mod-err for inline errors. */
.rv-idp-cmt { margin-top: 6px; }
.rv-idp-ta { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.8rem; color: var(--ink);
  background: #fff; border: 1px solid #cdd1dd; border-radius: 7px; padding: 6px 8px; resize: vertical; }
.rv-idp-ta:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,42,89,0.12); }
.rv-mgr-career { border: 1px solid var(--rl-line); border-radius: 10px; background: #fbfbfd;
  padding: 9px 11px; }
.rv-idp-close { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rv-idp-close .rv-idp-ta { width: 100%; }
.rv-idp-close .rv-mod-go { align-self: flex-end; }   /* action button bottom-right */
.rv-idp-date { font: inherit; font-size: 0.8rem; color: var(--ink); background: #fff;
  border: 1px solid #cdd1dd; border-radius: 7px; padding: 5px 8px; }
/* Combined read-only profile card (performance + competency + plan in one view) and the
   "Full profile" jump control on summary rows + detail headers. Reuses .rv-mgr-* tables. */
.rv-profile-sec { font-size: 0.74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); margin: 12px 2px 2px; padding-top: 8px; border-top: 1px solid var(--rl-line); }
.rv-profile > .rv-profile-sec:first-of-type { margin-top: 2px; padding-top: 0; border-top: none; }

/* --- KPI library browse card (setting_chat.js) --------------------------- */
.rv-lib-table th, .rv-lib-table td { padding: 6px 10px; text-align: left; vertical-align: top; }
.rv-lib-add { padding: 4px 12px; }
.rv-lib-on { font-size: 0.74rem; color: #0f6e56; font-weight: 700; }

.rv-chat-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 0; }
.rv-chat-quick:empty { display: none; }
/* One unified composer bar: the textarea and Send share a single rounded,
   focus-ringed container; Send stays a fixed-height button pinned bottom-right,
   so a growing (multi-line) input never stretches it. */
/* A distinct, FLOATING input box at the bottom -- its own rounded border + a
   soft shadow so it reads as separate from the messages (Chris: keep it
   floating, not embedded). The chat card no longer has a border, so this is the
   only box: no more "grey outer box" around the field. */
.rv-composer { display: flex; align-items: flex-end; gap: 8px; margin: 12px 14px 14px;
  padding: 5px 5px 5px 8px; border: 1px solid #cdd1dd; border-radius: 12px;
  background: #fff; box-shadow: 0 3px 12px rgba(20,24,45,0.10); position: relative; }
/* No UA dotted/focus outline, and no border change on focus -- the border + shadow stay
   constant so no "outline" appears when the input is activated (Chris, 2026-09-17). */
.rv-composer:focus-within { outline: none; }
/* The styled box-shadow above IS the focus ring; suppress every browser's UA
   focus outline on the composer and its controls (Firefox draws a dotted box). */
.rv-composer:focus, .rv-composer :focus, .rv-composer :focus-visible { outline: none; }
.rv-send::-moz-focus-inner { border: 0; padding: 0; }
.rv-send:focus-visible { box-shadow: 0 0 0 3px rgba(37,42,89,0.28); }
/* appearance:none removes the NATIVE textarea chrome -- on Safari/WebKit the textarea draws its
   own inset/rounded border even with border:none, which read as a box around the input while
   typing. border:none alone only hid it in Chromium. (Chris, 2026-09-17.) */
#rv-chat-input { flex: 1; border: none; outline: none; -webkit-appearance: none; appearance: none;
  resize: none; background: transparent; padding: 8px 0; font: inherit; line-height: 1.45;
  max-height: 140px; }
/* The global input/select/textarea:focus-visible rule paints a navy box-shadow ring; on the
   composer the ring reads as a box around the input WHILE TYPING (focus-visible fires on keyboard
   focus, which is why a programmatic-focus preview never showed it). Kill it here -- the composer's
   own border is the affordance. (Chris, 2026-09-17.) */
#rv-chat-input:focus, #rv-chat-input:focus-visible {
  outline: none; box-shadow: none; border-color: transparent; }
.rv-send { flex: none; height: 38px; width: 38px; padding: 0; border-radius: 8px; border: none;
  background: var(--navy); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.rv-send:hover { filter: brightness(1.08); }
.rv-send:disabled { opacity: 0.55; cursor: default; }
.rv-send .rv-ico { width: 18px; height: 18px; }
/* Inline-SVG icons take their button/text colour. */
.rv-ico { width: 16px; height: 16px; flex: none; display: block; }

/* --- the on-demand brief (done page) ------------------------------------ */
.rv-brief-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rv-brief-items li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.rv-brief-n { color: var(--navy); font-weight: 700; flex: none; }

@media (min-width: 761px) {
  /* One-page app view: the rail + chat fill the screen; only the chat log
     scrolls. :has scopes it to the review page without a body class. */
  /* Drop the page's bottom margin here so the composer sits flush to the
     bottom (only its own 14px margin remains) instead of floating 39px up. */
  body:has(.rv-wrap) #main.container { display: flex; flex-direction: column;
    height: calc(100dvh - 80px); margin-bottom: 0; overflow: hidden; }
  body:has(.rv-wrap) .rv-wrap { flex: 1; min-height: 0; }
}

@media (max-width: 760px) {
  /* Chat-first on mobile: the conversation is the point, so it comes ABOVE the
     rail (a full 6-stage rail on top would bury the chat below the fold). The
     rail becomes a compact reference strip beneath. */
  .rv-wrap { display: flex; flex-direction: column; gap: 14px; }
  /* The top band stacks: toggle row, then the KPI summary row. */
  .rv-topbar { grid-template-columns: 1fr; gap: 10px; }
  /* let the rail flow into the column (the toggle stays hidden -> base's is used) */
  .rv-railcol { display: contents; }
  .rv-main { order: 1; }
  .rv-rail { order: 2; position: static; }
  .rv-turn { padding: 15px 16px; }
  /* Let the whole page scroll, but keep the composer within thumb reach at all
     times: it sticks to the bottom of the viewport while the chat is on screen
     (overflow:visible on the ancestors is what lets sticky work). */
  .rv-chat { overflow: visible; }
  .rv-chat-log { max-height: none; overflow: visible; }
  /* On mobile the page scrolls (no bounded chat), so an absolute overlay can't
     anchor -- let the KPI table flow normally as a card at the top of the chat. */
  .rv-kpi-inline { position: static; left: auto; right: auto; max-height: none;
    margin-bottom: 10px; box-shadow: 0 4px 14px rgba(20,24,45,0.10); }
  /* The summary now lives in the top bar (above the chat); it scrolls with the
     page on mobile rather than sticking. */
  .rv-kpi-pin { margin: 0; }
  .rv-details { max-height: 50vh; }
  /* On mobile the bar floats (sticky) over the scrolling page, so it needs a
     solid rounded surface to sit on -- give it back a background + border here
     (this is one floating bar, not a box-in-a-box). */
  .rv-composer { position: sticky; bottom: 8px; z-index: 5; margin: 0 2px;
    background: #fff; border: 1px solid var(--rl-line); border-radius: 12px;
    box-shadow: 0 4px 16px rgba(20,24,45,0.14); }
  /* The navigator becomes a slide-in "Contents" drawer, not an inline strip. The
     id beats .rv-railcol{display:contents} above, so the drawer wins. */
  .rv-nav-drawerbtn { display: inline-flex; align-items: center; justify-content: center;
    flex: none; margin-right: 10px; width: 40px; height: 34px; border: 1px solid var(--rl-line);
    background: #fff; border-radius: 9px; font-size: 17px; color: var(--navy); cursor: pointer; }
  .rv-topbar-main { gap: 0; }
  /* The module tabs scroll horizontally on a narrow screen: each tab keeps its natural
     content width (the expanded tab must not be squeezed, or its steps strip would spill
     out of the box and over the next tab) and the row scrolls. */
  #rv-modtabs { overflow-x: auto; }
  #rv-modtabs .rv-modtab { flex: 0 0 auto; }
  /* No room for the full module name beside the steps on a phone -- the short code instead. */
  #rv-modtabs .rv-mt-exp .rv-mt-full { display: none; }
  #rv-modtabs .rv-mt-exp .rv-mt-short { display: inline; }
  #rv-navcol { display: block; position: fixed; z-index: 60; left: 10px; top: 10px; bottom: 10px;
    width: min(320px, 86vw); transform: translateX(-115%); transition: transform .22s ease; }
  #rv-navcol.rv-nav-open { transform: none; box-shadow: 0 20px 60px -18px rgba(0,0,0,.5); }
  #rv-navcol .rv-nav { max-height: 100%; }
  .rv-nav-scrim { position: fixed; inset: 0; background: rgba(20,22,40,.35); z-index: 59; }
  .rv-nav-scrim:not([hidden]) { display: block; }
}
@media (prefers-reduced-motion: reduce) { #rv-navcol { transition: none; } }

/* The line manager's insight (2026-09-30): the calibration card's verdict block, evidence table and steps (.rv-cal-*)
   on the white card -- no grey box around it; the verdict is its one tinted block. */
.rv-lm-insight { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; }
.rv-lm-insight-b { display: flex; flex-direction: column; gap: 6px; }
.rv-lm-verdict .rv-cal-vh { flex-wrap: wrap; row-gap: 4px; }
.rv-lm-scores { margin: 2px 0 0; }
.rv-lm-verdict .rv-lm-lead { font-weight: 600; color: #1f2433; }
.rv-lm-verdict .rv-lm-lead + .rv-lm-para { margin-top: 6px; }
.rv-tm-summary .rv-tm-bands { margin-bottom: 0; }
/* the moderation table's Justified? column: the AI read per KPI (its reason on hover), one line */
.rv-mgr-table th.rv-mgr-justh, .rv-mgr-table td.rv-mgr-just { white-space: nowrap; }
/* the line manager's cards take the chat's full width, as the KPI check-in, calibration and Talent Box cards do: the
   moderation table (ladder, their result, Justified?, Moderate) needs it */
.rv-stage-card:has(.rv-mgr-pin), .rv-msg.rv-card.rv-stage-card:has(.rv-mgr-pin) { width: 100%; }
/* The Team summary's Remark column (Chris, 2026-09-25): each person's summary behind an icon, opened as
   a floating card on hover / focus / tap. The rows keep one line each. */
.rv-mgr-sumtable td { vertical-align: middle; }
.rv-mgr-sumtable .rv-rmk-th, .rv-mgr-sumtable .rv-rmk-cell { width: 1%; text-align: left; white-space: nowrap; }
.rv-rmk-in { display: flex; align-items: center; gap: 6px; }
.rv-mgr-sumtable .rv-score-pill { display: inline-block; min-width: 6.2em; text-align: center; box-sizing: border-box; }
.rv-rmk-in .rv-verdict-tag { margin-left: 0; }
.rv-rmk-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid #d7dcea; border-radius: 9px; background: #fff;
  color: var(--navy); cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; }
.rv-rmk-btn .rv-ico { width: 17px; height: 17px; }
.rv-rmk-btn:hover, .rv-rmk-btn[aria-expanded="true"] { background: #eef1fb; border-color: #b9c1dc;
  box-shadow: 0 1px 3px rgba(37, 42, 89, .12); }
.rv-rmk-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.rv-rmk-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
  background: #8b93b0; display: none; }
.rv-rmk-btn[data-state="loading"] { color: #8b93b0; }
.rv-rmk-btn[data-state="loading"] .rv-rmk-dot { display: block; animation: rvRmkPulse 1.1s ease-in-out infinite; }
.rv-rmk-btn[data-state="none"] { color: #a3a9bd; border-color: #e4e7ef; }
.rv-rmk-btn[data-state="error"] { color: #9a5a12; }
@keyframes rvRmkPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rv-rmk-btn[data-state="loading"] .rv-rmk-dot { animation: none; } }

/* The popout: one card for the page, fixed beside the icon (positioned by journey_chat.js rmkPlace). */
.rv-rmk-pop { position: fixed; z-index: 1200; box-sizing: border-box; background: #fff; color: var(--ink);
  border: 1px solid var(--rl-line); border-radius: 12px; padding: 14px 16px 12px;
  box-shadow: 0 16px 40px rgba(20, 28, 70, .18), 0 2px 6px rgba(20, 28, 70, .08);
  overflow-y: auto; font-size: 0.82rem; line-height: 1.45; font-weight: 400; text-align: left; }
.rv-rmk-pop[hidden] { display: none; }
.rv-ps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--rl-line-soft); }
.rv-ps-name { font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.rv-ps-kicker { font-size: 0.66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #6b7186; margin-bottom: 4px; }
.rv-ps-read { margin: 0 0 4px; font-weight: 400; color: #2b3040; }
.rv-ps-para { font-size: 0.86rem; line-height: 1.55; margin: 2px 0 0; }
.rv-ps-wait { color: #6b7186; font-size: 0.8rem; padding: 4px 0; }
/* THE VERDICT (2026-09-25): is it justified? -- a pill + its reason, leading the popout and the Individual
   views; a short tag beside the Remark icon in the Team summary; a per-KPI line under each result. */
/* symbol and word, no colour (Chris, 2026-09-30: "too many colour"): the band pill carries the colour, the verdict
   reads in the text colour -- "Not justified" darker and bolder so it still stands out */
.rv-verdict { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600;
  white-space: nowrap; color: #5f6678; }
.rv-verdict .rv-vg { font-size: 0.95em; line-height: 1; }
.rv-verdict[data-tone="ok"], .rv-verdict[data-tone="warn"] { color: #5f6678; }
.rv-verdict[data-tone="bad"] { color: #1f2433; font-weight: 700; }
.rv-verdict-tag { margin-left: 6px; vertical-align: middle; }
/* the popouts carry the same verdict block, then the first thing to check */
.rv-rmk-pop .rv-lm-verdict { min-height: 0; margin-bottom: 8px; }
.rv-ps-next { margin: 6px 0 0; font-size: 0.8rem; color: #2b3040; font-weight: 600; }
@media (max-width: 560px) {
  /* the Team summary fits a phone: the tag keeps its symbol, its word goes to the tooltip */
  .rv-mgr-sumtable .rv-verdict-tag .rv-vw { display: none; }
  .rv-mgr-sumtable .rv-verdict-tag { margin-left: 4px; }
}

/* The Status column: the manager's next action is a button; anything else a quiet chip. */
.rv-act-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 13px; border: none;
  border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.76rem; font-weight: 700;
  line-height: 1.1; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(20, 28, 70, .2);
  transition: background .12s, transform .12s, box-shadow .12s; }
.rv-act-btn .rv-ico { width: 14px; height: 14px; flex: none; transition: transform .12s; }
.rv-act-btn:hover { background: var(--navy-600); box-shadow: 0 3px 8px rgba(20, 28, 70, .22); }
.rv-act-btn:hover .rv-ico { transform: translateX(2px); }
.rv-act-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.rv-status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  background: #f1f3f8; color: #5b6275; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.rv-status-chip .rv-ico { width: 12px; height: 12px; flex: none; }
.rv-status-chip.rv-status-done { background: #e3f4ec; color: #0f6e56; }
/* On a phone the Team summary stays one screen wide where it can: tighter cells, the action and status may
   wrap, the Remark icon shrinks. */
@media (max-width: 560px) {
  .rv-mgr-sumtable th, .rv-mgr-sumtable td { padding-left: 4px; padding-right: 4px; }
  .rv-mgr-sumtable th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
  .rv-mgr-sumtable .rv-sum-chk { width: 22px; }
  .rv-mgr-sumtable .rv-rmk-th { font-size: 0; }   /* the icon speaks for the column (screen readers still read it) */
  .rv-rmk-btn { width: 28px; height: 28px; }
  .rv-act-btn { white-space: normal; text-align: left; padding: 5px 9px; font-size: 0.72rem; }
  .rv-act-btn .rv-ico { display: none; }
  .rv-status-chip { white-space: normal; }
  .rv-mgr-sumtable .potential-pill { white-space: nowrap; padding: 2px 7px; font-size: 0.72rem; }
  .rv-status-chip { padding: 3px 7px; font-size: 0.7rem; }
  .rv-status-chip .rv-ico { display: none; }
}
/* The Individual view's Remarks section, below the KPI table (Chris, 2026-09-25): the direct report's overall
   remark, then the line manager's -- required while their moderation moves the OVERALL band, optional while it
   stays, with a live word count (about 50-100 words is the guide, not a rule). */
.rv-mgr-remarks { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rl-line); display: grid; gap: 12px; }
.rv-mgr-remarks-h { font-size: 0.72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6b7186; }
.rv-rmks-block { display: flex; flex-direction: column; gap: 5px; }
.rv-rmks-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rv-rmks-label { font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.rv-rmks-text { font-size: 0.84rem; line-height: 1.5; font-weight: 400; color: #2b3040; white-space: pre-wrap;
  background: #f7f8fc; border: 1px solid var(--rl-line-soft); border-radius: 8px; padding: 9px 11px; }
.rv-rmks-text.rv-rmks-none { color: #8b93b0; font-style: italic; }

/* The manager's TM review (Chris, 2026-09-25): the potential band (competency alone) + the summary of their
   self-assessment on top; then one category at a time between two thin side strips, like the person's own
   view, each competency tagged with its level (two cards can share a title). */
.rv-tm-bands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.rv-tm-bandlbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #6b7186; }
.rv-tm-theirs { font-size: 0.8rem; color: #3a3f52; }
.rv-tm-note { font-size: 0.74rem; color: #8a90a2; }
.rv-mgr-pin > .rv-bz { border: 1px solid var(--rl-line, #e4e7ee); border-radius: 12px; overflow: hidden;
  background: #fff; }
.rv-mgr-pin > .rv-bz > .rv-bz-body { padding: 10px 12px; }
.rv-tm-page { gap: 6px; }
.rv-tc-level { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 1px;
  background: #eef0f6; color: #5b6275; white-space: nowrap; }
.rv-tc-level-next { background: #eaf1ff; color: #1b46b3; }
.rv-tm-bandcell { white-space: nowrap; }
.rv-tm-demo { font-size: 0.72rem; color: #8a90a2; margin-top: 2px; }
/* A competency card keeps its text readable at ANY width: the buttons sit beside the text while there is room
   for both, and drop underneath (right-aligned) when there isn't -- at 800px the text column measured 0px. */
@media (min-width: 561px) {   /* on a phone the row is a column, where a 260px basis would become a height */
  .rv-mgr-pin .rv-tc-grp .rv-fb-row.rv-tc-row { flex-wrap: wrap; }
  .rv-mgr-pin .rv-tc-grp .rv-tc-cell { flex: 1 1 260px; }
  .rv-mgr-pin .rv-tc-grp .rv-tc-row > .rv-fb-btns { margin-left: auto; }
}
@media (max-width: 560px) {
  /* the manager's card nests deeper than the person's own, so the Demonstrate / Developing pair (~216px)
     overflowed a 375px phone: tighter padding on the way in, and the pair may wrap rather than spill */
  .rv-mgr-pin > .rv-bz > .rv-bz-body { padding: 4px; }
  .rv-mgr-pin .rv-tc-grp { padding: 5px; gap: 6px; }
  .rv-mgr-pin .rv-tc-grp .rv-tc-row { padding: 9px; }
  .rv-mgr-pin .rv-tc-grp .rv-fb-btns { flex-wrap: wrap; row-gap: 6px; }
  .rv-mgr-pin .rv-tc-grp .rv-fb-btn { padding: 6px 8px; font-size: 0.8rem; }
  .rv-tm-bandcell { white-space: normal; }
  .rv-mgr-sumtable .rv-tm-pw, .rv-mgr-sumtable .rv-th-more, .rv-mgr-sumtable .rv-act-more,
  .rv-mgr-sumtable .rv-tm-demo-w { display: none; }
  .rv-sum-tm th, .rv-sum-tm td { padding-left: 3px; padding-right: 3px; }
  .rv-sum-tm .rv-status-chip { padding-left: 6px; padding-right: 6px; }
  .rv-tm-demo { font-size: 0.68rem; line-height: 1.25; }
}
.rv-myrm { display: flex; flex-direction: column; border: 1px solid #cfd5e4; border-radius: 8px; background: #fff;
  transition: border-color .12s, box-shadow .12s; }
.rv-myrm:focus-within { border-color: var(--navy); box-shadow: none; }
/* No grey outline inside the box on focus (Chris, 2026-09-28): the site-wide textarea:focus-visible ring drew a second
   rectangle around the text area. The box's own border is the focus cue. */
.rv-myrm-input:focus, .rv-myrm-input:focus-visible { outline: none; box-shadow: none; border: 0; }
.rv-myrm-input { display: block; width: 100%; min-height: 88px; box-sizing: border-box; resize: vertical; border: 0;
  background: transparent; padding: 9px 11px 4px; font: inherit; font-size: 0.84rem; line-height: 1.5; font-weight: 400;
  color: var(--ink); outline: none; }
.rv-myrm-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; padding: 2px 11px 7px;
  font-size: 0.72rem; color: #8b93b0; }
.rv-myrm-need { font-weight: 600; }
.rv-myrm.rv-myrm-req { border-color: #e2b07a; }
.rv-myrm.rv-myrm-req .rv-myrm-need { color: #9a5a12; }
.rv-myrm.rv-myrm-req[data-words="short"] .rv-myrm-wc { color: #9a5a12; }
.rv-myrm[data-words="good"] .rv-myrm-wc { color: #0f6e56; }
.rv-myrm.rv-myrm-flag { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, .12); }
.rv-myrm.rv-myrm-flag .rv-myrm-need { color: #b42318; }
.rv-lock-msg { flex: 1; align-self: center; margin-right: 12px; font-size: 0.8rem; color: #b42318; text-align: right; }
.rv-lock-msg[hidden] { display: none; }
.rv-bigmove[hidden] { display: none; }   /* the badge sets its own display, which beats [hidden] */
/* The employee's own Remarks box under their KPI table (2026-09-26): the manager's section, one block. */
.rv-kpi-overview > .rv-kpi-remarks { margin-top: 14px; }
/* ...and the remark box on the last page of the 360 / competency card, with Save under it (2026-09-28). */
.rv-fb-pin > .rv-card-remarks, .rv-tc-pin > .rv-card-remarks { margin-top: 12px; }
.rv-save-hint { margin-top: 10px; font-size: 0.78rem; color: #6b7186; text-align: right; }
/* The moderation value box needn't be 160px: at 1280px the table ran ~24px past its card. */
.rv-mgr-pin .rv-mod-cell { min-width: 128px; }

/* The report's supporting files under each KPI in the manager's PM table. */
.rv-mgr-files { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.rv-mgr-file { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--navy);
  text-decoration: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-mgr-file:hover { text-decoration: underline; }
.rv-mgr-file .rv-ico { width: 13px; height: 13px; flex: none; }
/* On a phone the Status cell may wrap (it held the table wider than the card, 2026-09-24 review). */
@media (max-width: 560px) {
  .rv-mgr-sumtable .rv-mgr-sumstatus { white-space: normal; }
}
.rv-mgr-remark-text { font-size: 0.86rem; line-height: 1.45; white-space: pre-wrap; margin-bottom: 4px; }

/* The review summary once PM, TM and IDP are all done (2026-09-28): a page per module between the side strips, each
   part headed by its name + where it went, then that part's final card in short. */
.rv-jc-page { display: flex; flex-direction: column; gap: 14px; }
.rv-jc-part { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rv-jc-parthead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.rv-jc-partname { font-weight: 700; font-size: 0.9rem; color: var(--navy, #252a59); }
.rv-jc-status { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: #8a90a2; }
.rv-jc-status.rv-jc-done { color: #3f8377; }
.rv-jc-rel { margin-left: 8px; font-size: 0.76rem; font-weight: 500; color: #8a90a2; }
.rv-jc-line { font-size: 0.84rem; color: #2b3040; line-height: 1.45; overflow-wrap: anywhere; }
.rv-jc .rv-scorecard { background: #fff; }
.rv-jc-sx { overflow-x: auto; max-width: 100%; }
.rv-jc .rv-sc-remark-body, .rv-jc .rv-fb-sum-comment, .rv-jc .rv-cpf-act, .rv-jc .rv-cpf-val, .rv-jc .rv-jc-line {
  overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 480px) { .rv-jc-status { margin-left: 0; flex-basis: 100%; } }

/* The completed check-in card's header: a green tick before "Your 2026 Year-End Check-in"; the chat input once the
   review is complete (2026-09-28). */
.rv-jc-head { display: flex; align-items: center; gap: 10px; }
/* the department review's wrap-up (2026-10-02): each part's bands as chips, a rule between the parts */
.rv-dw .rv-jc-part + .rv-jc-part { border-top: 1px solid var(--rl-line-soft, #eef0f5); padding-top: 12px; }
.rv-dw-bands { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-dw-band { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid
  var(--rl-line-soft, #e6e8ef); border-radius: 999px; background: #fff; font-size: 0.8rem; white-space: nowrap; }
.rv-dw-code { font-weight: 700; color: var(--navy, #252a59); }
.rv-dw-n { color: #5f6678; font-variant-numeric: tabular-nums; }
.rv-dw-note { color: #5f6678; }
/* Admin > Open & close dates (2026-10-02) */
.win-table input[type="datetime-local"] { min-width: 190px; }
.win-table tr.win-newmod td { border-top: 2px solid #e2e5ee; }
.win-table .win-mod { font-weight: 600; color: var(--navy, #252a59); }
.win-state { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  white-space: nowrap; }
.win-state.win-open { background: #e5f4ec; color: #1a6b43; }
.win-state.win-not_open { background: #eef0f5; color: #4b5266; }
.win-state.win-closed { background: #fbe9e7; color: #9b2c1f; }
.win-acts { white-space: nowrap; }
/* a part whose window is closed: the card says so on top, its save / submit controls are greyed */
.rv-window-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fbe9e7; color: #9b2c1f;
  font-size: 0.86rem; font-weight: 600; }
.rv-win-closed .rv-save-all, .rv-win-closed .rv-save-submit, .rv-win-closed .rv-cal-lock,
.rv-win-closed .rv-dr-psave, .rv-win-closed .rv-fb-btn, .rv-win-closed .rv-tc-btn,
.rv-win-closed .rv-confirm-yes, .rv-win-closed .rv-confirm-no,
.rv-win-closed input:not([type="hidden"]), .rv-win-closed textarea, .rv-win-closed select {
  opacity: 0.45; pointer-events: none; }
/* a result that came up after the band was set, and disagrees (2026-10-02) */
.rv-cal-tag.is-late { color: #8a5a00; font-weight: 600; }
.rv-jc-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #0f6e56; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; }
.rv-jc-tick .rv-ico { width: 14px; height: 14px; stroke-width: 3; }
.rv-composer.rv-composer-done textarea { cursor: not-allowed; }
.rv-composer.rv-composer-done textarea::placeholder { color: #3f8377; font-weight: 600; }
.rv-composer.rv-composer-done button { opacity: 0.45; }

/* Admin: Leaders (HOD / BU CEO / BG CEO), 2026-09-29 */
.ld-bgform select { min-width: 360px; }
.ld-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.ld-pick { position: relative; min-width: 300px; flex: 1 1 320px; max-width: 460px; }
.ld-pick .ld-lab { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.ld-pick .ld-q { width: 100%; }
.ld-chosen { margin-top: 4px; }
.ld-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0;
  list-style: none; background: #fff; border: 1px solid var(--rl-line, #dfe3ec); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20, 28, 60, 0.12); max-height: 260px; overflow-y: auto; }
.ld-results li { padding: 6px 10px; font-size: 13px; cursor: pointer; }
.ld-results li:hover, .ld-results li:focus { background: #eef1f7; outline: none; }
.ld-scope { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ld-scope legend { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.ld-scope label, .admin-form .ld-scope label { display: flex; flex-direction: row; gap: 6px; align-items: center;
  font-weight: 400; }
.admin-form .ld-scope input[type=radio] { width: auto; margin: 0; flex: none; }
.ld-co { margin-left: 22px; max-width: 360px; }
tr.ld-off { display: none; }
.ld-blockers { background: #fdecea; border: 1px solid #f3c2bd; color: #7a1d14; border-radius: 8px; padding: 10px 14px;
  margin: 10px 0; }
.ld-blockers ul, .ld-warnings ul { margin: 4px 0 6px; padding-left: 18px; }
.ld-reason { display: flex; flex-direction: column; gap: 4px; font-weight: 600; margin-top: 6px; }
.ld-warnings { background: #fdf4e6; border: 1px solid #f0d9ae; color: #6b4410; border-radius: 8px; padding: 10px 14px;
  margin: 10px 0; }
.ld-ack { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.ld-inline { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.ld-inline .ld-pick { min-width: 272px; }
/* in a table row the column header already says what the box is for, and an empty 'nobody chosen' line only adds height */
.ld-inline { align-items: center; }
.ld-inline .ld-labtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.ld-inline .ld-none { display: none; }
.ld-inline .ld-chosen:empty, .ld-inline .ld-chosen:has(> .ld-none:only-child) { display: none; }

/* ---- The BG CEO's Talent Box in the review chat (2026-09-30) ------------------------------------------------- */
.rv-tbox { display: flex; flex-direction: column; gap: 8px; }
.rv-tbox-bus { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-tbox-bu { border: 1px solid var(--rl-line, #e4e7ef); background: #fff; border-radius: 999px; padding: 3px 11px;
  font: inherit; font-size: 12px; font-weight: 600; color: #4a5165; cursor: pointer; white-space: nowrap; }
.rv-tbox-bu:hover { border-color: var(--navy, #252A59); color: var(--navy, #252A59); }
.rv-tbox-bu.is-on { background: var(--navy, #252A59); border-color: var(--navy, #252A59); color: #fff; cursor: default; }
.rv-tbox-bu:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
.rv-tbox-bulock { margin-left: 5px; color: #1a7a54; font-weight: 700; }
.rv-tbox-bu.is-on .rv-tbox-bulock { color: #bfe8d4; }
/* the BG CEO's own lock on a business unit (2026-10-07): a padlock, navy -- the tick is its CEO's "ready" */
.rv-tbox-bulock.is-mine { display: inline-flex; vertical-align: -1px; color: var(--navy, #252A59); }
.rv-tbox-bulock.is-mine .rv-ico { width: 12px; height: 12px; }
.rv-tbox-bu.is-on .rv-tbox-bulock.is-mine { color: #fff; }
/* The box as a heat grid with a people panel, and a list view (Chris, 2026-10-07, design A). The card takes the chat's
   full width; the grid and the panel (or the list) share the room tbFit gives the body and scroll inside it. Colours
   step pale to deep navy as the category rises, PIP orange, so the shape reads at a glance. */
.rv-stage-card:has(.rv-tbox) { width: 100%; }
.rv-tbox-views { display: inline-flex; padding: 2px; border-radius: 8px; background: #f1f2f7; flex: none; }
.rv-tbox-view { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0;
  border-radius: 6px; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: #5b6178; cursor: pointer; }
.rv-tbox-view[aria-pressed="true"] { background: #fff; color: var(--navy, #252A59); box-shadow: 0 1px 2px rgba(31,35,53,.14); }
.rv-tbox-view .rv-ico { width: 14px; height: 14px; }
.rv-tbox-catbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rv-tbox-catlbl { font-size: 12px; color: #5b6178; margin-right: 2px; }
/* grid or list on the title's own line, at its right end (Chris, 2026-10-07: "more obvious to the user") */
.rv-tbox-titlebar { align-items: center; }
.rv-tbox-titlebar .rv-tbox-views { margin-left: auto; }
.rv-tbox-catchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid #e1e4ee; background: #fff; font: inherit; font-size: 12px; color: #1f2335; cursor: pointer; white-space: nowrap; }
.rv-tbox-catchip:hover { border-color: var(--navy, #252A59); }
.rv-tbox-catchip[aria-pressed="true"] { border-color: var(--navy, #252A59); background: #eef0f8; }
.rv-tbox-catchip b { font-weight: 600; }
.rv-tbox-catn { color: #5b6178; font-variant-numeric: tabular-nums; }
.rv-tbox-catdot { width: 9px; height: 9px; border-radius: 3px; background: #b4b9cb; }
.rv-tbox-catchip[data-cat="super-star"] .rv-tbox-catdot { background: #262c63; }
.rv-tbox-catchip[data-cat="star"] .rv-tbox-catdot { background: #7d88d1; }
.rv-tbox-catchip[data-cat^="pip"] .rv-tbox-catdot { background: #d9772f; }
.rv-tbox-status:empty { display: none; }
/* the waiting note and the Lock on one line (the later wrap rule below would otherwise win); the Lock -- and the PIP
   link once locked -- always on the right, the note or the locked line taking the left (Chris, 2026-10-07: "lock
   talent box should be on right hand side (all action buttons on right)"). The later space-between put a lone Lock
   on the left. */
.rv-cal-foot.rv-tbox-foot { flex-wrap: nowrap; justify-content: flex-end; }
.rv-cal-foot.rv-tbox-foot > .rv-cal-soft, .rv-cal-foot.rv-tbox-foot > .rv-cal-footnote { margin-right: auto; }
.rv-tbox-status.is-bad { color: #b3261e; }
.rv-tbox-body { display: flex; gap: 12px; flex-wrap: wrap; min-height: 0; }
.rv-tbox-body.is-fixed > * { height: 100%; }
/* the grid: potential High -> Low down the side, performance Low -> High along the foot. Each axis has its own title,
   a button that opens its distribution curve (Chris, 2026-10-07): Potential up the left edge, Performance under the
   column feet. */
.rv-tbox-grid { flex: 999 1 460px; min-width: 0; display: grid; grid-template-columns: 30px 64px repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(56px, 1fr)) auto auto; gap: 6px; }
.rv-tbox-rowh, .rv-tbox-colf { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: #5b6178; }
.rv-tbox-rowh { justify-content: center; padding-right: 4px; }
.rv-tbox-colf { padding: 2px 2px 0; }
.rv-tbox-axt b { font-size: 14px; color: var(--navy, #252A59); margin-right: 2px; }
.rv-tbox-axn { color: #3a4060; font-variant-numeric: tabular-nums; }
.rv-tbox-corner { grid-column: 1 / 3; grid-row: 4; }
.rv-tbox-xaxis { grid-column: 3 / 6; grid-row: 5; display: flex; justify-content: center; }
.rv-tbox-axbtn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px;
  border: 1px solid #d7dbe8; border-radius: 999px; background: #fff; color: var(--navy, #252A59); font: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rv-tbox-axbtn:hover:not(:disabled) { background: #eef0f8; border-color: var(--navy, #252A59); }
.rv-tbox-axbtn:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
.rv-tbox-axbtn:disabled { cursor: default; opacity: .5; }
.rv-tbox-axin { display: inline-flex; align-items: center; gap: 6px; }
.rv-tbox-axin .rv-ico { width: 15px; height: 15px; flex: none; }
.rv-tbox-axbtn-a { font-weight: 600; opacity: .7; }
.rv-tbox-axbtn.is-y { grid-column: 1; grid-row: 1 / 4; align-self: center; justify-self: center; padding: 12px 4px; }
.rv-tbox-axbtn.is-y .rv-tbox-axin { writing-mode: vertical-rl; transform: rotate(180deg); }
.rv-tbox-axbtn.is-y .rv-ico { transform: rotate(90deg); }
/* the curve pop-out an axis title opens: wide enough for "N more / fewer than expected" in full */
.modal-card.rv-tbox-curvedlg { max-width: 720px; width: calc(100vw - 48px); }
.rv-tbox-curvedlg .calib-dist-gap { width: auto; min-width: 150px; }
.rv-tbox-dlgbody { max-height: min(60vh, 520px); overflow-y: auto; margin: 4px 0 12px; }
.rv-tbox-cell { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 0;
  padding: 7px 10px; border-radius: 10px; border: 1px solid #e1e4ee; background: #f4f5f9; color: #262b45; font: inherit;
  text-align: left; cursor: pointer; overflow: hidden; transition: box-shadow .15s ease, opacity .15s ease; }
.rv-tbox-cell[data-cat="super-star"] { background: #262c63; border-color: #262c63; color: #fff; }
.rv-tbox-cell[data-cat="star"] { background: #dfe3f7; border-color: #c9cfee; color: #1d2249; }
.rv-tbox-cell[data-cat^="pip"] { background: #fcefe5; border-color: #f1d3bb; color: #7f370a; }
.rv-tbox-cell:hover:not(:disabled):not(.is-on) { box-shadow: 0 2px 8px rgba(37,42,89,.14); }
.rv-tbox-cell.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy, #252A59); }
.rv-tbox-cell.is-dim { opacity: .35; }
/* a box picked: the others step back (2026-10-12), still readable and clickable */
.rv-tbox-cell.is-faded { opacity: .45; }
.rv-tbox-cell.is-faded:hover, .rv-tbox-cell.is-faded:focus-visible { opacity: .85; }
.rv-tbox-cell.is-target { outline: 2px dashed var(--navy, #252A59); outline-offset: 3px; }
.rv-tbox-cell:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 3px; }
.rv-tbox-cell:disabled { cursor: default; background: #fafbfd; }
.rv-tbox-cellh { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.rv-tbox-cat { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbox-mv, .rv-tbox-pct, .rv-tbox-fmore { color: #5b6178; }
.rv-tbox-cell[data-cat="super-star"] :is(.rv-tbox-mv, .rv-tbox-pct, .rv-tbox-fmore) { color: #c9cef3; }
.rv-tbox-cell[data-cat="star"] :is(.rv-tbox-mv, .rv-tbox-pct, .rv-tbox-fmore) { color: #465082; }
.rv-tbox-cell[data-cat^="pip"] :is(.rv-tbox-mv, .rv-tbox-pct, .rv-tbox-fmore) { color: #94532a; }
.rv-tbox-mv { flex: none; font-size: 11px; font-weight: 600; white-space: nowrap; }
.rv-tbox-num { display: flex; align-items: baseline; gap: 6px; }
.rv-tbox-big { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rv-tbox-pct { font-size: 12px; font-variant-numeric: tabular-nums; }
.rv-tbox-faces { display: flex; align-items: center; margin-top: auto; padding-left: 5px; }
.rv-tbox-face { width: 22px; height: 22px; margin-left: -5px; border-radius: 50%; display: grid; place-items: center;
  box-sizing: border-box; font-size: 10px; font-weight: 700; background: #fff; color: #3a4060; border: 2px solid #f4f5f9; }
.rv-tbox-cell[data-cat="super-star"] .rv-tbox-face { background: #3b4387; color: #fff; border-color: #262c63; }
.rv-tbox-cell[data-cat="star"] .rv-tbox-face { color: #252A59; border-color: #dfe3f7; }
.rv-tbox-cell[data-cat^="pip"] .rv-tbox-face { color: #7f370a; border-color: #fcefe5; }
.rv-tbox-fmore { margin-left: 5px; font-size: 11px; font-weight: 600; }
.rv-tbox-cell.is-short .rv-tbox-faces { display: none; }
/* the panel beside the grid: the picked box's people, or one person's Move */
.rv-tbox-drawer { flex: 1 0 340px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; min-height: 0;
  border: 1px solid #e4e7ef; border-radius: 10px; background: #fbfbfd; overflow: hidden; }
.rv-tbox-dhead { padding: 10px 12px; background: #fff; border-bottom: 1px solid #eceef4; display: flex; flex-direction: column; gap: 6px; }
.rv-tbox-dtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-tbox-dpill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px;
  font-weight: 700; background: #f4f5f9; color: #262b45; border: 1px solid #e1e4ee; }
.rv-tbox-dpill[data-cat="super-star"] { background: #262c63; color: #fff; border-color: #262c63; }
.rv-tbox-dpill[data-cat="star"] { background: #dfe3f7; color: #1d2249; border-color: #c9cfee; }
.rv-tbox-dpill[data-cat^="pip"] { background: #fcefe5; color: #7f370a; border-color: #f1d3bb; }
.rv-tbox-dn { font-size: 12px; color: #5b6178; font-variant-numeric: tabular-nums; }
.rv-tbox-dtitle { margin: 0; font-size: 14px; color: #1f2335; }
.rv-tbox-search { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid #dfe2ec;
  border-radius: 8px; background: #fff; color: #5b6178; }
.rv-tbox-search:focus-within { border-color: var(--navy, #252A59); box-shadow: 0 0 0 3px rgba(37,42,89,.12); }
.rv-tbox-search .rv-ico { width: 14px; height: 14px; }
.rv-tbox-sico { display: inline-flex; }
.rv-tbox-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 13px; color: #1f2335; }
.rv-tbox-plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rv-tbox-body:not(.is-fixed) .rv-tbox-plist { max-height: 420px; }
.rv-tbox-prow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #eef0f5; }
.rv-tbox-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e6e9f6;
  color: var(--navy, #252A59); font-size: 11px; font-weight: 700; }
.rv-tbox-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rv-tbox-pname { max-width: 100%; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: #1f2335; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.rv-tbox-pname:hover:not(:disabled) { color: var(--navy, #252A59); text-decoration: underline; }
.rv-tbox-pname:disabled { cursor: default; }
.rv-tbox-psub { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; font-size: 11.5px; color: #5b6178; }
.rv-tbox-where { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbox-bands { flex: none; font-size: 11px; font-weight: 600; color: #2c3150; border: 1px solid #e1e4ee; background: #fff;
  border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.rv-tbox-ptag { font-size: 11px; font-weight: 600; color: #465082; }
/* a band nobody has recorded yet (UA / Low by default, 2026-10-07): said in words, and drawn dashed -- never passed
   off as a rating */
.rv-tbox-ptag.is-default { color: #8a3f0c; font-weight: 500; }
.rv-tbox-dflt { color: #8a3f0c; text-decoration: underline dashed; text-underline-offset: 2px; }
.rv-tbox-band.is-default { background: transparent; border: 1px dashed #d9a37e; color: #8a3f0c; }
.rv-tbox-acts { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.rv-tbox-selfnote { font-size: 11.5px; color: #5b6178; }
.rv-tbox-mvbtn { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid #d7dbe8; background: #fff;
  color: var(--navy, #252A59); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rv-tbox-mvbtn:hover:not(:disabled) { background: #eef0f8; }
.rv-tbox-mvbtn:disabled { opacity: .45; cursor: default; }
.rv-tbox-open { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: #5b6178;
  display: grid; place-items: center; cursor: pointer; }
.rv-tbox-open:hover { background: #eef0f8; color: var(--navy, #252A59); }
.rv-tbox-open .rv-ico { width: 15px; height: 15px; }
.rv-tbox-none { margin: 0; padding: 14px 12px; font-size: 13px; color: #5b6178; }
.rv-tbox-showmore { display: block; margin: 8px 12px; }
:is(.rv-tbox-view, .rv-tbox-catchip, .rv-tbox-pname, .rv-tbox-mvbtn, .rv-tbox-open, .rv-tbox-pk, .rv-tbox-seg, .rv-tbox-sort,
  .rv-tbox-save, .rv-tbox-cancel):focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
/* Move: a 3x3 picker, the band where the column holds two, a reason */
.rv-tbox-move { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #fff; min-height: 0; }
/* ...popped out under its Move button (Chris, 2026-10-07: "pop out the box instead of pushing the cell down ... the box
   should be smaller and position more to the right"): fixed to the page, right-aligned to the button, a caret at it */
.rv-tbox-mvpop { position: fixed; z-index: 1250; width: 300px; max-width: calc(100vw - 16px); background: #fff;
  border: 1px solid #d9def2; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20, 26, 60, .18), 0 2px 6px rgba(20, 26, 60, .08); }
.rv-tbox-mvpop::before { content: ""; position: absolute; top: -7px; left: calc(var(--tb-caret, 50%) - 6px); width: 12px;
  height: 12px; background: #fff; border-left: 1px solid #d9def2; border-top: 1px solid #d9def2; transform: rotate(45deg); }
.rv-tbox-mvpop.is-up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
/* above its button: the picker sits next to Move and a picked box's bands open above it */
.rv-tbox-mvpop.is-up .rv-tbox-move.is-pop .rv-tbox-mvbody { flex-direction: column-reverse; }
.rv-tbox-move.is-pop { position: relative; gap: 8px; padding: 12px; border-radius: 12px; max-height: calc(100vh - 32px);
  overflow-y: auto; overscroll-behavior: contain; }
.rv-tbox-move.is-pop .rv-tbox-mvtitle { font-size: 13px; }
.rv-tbox-move.is-pop .rv-tbox-mvnow { font-size: 11.5px; }
.rv-tbox-move.is-pop .rv-tbox-mvbody { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.rv-tbox-move.is-pop .rv-tbox-pkwrap { flex: none; max-width: none; }
.rv-tbox-move.is-pop .rv-tbox-pk { height: 32px; }
.rv-tbox-move.is-pop .rv-tbox-pk small { font-size: 9.5px; }
.rv-tbox-move.is-pop .rv-tbox-pkcap { font-size: 10.5px; }
.rv-tbox-move.is-pop .rv-tbox-mvside { flex: none; gap: 6px; font-size: 12.5px; }
.rv-tbox-move.is-pop .rv-tbox-mvhint { font-size: 12px; }
.rv-tbox-move.is-pop .rv-tbox-mvgrid { grid-template-columns: 76px minmax(0, 1fr); font-size: 12px; }
.rv-tbox-move.is-pop .rv-tbox-seg { height: 26px; min-width: 40px; padding: 0 8px; }
.rv-tbox-move.is-pop .rv-tbox-mvwhy textarea { height: 44px; min-height: 44px; font-size: 12.5px; }
.rv-tbox-move.is-pop .rv-tbox-mvacts { padding-top: 2px; }
.rv-tbox-move.is-pop :is(.rv-tbox-save, .rv-tbox-cancel) { height: 30px; padding: 0 12px; font-size: 12.5px; }
/* the row its Move belongs to, and the button while it's open */
.rv-tbox-table tr.is-moving td, .rv-tbox-prow.is-moving { background: #f3f5fc; }
.rv-tbox-mvbtn.is-open { background: var(--navy, #252A59); border-color: var(--navy, #252A59); color: #fff; }
.rv-tbox-mvbtn.is-open:hover:not(:disabled) { background: var(--navy-700, #1d2249); }
.rv-tbox-mvhead { display: flex; flex-direction: column; gap: 2px; }
.rv-tbox-mvtitle { font-size: 14px; font-weight: 700; color: var(--navy, #252A59); }
.rv-tbox-mvnow { font-size: 12px; color: #5b6178; }
.rv-tbox-mvbody { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: flex-start; }
.rv-tbox-pkwrap { flex: 1 1 240px; max-width: 280px; display: flex; flex-direction: column; gap: 4px; }
.rv-tbox-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.rv-tbox-pk { height: 38px; padding: 0 4px; border-radius: 7px; border: 1px solid #e1e4ee; background: #f4f5f9; color: #262b45;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.1; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; }
.rv-tbox-pk[data-cat="super-star"] { background: #262c63; border-color: #262c63; color: #fff; }
.rv-tbox-pk[data-cat="star"] { background: #dfe3f7; border-color: #c9cfee; color: #1d2249; }
.rv-tbox-pk[data-cat^="pip"] { background: #fcefe5; border-color: #f1d3bb; color: #7f370a; }
.rv-tbox-pk:hover:not(:disabled) { filter: brightness(.96); }
.rv-tbox-pk.is-now { box-shadow: inset 0 0 0 2px currentColor; cursor: default; }
.rv-tbox-pk[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy, #252A59); }
.rv-tbox-pk small { font-size: 10px; font-weight: 500; }
.rv-tbox-pkcap { font-size: 11px; color: #5b6178; }
.rv-tbox-mvside { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #1f2335; }
.rv-tbox-mvhint, .rv-tbox-mvline { margin: 0; }
.rv-tbox-mvhint { font-size: 12.5px; color: #5b6178; }
.rv-tbox-mvgrid { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 6px 10px; font-size: 12.5px; }
.rv-tbox-mvk { color: #5b6178; }
.rv-tbox-mvv { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-tbox-segs { display: inline-flex; border: 1px solid #d7dbe8; border-radius: 8px; overflow: hidden; }
.rv-tbox-seg { height: 28px; min-width: 44px; padding: 0 10px; border: 0; background: #fff; color: var(--navy, #252A59); font: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer; }
.rv-tbox-seg + .rv-tbox-seg { border-left: 1px solid #d7dbe8; }
.rv-tbox-seg[aria-pressed="true"] { background: var(--navy, #252A59); color: #fff; }
.rv-tbox-mvwhy { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5b6178; }
.rv-tbox-mvwhy textarea { font: inherit; font-size: 13px; color: #1f2335; border: 1px solid #d7dbe8; border-radius: 8px; padding: 6px 8px;
  resize: vertical; }
.rv-tbox-mvcap { margin: 0; font-size: 12px; color: #5b6178; }
.rv-tbox-mvcap.is-bad { color: #b3261e; }
.rv-tbox-move .rv-tbox-err { margin: 0; }
.rv-tbox-move .rv-tbox-err:empty { display: none; }
.rv-tbox-mvacts { display: flex; justify-content: flex-end; gap: 8px; }
.rv-tbox-save, .rv-tbox-cancel { height: 34px; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rv-tbox-cancel { border: 1px solid #d7dbe8; background: #fff; color: #3a4060; }
.rv-tbox-cancel:hover:not(:disabled) { background: #eef0f8; }
.rv-tbox-save { border: 0; background: var(--navy, #252A59); color: #fff; font-weight: 700; }
.rv-tbox-save:hover:not(:disabled) { background: var(--navy-700, #1d2249); }
.rv-tbox-save:disabled, .rv-tbox-cancel:disabled { opacity: .45; cursor: default; }
/* the list view: everyone in the business unit, each column with the admin tables' Excel-style menu (sort + a value
   filter; colmenu.js's look, .col-menu / .col-menu-btn), the name alone in its column and the department in its own
   (Chris, 2026-10-07). Fixed widths so Moved stays narrow and the actions keep their room off the right edge. */
.rv-tbox-listwrap { flex: 1 1 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.rv-tbox-lbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 20px; }
.rv-tbox-lcount { font-size: 12.5px; color: #5b6178; }
.rv-tbox-lclear { font-size: 12.5px; }
.rv-tbox-lscroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid #e4e7ef; border-radius: 10px;
  overscroll-behavior: contain; scrollbar-gutter: stable; }
.rv-tbox-body:not(.is-fixed) .rv-tbox-lscroll { max-height: 520px; }
.rv-tbox-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.rv-tbox-col-dept { width: 108px; }
.rv-tbox-col-grade { width: 72px; }
.rv-tbox-col-perf { width: 116px; }
.rv-tbox-col-pot { width: 96px; }
.rv-tbox-col-box { width: 144px; }   /* room for "↓ from Super Star" under the box (2026-10-07) */
.rv-tbox-col-ai { width: 46px; }
.rv-tbox-col-act { width: 76px; }
.rv-tbox-table th { position: sticky; top: 0; z-index: 1; padding: 0; background: #f6f7fb; border-bottom: 1px solid #e4e7ef;
  text-align: left; font-size: 12px; color: #3a4060; }
.rv-tbox-table th .col-menu-btn { padding: 9px 6px 9px 8px; border-radius: 0; font-size: 12px; }
.rv-tbox-table th .col-menu-btn:hover { background: #eceef6; }
.rv-tbox-table th .col-menu-btn[aria-expanded="true"] { background: #e4e7f3; }
.rv-tbox-table th .col-menu-btn .cm-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-tbox-table th .col-menu-btn:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: -2px; }
.rv-tbox-table td { padding: 6px 8px; border-bottom: 1px solid #eef0f5; vertical-align: middle; overflow: hidden; }
.rv-tbox-tdname .rv-tbox-pname { display: block; }
.rv-tbox-tddept { white-space: nowrap; text-overflow: ellipsis; color: #3a4060; }
.rv-tbox-tdgrade { font-variant-numeric: tabular-nums; }
.rv-tbox-table td.rv-tbox-tdact { padding: 6px 12px 6px 6px; }
.rv-tbox-table .rv-tbox-acts { gap: 10px; }
.rv-tbox-bandw { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
/* the AI insight (2026-10-07): an icon per person in the list's AI column and in place of the panel's initials */
.rv-tbox-aih { display: block; padding: 9px 4px; text-align: center; font-weight: 700; }
.rv-tbox-table td.rv-tbox-tdai { padding: 4px 2px; text-align: center; }
.rv-tbox-insbtn.rv-rmk-btn { width: 30px; height: 30px; flex: none; border-radius: 50%; }
.rv-tbox-insbtn.rv-rmk-btn .rv-ico { width: 15px; height: 15px; }
.rv-tb-ins .rv-ps-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-tb-facts { display: grid; gap: 4px; margin: 8px 0 10px; font-size: 12.5px; }
.rv-tb-fact { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-tb-fk { flex: none; width: 86px; color: #5b6178; }
.rv-tb-ff { min-width: 0; color: #3a4060; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-tb-dec { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #1f2335; }
.rv-tb-open { display: inline-block; margin-top: 10px; }
.rv-tbox-trailbtn { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none;
  color: #8a90a8; display: inline-grid; place-items: center; cursor: help; }
.rv-tbox-trailbtn:hover, .rv-tbox-trailbtn[aria-expanded="true"] { background: #eef0f8; color: var(--navy, #252A59); }
.rv-tbox-trailbtn:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 1px; }
.rv-tbox-trailbtn .rv-ico { width: 15px; height: 15px; }
/* the column menu, fixed to the page (the chat scrolls) */
.col-menu.rv-tbox-cm { position: fixed; z-index: 1300; }
.col-menu.rv-tbox-cm .cm-sort button.is-on { font-weight: 700; color: var(--navy, #252A59); background: #eef0f8; }
.col-menu.rv-tbox-cm .cm-none { margin: 6px; font-size: 0.83rem; color: #6b7186; }
.col-menu.rv-tbox-cm .cm-foot .cm-apply { background: var(--navy, #252A59); border-color: var(--navy, #252A59); color: #fff; }
/* a band's trail: Self -> line manager -> HOD -> BU CEO (-> you), on hover / focus of its icon */
.rv-tbox-trail { position: fixed; z-index: 1300; max-width: min(580px, calc(100vw - 16px)); padding: 12px 14px 10px;
  background: #fff; border: 1px solid #d7dbe8; border-radius: 12px; box-shadow: 0 10px 30px rgba(31,35,53,.18);
  color: #1f2335; font-size: 12px; pointer-events: none; }
.rv-tt-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5b6178; margin-bottom: 8px; }
.rv-tt-steps { display: flex; align-items: flex-start; gap: 4px 6px; flex-wrap: wrap; }
.rv-tt-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; text-align: center; }
.rv-tt-who { font-size: 11.5px; font-weight: 600; color: #3a4060; white-space: nowrap; }
.rv-tt-band.is-none { background: transparent; border: 1px dashed #cfd3df; color: #9aa0b4; }
.rv-tt-step.is-you .rv-tt-band { background: var(--navy, #252A59); color: #fff; }
.rv-tt-st { font-size: 11px; color: #6b7186; white-space: nowrap; }
.rv-tt-step.is-moved .rv-tt-st { color: #9a5a12; font-weight: 600; }
.rv-tt-step.is-wait .rv-tt-st, .rv-tt-step.is-none .rv-tt-st, .rv-tt-step.is-na .rv-tt-st { color: #9aa0b4; }
.rv-tt-arr { margin-top: 21px; color: #b4b9cb; font-size: 13px; line-height: 1; }
.rv-tt-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid #eef0f5; font-size: 12px; color: #3a4060; }
.rv-tbox-band { display: inline-block; min-width: 30px; padding: 1px 7px; border-radius: 6px; background: #f1f3f8; color: #2c3150;
  font-size: 12px; font-weight: 700; text-align: center; }
.rv-tbox-boxc { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; }
.rv-tbox-glyph { flex: none; display: grid; grid-template-columns: repeat(3, 6px); gap: 1.5px; }
.rv-tbox-glyph i { width: 6px; height: 6px; border-radius: 1.5px; background: #e3e6ef; }
.rv-tbox-glyph i.is-on { background: var(--navy, #252A59); }
.rv-tbox-boxcat { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbox-boxcat[data-cat^="pip"] { color: #8a3f0c; }
.rv-tbox-boxfrom { margin: 2px 0 0 25px; font-size: 11px; color: #465082; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* the foot on one line: the waiting note shortens beside the Lock (its whole text on hover) */
.rv-tbox-foot { flex-wrap: nowrap; align-items: center; gap: 12px; }
.rv-tbox-foot .rv-cal-footnote { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-tbox-foot .rv-cal-lockform { flex: none; }
.rv-cal-pat { flex: none; font-size: 12px; font-weight: 600; color: #4a5165; background: #f1f3f8; border-radius: 999px;
  padding: 1px 9px; white-space: nowrap; }
/* units calibrated together (row 6): the two units' curves in one chip, cut with the full text on hover */
.rv-cal-titlebar .rv-cal-pat { flex: 0 1 auto; min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-tbox-pat { margin-left: 6px; font-size: 11px; font-weight: 500; color: #6a7185; }
.rv-tbox-bu.is-on .rv-tbox-pat { color: #d5d8ee; }
/* One person's page on the Talent Box (2026-10-05), beside the box since 2026-10-07 (design A): their header and tabs
   stay put, the tab's content scrolls */
.rv-tbp-move { flex: none; white-space: nowrap; }
.rv-tbp-sits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.rv-tbp-k { color: #6b7186; margin-left: 6px; }
.rv-tbp-src { font-size: 11.5px; color: #5b6178; }
.rv-tbp-src.is-default { color: #8a3f0c; }
/* a Group Chief's Talent Box (2026-10-13): how their call and the BG CEO's make the suggestion, under the title; the
   BG CEO's side beside a person whose box shows something else */
.rv-tbox-gmode { font-size: 12.5px; color: #5b6178; margin: -2px 0 8px; }
.rv-tbox-ptag.is-bgc { color: #5b6178; font-weight: 500; }
.rv-tbp-bgc { font-size: 11.5px; color: #5b6178; padding-left: 8px; border-left: 1px solid #dfe2ec; }
/* the tabs are the box's own segmented control, like Grid | List */
.rv-tbp-tabs { display: inline-flex; align-self: flex-start; padding: 2px; border-radius: 8px; background: #f1f2f7; }
.rv-tbp-tab { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit;
  font-size: 12.5px; font-weight: 600; color: #5b6178; cursor: pointer; white-space: nowrap; }
.rv-tbp-tab[aria-selected="true"] { background: #fff; color: var(--navy, #252A59); box-shadow: 0 1px 2px rgba(31,35,53,.14); }
.rv-tbp-tab:hover { color: var(--navy, #252A59); }
.rv-tbp-tab:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 1px; }
.rv-tbp-body { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-gutter: stable; }
.rv-tbp-body .rv-cal-person { max-height: none; overflow: visible; }
.rv-cal-id-nowho .rv-cal-who { display: none; }
.rv-tbp-idp .rv-cal-h4 { margin: 16px 0 6px; }
.rv-tbp-goals { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.rv-tbp-garea { font-weight: 600; color: #1f2433; }
.rv-tbp-gby { color: #6b7186; font-size: 13px; }
.rv-tbp-goals ul { margin: 4px 0 0; padding-left: 18px; color: #3a4054; font-size: 13px; line-height: 1.45; }
.rv-tbp-dir { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 14px; }
.rv-tbp-dir dt { color: #6b7186; }
.rv-tbp-dir dd { margin: 0; color: #1f2433; }
.rv-tbp-rmk { margin: 0; font-size: 14px; line-height: 1.5; color: #1f2433; white-space: pre-wrap; }
.rv-tbp-scores { margin: 6px 0 0; }
.rv-tbox-arrow { font-size: 11px; color: var(--navy, #252A59); }
.rv-tbox-unplaced { font-size: 13px; color: #4a5165; }
.rv-tbox-unplaced summary { cursor: pointer; font-weight: 600; }
.rv-tbox-unplaced ul { margin: 6px 0 0 18px; padding: 0; }
.rv-tbox-foot { justify-content: space-between; flex-wrap: wrap; }
.rv-tbox-flabel { font-size: 13px; font-weight: 600; color: #252a40; }
.rv-tbox-err { color: #b3261e; font-size: 13px; min-height: 1em; margin: 0 0 6px; }

/* ---- Equal sizes and steady columns (Chris, 2026-10-01: "fix the width of the box to equally sized for the department
   summary and individual toggle, and the potential band and not finalized box. For the table, fix the column width
   when switch between the band filter ... and any other table with similar setup like the line manager summary and
   individual toggle") ---- */
/* the two-way view toggle (the line manager's Team summary | Individual): equal halves */
.mod-tabs.rv-mgr-toggle { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  width: max-content; max-width: none; }   /* equal halves, each as wide as the longer label */
.mod-tabs.rv-mgr-toggle > button { text-align: center; }
/* the department review and the calibration roster: the header sets each column's width, so hiding rows (a band
   filter) or a band moving never reflows the table; Person takes what's left */
.rv-calib-roster .rv-calib-roster-tbl { table-layout: fixed; min-width: 660px; }   /* narrower: it scrolls sideways
   in its own box rather than squeezing Person to nothing */
.rv-calib-roster .rv-calib-roster-tbl th.rv-cal-thj { width: 168px; }   /* the summary icon + "✕ Not justified" */
.rv-calib-roster .rv-calib-roster-tbl th.rv-cal-chh { width: 62px; }    /* a band pill */
.rv-calib-roster .rv-calib-roster-tbl th.rv-cal-chh.rv-cal-own { width: 104px; }   /* select + remark icon, its tag */
/* The calibrator's remark beside their band (2026-10-05): an icon, filled once a remark is saved, opening a box */
.rv-cal-bandrow { display: flex; align-items: center; gap: 4px; }
.rv-cal-notebtn { flex: none; position: relative; width: 26px; height: 26px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: none;
  color: #8a90a3; cursor: pointer; }
.rv-cal-notebtn .rv-ico { width: 16px; height: 16px; }
.rv-cal-notebtn:hover, .rv-cal-notebtn[aria-expanded="true"] { background: #eef1f7; color: var(--navy, #252A59); }
.rv-cal-notebtn:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 1px; }
.rv-cal-notebtn.has-note { color: var(--navy, #252A59); background: #e8edfa; border-color: #c9d3ee; }
.rv-cal-notebtn.has-draft::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px;
  border-radius: 50%; background: #c07a12; }
.rv-cal-notepop { position: fixed; z-index: 1100; box-sizing: border-box; padding: 12px 14px; background: #fff;
  border: 1px solid #d5dae7; border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 26, 60, .18); }
.rv-cal-notepop-h { font-size: 14px; font-weight: 700; color: #1f2433; }
.rv-cal-notepop-sub { margin: 2px 0 10px; font-size: 12px; color: #6b7186; }
.rv-cal-notepop-text { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #1f2433; white-space: pre-wrap; }
.rv-cal-notepop .rv-myrm-input { min-height: 96px; font-size: 13px; }
.rv-cal-notepop-st { font-size: 12px; color: #6b7186; }
.rv-cal-notepop-st.is-bad { color: #b42318; font-weight: 600; }
.rv-cal-notepop-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.rv-cal-notepop-acts button { white-space: nowrap; }   /* pill / select + its tag */
.rv-calib-roster .rv-calib-roster-tbl th.rv-cal-tha { width: 72px; }    /* Review / Open */
/* what a potential score is made of (2026-10-01) -- in the AI insight pop-up and on the person's page: the 360, the
   competency (theirs and the line manager's), each half's admin weight and what it adds, the sum */
.rv-pot-bd { margin: 8px 0 6px; border: 1px solid var(--rl-line-soft, #eef0f5); border-radius: 8px; padding: 6px 10px;
  font-size: 13px; color: #2b3040; }
.rv-pot-bd-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  padding: 3px 0; }
.rv-pot-bd-k { color: #5f6678; font-weight: 600; }
.rv-pot-bd-v { min-width: 0; font-variant-numeric: tabular-nums; }
.rv-pot-bd-w { color: #2b3040; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-pot-bd-tot { border-top: 1px solid var(--rl-line-soft, #eef0f5); margin-top: 3px; padding-top: 6px; }
.rv-pot-bd-tot .rv-pot-bd-k, .rv-pot-bd-tot .rv-pot-bd-v, .rv-pot-bd-tot .rv-pot-bd-w { color: var(--navy, #252A59);
  font-weight: 700; }
/* ...and in one line in the AI insight pop-up (2026-10-02): 360 + Competency = Potential */
.rv-pot-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 8px 0 6px;
  border: 1px solid var(--rl-line-soft, #eef0f5); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.rv-pot-line-p { white-space: nowrap; }
.rv-pot-line-k { color: #5f6678; font-weight: 600; }
.rv-pot-line-v { color: var(--navy, #252A59); font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-pot-line-v.is-none { color: #5f6678; font-weight: 500; }
.rv-pot-line-op { color: #8a90a2; font-weight: 600; }
/* strengths and development areas on the potential person page (2026-10-05): the top and bottom principles of the 360,
   in words and a four-step meter (never a count or a %), then the competency as their line manager reviewed it */
.rv-pot-sw { border: 1px solid var(--rl-line-soft, #eef0f5); border-radius: 8px; padding: 12px 16px 14px; }
.rv-pot-sw-h { display: flex; align-items: baseline; gap: 10px; }
.rv-pot-sw-t { margin: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: #1f2330; }
.rv-pot-sw-src { margin-left: auto; font-size: 12px; color: #5f6678; }
.rv-pot-sw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 12px; }
.rv-pot-sw-ct { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #5f6678; }
.rv-pot-sw-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rv-pot-sw-name { font-size: 14px; line-height: 19px; font-weight: 600; color: #1f2330; }
.rv-pot-sw-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rv-pot-sw-meter { display: inline-flex; gap: 2px; flex: none; }
.rv-pot-sw-meter i { width: 10px; height: 6px; border-radius: 2px; background: #e4e7ef; }
.rv-pot-sw-meter i.on { background: var(--navy, #252A59); }
.rv-pot-sw-col.is-dev .rv-pot-sw-meter i.on { background: #8a90a2; }
.rv-pot-sw-label { font-size: 13px; line-height: 18px; color: #4a5165; }
.rv-pot-sw-label.is-full { color: var(--navy, #252A59); font-weight: 600; }
.rv-pot-sw-note { margin-top: 3px; font-size: 13px; line-height: 18px; color: #4a5165; }
.rv-pot-sw-note.is-current { color: #9a5a12; }
.rv-pot-sw-none { margin: 8px 0 0; font-size: 13px; line-height: 19px; color: #5f6678; }
/* what was written about their potential (2026-10-05): an AI summary, the remarks themselves one click away */
.rv-pot-rmk { border: 1px solid var(--rl-line-soft, #eef0f5); border-radius: 8px; padding: 12px 16px 14px; }
.rv-pot-rmk-sum { margin: 10px 0 0; font-size: 14px; line-height: 22px; color: #2b3040; }
.rv-pot-rmk-sum.rv-pot-sw-soft { font-size: 13px; line-height: 19px; color: #5f6678; }
.rv-pot-rmk-btn { margin-top: 10px; }
/* ...inside the justification / AI read block, under its paragraph (2026-10-05) */
.rv-cal-wrote { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4e7ef; }
.rv-pot-rmk > .rv-cal-wrote { margin-top: 0; padding-top: 0; border-top: 0; }
.rv-cal-wrote .rv-pot-rmk-sum { margin-top: 6px; }
/* the performance person page (2026-10-05): how the rating got here, in the potential breakdown's box; a lower tier's
   move in amber, a step still waiting muted; and one line per person who wrote, two lines each */
.rv-perf-bd .rv-pot-bd-row { grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; }
.rv-perf-bd .rv-pot-bd-row.is-moved .rv-pot-bd-v { color: #9a5a12; }
.rv-perf-bd .rv-pot-bd-row.is-wait .rv-pot-bd-v { color: #5f6678; }
.rv-perf-bd .rv-pot-bd-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-perf-bd-by { color: #5f6678; font-weight: 400; }
.rv-perf-rmk-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; margin-top: 10px;
  font-size: 14px; line-height: 21px; }
.rv-perf-rmk-who { min-width: 0; display: flex; flex-direction: column; color: #4a5165; font-size: 13px; font-weight: 600;
  line-height: 19px; }
.rv-perf-rmk-sub { color: #5f6678; font-size: 12px; font-weight: 400; line-height: 17px; overflow-wrap: anywhere; }
/* align-self: a two-line label must not stretch the text past its two lines */
.rv-perf-rmk-text { align-self: start; min-width: 0; color: #2b3040; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.rv-pot-sw-extra[hidden] { display: none; }
.rv-pot-sw-list.rv-pot-sw-extra { margin-top: 12px; }
/* "+N more" / "Show less": a real button that reads as a link */
.rv-pot-sw-morebtn { margin: 6px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px;
  line-height: 18px; font-weight: 600; color: var(--navy, #252A59); cursor: pointer; }
.rv-pot-sw-cv .rv-pot-sw-morebtn, .rv-jc-line .rv-pot-sw-morebtn { margin: 0; }
.rv-pot-sw-morebtn:hover { text-decoration: underline; }
.rv-pot-sw-morebtn:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; border-radius: 3px; }
.rv-pot-sw-comp { border-top: 1px solid var(--rl-line-soft, #eef0f5); margin-top: 14px; padding-top: 12px; }
.rv-pot-sw-crow { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; margin-top: 6px;
  font-size: 13px; line-height: 19px; }
.rv-pot-sw-ck { color: #5f6678; font-weight: 600; }
.rv-pot-sw-cv { min-width: 0; color: #2b3040; }
.rv-pot-sw-ctag { margin-left: 2px; font-size: 11px; font-weight: 600; color: #9a5a12; background: #fdf0e2;
  border-radius: 999px; padding: 0 6px; }
.rv-pot-sw-soft { color: #5f6678; }
.rv-pot-sw-cpend { margin: 12px 0 0; font-size: 13px; line-height: 19px; }
.rv-pot-sw-even { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.rv-pot-sw-even .rv-pot-sw-meter { align-self: center; }
@media (max-width: 640px) {
  .rv-pot-sw-cols { grid-template-columns: 1fr; gap: 16px; }
  .rv-pot-sw-crow { grid-template-columns: 1fr; gap: 0; }
}
.rv-calib-roster .rv-calib-roster-tbl td { overflow-wrap: anywhere; }
/* ...and a scrollbar coming or going (fewer rows on show, a shorter chat) never changes the width either */
.rv-calib-roster.rv-table-scroll, #rv-chat-log { scrollbar-gutter: stable; }
/* the band boxes: one line each, Not finalised included, at equal widths */
.rv-dr-tbox, .rv-dr-sum-cell { padding-left: 8px; padding-right: 8px; }
.rv-dr-tcode { white-space: nowrap; min-width: 0; }
.rv-dr-tlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The curve's roster, one line per cell (Chris, 2026-10-06: "This table just look very cluttered"): a word under a pill
   is now a small mark beside it, its words on hover, named by the legend under the table. */
.rv-cal-cband { position: relative; display: inline-block; }
.rv-cal-mk { flex: none; display: inline-block; cursor: help; }
.rv-cal-mk.is-late { width: 8px; height: 8px; border-radius: 50%; background: #d08a16; }
.rv-cal-mk.is-override { width: 8px; height: 8px; border-radius: 50%; background: #6a4fc0; }
.rv-cal-cband > .rv-cal-mk.is-late, .rv-cal-cband > .rv-cal-mk.is-override { position: absolute; top: -3px;
  right: -3px; box-shadow: 0 0 0 2px #fff; }   /* a badge on the band's corner: it takes no width */
.rv-cal-mk.is-basis { font-size: 15px; font-weight: 700; line-height: 1; color: #8a90a2; }
.rv-cal-bandsel.modern-select.is-moved { border-color: #d08a16; box-shadow: inset 3px 0 0 #d08a16; }
.rv-cal-key { display: inline-flex; vertical-align: middle; color: #8a90a2; cursor: help; border-radius: 50%; }
.rv-cal-key .rv-ico { width: 16px; height: 16px; }
.rv-cal-key:hover, .rv-cal-key:focus-visible { color: var(--navy, #252A59); }
.rv-cal-key:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 1px; }
/* the roster's name and its department line: one line each, an ellipsis, the full words on hover (2026-10-06) */
.rv-calib-roster .rv-calib-roster-tbl td.rv-cal-person-cell { overflow-wrap: normal; }
.rv-calib-roster .rv-cal-pname, .rv-calib-roster .rv-cal-psub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the potential score (icon, "24.1 / 35.0 *") needs less than "✕ Not justified": the rest goes to the name */
.rv-calib-roster .rv-calib-roster-tbl th.rv-cal-thj.is-pot { width: 144px; }
.rv-cal-selfnote { font-size: 12px; white-space: nowrap; cursor: help; }   /* their own row, no band yet */
/* the person last read on their page, marked on the curve (2026-10-06): easy to spot on the way back */
.rv-calib-roster .rv-cal-table tr.is-lastread td { background: #eef3ff; }
.rv-calib-roster .rv-cal-table tr.is-lastread td:first-child { box-shadow: inset 3px 0 0 var(--navy, #252A59); }
/* the BG CEO's business units on the Talent Box: ONE row, paged with < > when they don't all fit (2026-10-06) */
.rv-tbox-busrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rv-tbox-busrow .rv-tbox-bus { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  position: relative; scrollbar-width: none; scroll-behavior: smooth; padding: 4px 2px; }
.rv-tbox-busrow .rv-tbox-bus::-webkit-scrollbar { display: none; }
.rv-tbox-busnav { display: none; flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid var(--rl-line, #e4e7ef); background: #fff; color: var(--navy, #252A59); cursor: pointer;
  align-items: center; justify-content: center; }
.rv-tbox-busrow.is-overflow .rv-tbox-busnav { display: inline-flex; }
.rv-tbox-busnav .rv-ico { width: 15px; height: 15px; }
.rv-tbox-busnav:hover:not(:disabled) { border-color: var(--navy, #252A59); background: #f3f5fb; }
.rv-tbox-busnav:disabled { opacity: .35; cursor: default; }
.rv-tbox-busnav:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
/* ---- Talent Box: one person's page, a SHEET beside the box (2026-10-08), the box folded into a live column on the
   left (2026-10-07; back on 2026-10-09 in place of the dimmed box, Chris: "instead of showing it as dimmed page ... the
   previous summarized version of the main page"): its 3x3 with their box ringed, then that box's people. Back on the
   box, the person just read is marked: their row (the curve's last-read look, a "Last viewed" tag) and their face on
   the box, in navy. */
.rv-tbox-body.is-person { display: flex; flex-wrap: nowrap; gap: 0; min-height: 300px; border: 1px solid #e4e7ef;
  border-radius: 10px; background: #fff; box-sizing: border-box; }
.rv-tbox-fhead { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fff;
  border-bottom: 1px solid #eceef4; }
.rv-tbox-mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.rv-tbox-mtile { height: 34px; min-width: 0; padding: 0 7px; display: flex; align-items: center; justify-content: space-between;
  gap: 4px; border-radius: 7px; border: 1px solid #e1e4ee; background: #f4f5f9; color: #262b45; font: inherit;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: box-shadow .15s ease; }
.rv-tbox-mtile[data-cat="super-star"] { background: #262c63; border-color: #262c63; color: #fff; }
.rv-tbox-mtile[data-cat="star"] { background: #dfe3f7; border-color: #c9cfee; color: #1d2249; }
.rv-tbox-mtile[data-cat^="pip"] { background: #fcefe5; border-color: #f1d3bb; color: #7f370a; }
.rv-tbox-mtile:hover:not(:disabled):not(.is-here) { box-shadow: 0 2px 8px rgba(37,42,89,.14); }
.rv-tbox-mtile.is-here { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy, #252A59); }
.rv-tbox-mtile:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 3px; }
.rv-tbox-mtile:disabled { cursor: default; background: #fafbfd; }
.rv-tbox-mface { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--navy, #252A59); color: #fff; font-size: 9px; font-weight: 700;
  box-shadow: 0 0 0 2px #fff; }
.rv-tbox-mtile[data-cat="super-star"] .rv-tbox-mface { background: #fff; color: #262c63; }
.rv-tbox-mcap { display: flex; justify-content: space-between; font-size: 11px; line-height: 13px; color: #5b6178; }
.rv-tbox-fbox { flex: none; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 10px 6px; }
.rv-tbox-fbox .rv-tbox-dn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbox-flist { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #eef0f5; }
.rv-tbox-body:not(.is-fixed) .rv-tbox-flist { max-height: 300px; }
.rv-tbox-frow { width: 100%; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0;
  border-bottom: 1px solid #eef0f5; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.rv-tbox-frow:hover:not(:disabled):not(.is-current) { background: #f3f5fc; }
.rv-tbox-frow:disabled { cursor: default; }
.rv-tbox-frow.is-current { background: #eef3ff; box-shadow: inset 3px 0 0 var(--navy, #252A59); cursor: default; }
.rv-tbox-frow:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: -2px; }
.rv-tbox-fwho { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rv-tbox-fname { font-size: 12.5px; line-height: 16px; font-weight: 600; color: #1f2335; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbox-fdept { font-size: 11px; line-height: 13px; color: #5b6178; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbox-seen { flex: none; display: inline-flex; color: #8a90a2; }
.rv-tbox-seen .rv-ico { width: 13px; height: 13px; }
/* their page */
.rv-tbox-pp { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; min-height: 0;
  border: 1px solid #e4e7ef; border-radius: 10px; background: #fff; overflow: hidden; }
.rv-tbox-pphead { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid #eceef4; }
.rv-tbox-pptop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rv-tbox-ppwho { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rv-tbox-ppname { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; color: #1f2330;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbox-ppname:focus { outline: none; }
.rv-tbox-ppsub { font-size: 12.5px; color: #4a5165; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbox-pager { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5b6178;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-tbox-pgbtn { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--rl-line, #e4e7ef);
  background: #fff; color: var(--navy, #252A59); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; }
.rv-tbox-pgbtn .rv-ico { width: 15px; height: 15px; }
.rv-tbox-pgbtn:hover:not(:disabled) { border-color: var(--navy, #252A59); background: #f3f5fb; }
.rv-tbox-pgbtn:disabled { opacity: .35; cursor: default; }
.rv-tbox-pgbtn:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 2px; }
.rv-tbox-pp .rv-tbp-body { flex: 1 1 auto; min-height: 0; padding: 12px 10px 12px 14px; }
/* back on the box: the person just read */
.rv-tbox-pline { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.rv-tbox-pline .rv-tbox-pname { flex: 0 1 auto; min-width: 0; }
.rv-tbox-lasttag { flex: none; padding: 1px 7px; border-radius: 999px; background: #dfe6fb; color: var(--navy, #252A59);
  font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.rv-tbox-prow.is-lastviewed { background: #eef3ff; box-shadow: inset 3px 0 0 var(--navy, #252A59); }
.rv-tbox-table tr.is-lastviewed td { background: #eef3ff; }
.rv-tbox-table tr.is-lastviewed td:first-child { box-shadow: inset 3px 0 0 var(--navy, #252A59); }
.rv-tbox-face.is-last { position: relative; z-index: 1; background: var(--navy, #252A59); color: #fff; border-color: #fff;
  box-shadow: 0 0 0 2px var(--navy, #252A59); }
.rv-tbox-cell[data-cat="super-star"] .rv-tbox-face.is-last { background: #fff; color: #262c63; border-color: #262c63;
  box-shadow: 0 0 0 2px #fff; }
.rv-tbox-prow.rv-tbox-flash, .rv-tbox-table tr.rv-tbox-flash td { animation: rvTbFlash 1.8s ease-out 1; }
@keyframes rvTbFlash { 0% { background-color: #d6e2ff; } 100% { background-color: #eef3ff; } }
@media (prefers-reduced-motion: reduce) {
  .rv-tbox-prow.rv-tbox-flash, .rv-tbox-table tr.rv-tbox-flash td { animation: none; }
}
/* the grid's own Move beside the pager */
.rv-tbox-pptop .rv-tbox-acts { flex: none; }
/* the Summary tab (Chris, 2026-10-07): the AI read, the three parts at a glance, the BG CEO's own remark */
.rv-tbp-sum { display: flex; flex-direction: column; gap: 12px; }
.rv-tbp-ins { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: #f7f8fb; }
.rv-tbp-kick { font-size: 12px; font-weight: 700; color: #5f6678; }
.rv-tbp-insp { margin: 0; font-size: 14px; line-height: 21px; color: #2b3040; }
.rv-tbp-dec { margin: 0; font-size: 13.5px; line-height: 20px; color: #2b3040; }
.rv-tbp-dec b { color: #1f2433; }
.rv-tbp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; }
.rv-tbp-card { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid #e4e7ef;
  border-radius: 10px; background: #fff; }
.rv-tbp-ch { font-size: 12.5px; font-weight: 700; color: #4a5165; }
.rv-tbp-cmain { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.rv-tbp-cl { font-size: 12.5px; line-height: 17px; color: #3a4060; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tbp-cgo { margin-top: auto; align-self: flex-start; font-size: 12.5px; }
.rv-tbp-plan { font-size: 13.5px; font-weight: 700; color: #1f2433; }
.rv-tbp-rm.rv-mgr-remarks { margin-top: 2px; }
/* the "Moved" chip: everyone the BG CEO moved, and the boxes holding them */
.rv-tbox-catmv { font-size: 12px; font-weight: 800; line-height: 1; color: var(--navy, #252A59); }
.rv-tbox-catchip:disabled { opacity: .5; cursor: default; }
.rv-tbox-catchip:disabled:hover { border-color: #e1e4ee; }
.rv-tbox-dpill[data-cat="moved"] { background: #fff; color: var(--navy, #252A59); border-color: var(--navy, #252A59); }
/* ---- THE PERSON SHEET (Chris, 2026-10-08: "a thin arrow bezel along the left border where user can click on it to
   let it slide back to right to close"; "go with bezel on all"). One person's page slides in from the right; the view
   it was opened from folds into a live column on the left (.rv-fold, 2026-10-09: "instead of showing it as dimmed
   page ... the previous summarized version of the main page"). Nothing dims: the bezel down the sheet's left edge or
   Esc slide it back (journey_chat.js sheetClose); a click on the column's empty space does nothing. */
.rv-sheet-host { position: relative; overflow: hidden; display: flex; container-type: inline-size; }
.rv-fold { flex: 0 0 232px; width: 232px; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: #fbfbfd; border-right: 1px solid #e4e7ef; overflow: hidden; box-sizing: border-box; }
.rv-sheet-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 232px; z-index: 3; }
.rv-sheet { position: absolute; inset: 0; display: flex; background: #fff;
  box-shadow: -12px 0 26px -18px rgba(20, 24, 52, 0.45); }
.rv-sheet > .rv-cal-pp, .rv-sheet > .rv-tbox-pp { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; }
button.rv-sheet-close { flex: 0 0 22px; width: 22px; min-width: 0; height: auto; margin: 0; padding: 0; border: 0;
  border-right: 1px solid #dde1ea; border-radius: 0; background: #e8ebf3; color: #5b6275; box-shadow: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.rv-sheet-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .15s; }
button.rv-sheet-close:hover { background: #d9e0f3; color: var(--navy, #252A59); }
button.rv-sheet-close:hover .rv-sheet-chev { transform: translateX(2px); }
button.rv-sheet-close:active { background: #cdd5ec; }
button.rv-sheet-close:focus { outline: none; }
button.rv-sheet-close:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: -2px; }
/* ---- Department Review and calibration: a person's page, a SHEET beside the folded summary / curve (2026-10-08;
   folded beside it again from 2026-10-09). The card takes the chat's full width in both views, so opening someone
   never changes its frame; the title row stays put; the column on the left keeps the band tally (the review) or the
   curve with their band ringed, then the others at their band by score. */
.rv-stage-card:has(.rv-calib-pin.rv-tc-pin) { width: 100%; }
.rv-cal-sbody { margin-top: 10px; min-height: 360px; border: 1px solid #e4e7ef; border-radius: 10px; background: #fff; }
.rv-cal-fhead { gap: 7px; padding: 10px; }
.rv-cal-fcap { display: flex; justify-content: space-between; font-size: 11.5px; line-height: 14px; color: #5b6178; }
/* the review's tally, folded: three to a row, their box ringed, a held band dashed */
.rv-cal-ftally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.rv-cal-ftbox { min-width: 0; height: 42px; padding: 4px 7px; display: flex; flex-direction: column; justify-content: center;
  gap: 1px; border: 1px solid #e4e7ef; border-radius: 7px; background: #fff; font: inherit; text-align: left; cursor: pointer;
  box-sizing: border-box; }
.rv-cal-ftbox .rv-dr-tcode { gap: 5px; font-size: 11px; line-height: 13px; }
.rv-cal-ftbox .rv-dr-tdot { width: 7px; height: 7px; }
.rv-cal-ftnum { font-size: 13.5px; line-height: 17px; font-weight: 700; color: #1f2330; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.rv-cal-ftpct { margin-left: 4px; font-size: 10.5px; font-weight: 500; color: #6b7186; }
.rv-cal-ftbox:hover:not(.is-here) { border-color: #c3c9db; }
.rv-cal-ftbox.is-here { border-color: var(--navy, #252A59); background: #eef3fd; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy, #252A59); }
.rv-cal-ftbox.is-held { border: 2px dashed var(--navy, #252A59); padding: 3px 6px; }
.rv-cal-ftbox:focus-visible { outline: 2px solid var(--navy, #252A59); outline-offset: 3px; }
.rv-cal-fnote { margin-top: 5px; font-size: 11px; line-height: 14px; color: #5b6178; }
.rv-cal-fnote[hidden] { display: block; visibility: hidden; }   /* its room kept: the list doesn't jump when a band is held */
/* the curve, folded: a bar per band against its expected share, their band ringed, where it's off in one line */
.rv-cal-fcurve { display: flex; flex-direction: column; gap: 2px; }
.rv-cal-fcrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; gap: 6px; align-items: center; padding: 3px 5px;
  border: 1px solid transparent; border-radius: 6px; }
.rv-cal-fcrow.is-here { border-color: var(--navy, #252A59); background: #eef3ff; }
.rv-cal-fccode { font-size: 11px; font-weight: 700; color: #2b3040; }
.rv-cal-fcbar { position: relative; height: 9px; border-radius: 999px; background: #eef0f5; }
.rv-cal-fctick { position: absolute; top: -3px; width: 2px; height: 15px; border-radius: 1px; background: #1f2330; }
.rv-cal-fcn { font-size: 12px; font-weight: 600; text-align: right; color: #1f2330; font-variant-numeric: tabular-nums; }
.rv-cal-fverdict { margin-top: 4px; font-size: 11.5px; line-height: 15px; font-weight: 600; }
.rv-cal-fverdict.is-off { color: #8a6500; }
.rv-cal-fverdict.is-ok { color: #1a7a54; }
/* ...and the others at their band, by score */
.rv-cal-fbox { gap: 7px; }
.rv-cal-fbox .rv-cal-pill { flex: none; }
.rv-cal-fcols { flex: none; display: flex; justify-content: space-between; padding: 0 10px 4px; font-size: 10.5px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a90a2; }
.rv-cal-frow { gap: 8px; padding: 7px 10px; }
.rv-cal-frow .rv-cal-fname { flex: 1 1 auto; min-width: 0; }
.rv-cal-fscore { flex: none; font-size: 12px; color: #2b3040; font-variant-numeric: tabular-nums; }
.rv-cal-fglyph { flex: none; width: 16px; text-align: center; font-size: 12.5px; color: #5f6678; }
.rv-cal-fglyph.is-bad { color: #1f2433; font-weight: 800; }
.rv-cal-sbody:not(.is-fixed) .rv-cal-flist { max-height: 300px; }
/* a narrow card: the column keeps the tally / curve / box and drops the list of names (the canvas's second call) */
@container (max-width: 760px) {
  .rv-fold { flex-basis: 172px; width: 172px; }
  .rv-sheet-layer { left: 172px; }
  .rv-fold :is(.rv-tbox-flist, .rv-cal-fcols, .rv-tbox-fbox) { display: none; }   /* the list and its heading go together */
  .rv-fold .rv-cal-ftally { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 'Not final' whole, not 'Not...' */
  .rv-fold .rv-tbox-mface { display: none; }   /* a 49px tile can't hold a 3-digit count and the initials: the ring marks it */
}
/* their page */
.rv-cal-pp { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; min-height: 0;
  border: 1px solid #e4e7ef; border-radius: 10px; background: #fff; overflow: hidden; }
.rv-cal-pphead { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px;
  border-bottom: 1px solid #eceef4; }
.rv-cal-ppwho { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rv-cal-ppname { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; color: #1f2330;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-cal-ppname:focus { outline: none; }
.rv-cal-ppsub { font-size: 12.5px; line-height: 17px; color: #4a5165; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-cal-pphead > .rv-cal-rating { flex: none; }
.rv-cal-pphead > .rv-cal-rating .rv-cal-k { white-space: nowrap; }
.rv-cal-people .rv-cal-pp > .rv-cal-person { flex: 1 1 auto; min-height: 0; margin-top: 0; padding: 12px 10px 14px 14px; }
/* the decision, pinned under their page: the BU CEO's band (it saves at once) or the HOD's review bar */
.rv-cal-pbar, .rv-dr-decide.rv-dr-bar { flex: none; margin: 0; border-top: 1px solid #e4e7ef; background: #fafbfd;
  padding: 9px 14px; }
.rv-cal-pbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.rv-cal-pbar-k, .rv-dr-bark { font-size: 13px; font-weight: 700; color: #1f2330; white-space: nowrap; }
select.rv-cal-pbsel { width: 230px; max-width: 100%; height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; line-height: 22px; }
.rv-cal-pbar-src { min-width: 0; font-size: 12.5px; color: #5b6178; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-cal-pbar-src.is-moved { color: #9a5a12; font-weight: 600; }
.rv-cal-pbar .rv-cal-pbar-st { margin-left: auto; font-size: 12.5px; }
.rv-cal-pbar .rv-cal-pbar-st:empty { display: none; }
.rv-dr-decide.rv-dr-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  row-gap: 6px; }
.rv-dr-bar > .rv-dr-barrow { grid-column: 1; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  min-width: 0; }
.rv-dr-bar > .rv-dr-barfoot { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; }
.rv-dr-bar > .rv-dr-barrm { grid-column: 1 / -1; grid-row: 2; display: none; margin: 0; }
.rv-dr-bar.is-open > .rv-dr-barrm { display: block; grid-column: 1; }
/* open: Save sits beside the remark box, at its foot -- no row of its own, so the page keeps its room */
.rv-dr-bar.is-open > .rv-dr-barfoot { grid-column: 2; grid-row: 2; align-self: end; }
.rv-dr-bar .rv-dr-perr { display: none; }   /* a refusal is said beside the band, the hint */
.rv-dr-bar > .rv-dr-barnote { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 18px; color: #4a5165;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-dr-barlab { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #4a5165; white-space: nowrap; }
.rv-dr-barrow select.rv-dr-band { width: 230px; max-width: 100%; height: 34px; padding-top: 5px; padding-bottom: 5px;
  font-size: 13.5px; line-height: 22px; }
.rv-dr-barrow .rv-rv-hint { margin: 0; }
.rv-dr-addrm { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px dashed #c3c8d6; background: #fff; color: var(--navy, #252A59); font: inherit; font-size: 12.5px;
  font-weight: 600; white-space: nowrap; cursor: pointer; }
.rv-dr-addrm .rv-ico { width: 14px; height: 14px; }
.rv-dr-addrm:hover { border-color: var(--navy, #252A59); }
.rv-dr-addrm[hidden] { display: none; }
.rv-dr-barrm .rv-mgr-remarks-h { display: none; }
.rv-dr-barrm textarea.rv-card-rm-input { min-height: 0; height: 66px; }
.rv-dr-barfoot .rv-dr-perr:empty { display: none; }
.rv-dr-savedok { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: #0f6e56; }
.rv-dr-savedok .rv-ico { width: 14px; height: 14px; }
/* back on the summary / the curve: "Last viewed" on the person just read, a flash once, a tick on the others opened */
.rv-calib-roster .rv-cal-psub.has-tag { display: flex; align-items: center; gap: 6px; }
.rv-calib-roster .rv-cal-psub.has-tag > .rv-cal-psubt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rv-calib-roster .rv-cal-psub.has-tag > .rv-tbox-lasttag { flex: none; padding-top: 0; padding-bottom: 0; }   /* 16px, the line's own height: the row stays 47px */
.rv-calib-roster .rv-cal-table tr.rv-cal-flash td { animation: rvTbFlash 1.8s ease-out 1; }
.rv-cal-opencell .rv-tbox-seen { margin-right: 6px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .rv-calib-roster .rv-cal-table tr.rv-cal-flash td { animation: none; } }

/* ---- THE AI LOOK, Level 2 (Chris, 2026-10-08: "For all AI related functions ... use our red tone ... And the chat
   enter button also change to red tone"; canvas "OneHR AI Visual Language"). Red WITH the spark is the AI; red
   without it is a problem (errors keep their own red and a cross). What the AI writes is never red, and committing
   buttons (Apply, Save, Lock, Save & submit) stay navy even inside an AI pop-out. ---------------------------------- */
.rv-ico-spark { display: inline-block; }
/* Send: the one solid red on a screen */
.rv-send { background: var(--ai); }
.rv-send:hover { background: var(--ai-ink); filter: none; }
.rv-send:focus-visible { box-shadow: 0 0 0 3px rgba(214, 25, 35, 0.28); }
/* every agent reply carries a small red AI mark (cards and folded lines don't) */
.rv-msg-agent:not(.rv-card) { position: relative; margin-left: 34px; }
.rv-msg-agent:not(.rv-card)::before { content: ""; position: absolute; left: -34px; top: 0; width: 26px; height: 26px;
  border-radius: 8px; background: var(--ai) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.5l2.3 6.2 6.2 2.3-6.2 2.3L12 19.5l-2.3-6.2L3.5 11l6.2-2.3z'/%3E%3C/svg%3E") center / 15px 15px no-repeat; }
/* a red capital kicker over an AI pop-out or menu */
.rv-ai-kicker { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ai-ink); margin-bottom: 4px; }
.rv-ai-kicker::before { content: ""; width: 11px; height: 11px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D61923' d='M12 2.5l2.3 6.2 6.2 2.3-6.2 2.3L12 19.5l-2.3-6.2L3.5 11l6.2-2.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rv-help-menu .rv-ai-kicker { padding: 6px 10px 4px; margin: 0; }
.rv-fit-modal .rv-ai-kicker { margin-bottom: 2px; }
/* Write with AI */
.rv-help-trigger { color: var(--ai-ink); font-weight: 600; }
.rv-help-trigger .rv-ico-spark { width: 13px; height: 13px; color: var(--ai); }
/* the AI insight buttons (the Team summary's column, the calibration rosters, the Talent Box): the spark in AI red */
.rv-rmk-btn { color: var(--ai); border-color: var(--ai-line); }
.rv-rmk-btn:hover, .rv-rmk-btn[aria-expanded="true"] { background: var(--ai-tint); border-color: #eba6ab;
  box-shadow: 0 1px 3px rgba(181, 20, 29, .12); }
.rv-rmk-btn:focus-visible { outline-color: var(--ai); }
.rv-rmk-btn .rv-ico-spark { width: 20px; height: 20px; }   /* the spark's points need the room to read as a spark */
.rv-rmk-th .rv-ico-spark { width: 13px; height: 13px; color: var(--ai); vertical-align: -2px; margin-right: 4px; }
/* the source tag of an AI read */
.rv-cal-src.rv-ai-src { display: inline-flex; align-items: center; gap: 4px; color: var(--ai-ink); font-weight: 600; }
.rv-ai-src .rv-ico-spark { width: 12px; height: 12px; color: var(--ai); }
/* an action that asks the AI to do work: a red outline with the spark */
.rv-ai-action, .rv-cal-fitbtn.rv-ai-action, .rv-confirm-yes.rv-ai-action { display: inline-flex; align-items: center;
  gap: 5px; background: #fff; color: var(--ai-ink); border: 1px solid var(--ai-line); }
.rv-ai-action:hover, .rv-cal-fitbtn.rv-ai-action:hover, .rv-confirm-yes.rv-ai-action:hover { background: var(--ai-tint);
  border-color: #eba6ab; }
.rv-ai-action:focus-visible, .rv-cal-fitbtn.rv-ai-action:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
.rv-ai-action .rv-ico-spark { width: 14px; height: 14px; color: var(--ai); }

/* ---- The dashboard as the cycle's journey (Chris, 2026-10-09: direction C on the "OneHR Personal Dashboard
   Directions" canvas, "go with C"). The cycle as one rail, then what needs you now beside where you stand, then your
   history and tools in one strip. Every button that opens an AI conversation is the AI red with the spark -- ONE solid
   red on the page (the first thing that needs you), the rest red outlines. A past cycle slides in from the right
   (.od-drawer, static/dashboard.js). */
.od { display: flex; flex-direction: column; gap: 10px; }
/* the dashboard reads on one screen at 1280x800: a shorter bottom margin than other pages */
.container:has(> .od) { margin-bottom: 12px; }
.od-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.od-head .welcome-id { margin: 0; }
.od-due { display: flex; align-items: center; gap: 12px; }
.od-due-txt { text-align: right; }
.od-due-txt .v { font-size: 0.92rem; font-weight: 700; color: var(--navy); }
.od-due-txt .s { font-size: 0.78rem; color: var(--muted); }
.od-ring { width: 46px; height: 46px; }
.od-ring .n { font-size: 0.9rem; }
.od-card { background: #fff; border: 1px solid var(--rl-line); border-radius: var(--rl-radius); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.od-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.od-hd h2 { margin: 0; font-size: 0.98rem; color: var(--navy); }
.od-muted { font-size: 0.78rem; color: var(--muted); }
.od-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--navy-600);
  cursor: pointer; }
.od-linkbtn:hover { color: var(--navy); text-decoration: underline; }
a.od-muted:hover { color: var(--navy); }
.od-kick { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ai-ink); }
.od-spark { width: 13px; height: 13px; fill: currentColor; flex: none; }
.od-h2 { margin: 2px 0 0; font-size: 1.3rem; line-height: 1.22; color: var(--navy); }
.od-sub { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; color: #3a4060; }
/* the AI buttons -- solid red is the first thing that needs you; the outline is everything else that opens an AI chat */
.od-btn-ai { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 8px;
  background: var(--ai); color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--ai); flex: none; }
.od-btn-ai .od-spark { width: 15px; height: 15px; }
.od-btn-ai:hover { background: var(--ai-ink); border-color: var(--ai-ink); color: #fff; text-decoration: none; }
.od-btn-ai:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(214, 25, 35, 0.28); }
.od-btn-ai.is-outline { background: #fff; color: var(--ai-ink); border-color: var(--ai-line); }
.od-btn-ai.is-outline:hover { background: var(--ai-tint); color: var(--ai-ink); }
.od-btn-ai.is-sm { min-height: 34px; padding: 0 12px; font-size: 0.82rem; }
.od-ico { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; flex: none; margin-top: 1px; }
/* the cycle, as one rail: a node and a link per step, its who / name / where it stands under it */
.od-rail { gap: 10px; padding: 12px 16px 12px; }
.od-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); }
/* a short rail (three steps or fewer) keeps its steps a readable width instead of stretching across the card */
.od-steps:not(:has(> :nth-child(4))) { grid-auto-columns: minmax(0, 240px); }
.od-step { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 12px; }
.od-step:last-child { padding-right: 0; }
.od-track { display: flex; align-items: center; margin-bottom: 5px; }
.od-node { width: 28px; height: 28px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid #c9cedc;
  background: #fff; color: #6b7186; display: inline-flex; align-items: center; justify-content: center; }
.od-node svg { width: 15px; height: 15px; }
.od-node .ln { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.od-node .fl { fill: currentColor; }
.od-link { flex: 1; height: 3px; margin-left: 8px; border-radius: 2px; background: #e1e4ee; }
.od-step.is-done .od-node { background: #2f8f62; border-color: #2f8f62; color: #fff; }
.od-step.is-done .od-link { background: #2f8f62; }
.od-step.is-turn .od-node { background: var(--ai); border-color: var(--ai); color: #fff; box-shadow: 0 0 0 4px var(--ai-tint); }
.od-step.is-open .od-node { border-color: var(--navy); }
.od-step.is-locked .od-node, .od-step.is-closed .od-node { background: #f4f5f9; color: #8a90a2; }
.od-who { margin: 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-step.is-turn .od-who { color: var(--ai-ink); }
.od-sn { font-size: 0.88rem; font-weight: 700; line-height: 1.25; color: var(--navy); }
a.od-sn { text-decoration: none; }
a.od-sn:hover { text-decoration: underline; }
.od-step.is-locked .od-sn, .od-step.is-later .od-sn, .od-step.is-closed .od-sn { color: #4b5164; }
.od-sl { margin: 0; font-size: 0.76rem; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.od-sl .w { font-weight: 700; }
.od-step.is-done .od-sl .w { color: #2f7a4f; }
.od-step.is-turn .od-sl, .od-step.is-turn .od-sl .w { color: var(--ai-ink); }
/* in progress (calibration running, or results with a leader before their people): a navy ring with a dot */
.od-step.is-progress .od-node, .od-step.is-here:not(.is-turn):not(.is-done) .od-node { border: 3px solid var(--navy); color: var(--navy); }
.od-step.is-here:not(.is-turn):not(.is-done) .od-sn { color: var(--navy); }
.od-step.is-progress .od-node svg { width: 11px; height: 11px; }
.od-step.is-progress .od-sl .w { color: var(--navy); }
/* the step you're on glows (Chris, 2026-10-14): a soft halo that stays, and a ring that ripples out and fades. Navy
   where the cycle is (a stage in progress), AI red when it's your turn. The ripple is a pseudo-element animating only
   transform + opacity, so it never repaints the rail. It pulses for as long as the page is open (Chris, 2026-10-14:
   "it should be constantly glowing" -- it had stopped after two pulses for WCAG 2.2.2); with reduced motion it never
   plays and only the still halo stays. */
.od-step.is-here .od-node { position: relative; --od-glow: 37, 42, 89;
  box-shadow: 0 0 0 4px rgba(var(--od-glow), 0.12), 0 0 14px 3px rgba(var(--od-glow), 0.30); }
.od-step.is-here.is-turn .od-node { --od-glow: 214, 25, 35; }
.od-step.is-here .od-node::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(var(--od-glow), 0.55); pointer-events: none; opacity: 0; animation: odHereRipple 2.4s ease-out infinite; }
@keyframes odHereRipple { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .od-step.is-here .od-node::after { animation: none; opacity: 0; } }
.od-step-act { align-self: flex-start; margin-top: 4px; min-height: 30px; padding: 0 11px; border: 1px solid var(--navy);
  border-radius: 8px; background: var(--navy); color: #fff; font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.od-step-act:hover { background: #1b1f45; }
/* what needs you now, beside where you stand */
/* ONE grid for every card (Chris, 2026-10-13, the "OneHR Dashboard Alignment and Pending Designs" canvas): 13 columns,
   a two-card row 8 | 5, so each card edge sits on the same line down the page; .is-flip leads with the narrow card
   (5 | 8: a BG CEO's business units and tools between cycles) */
.od-grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.od-grid > * { grid-column: span 8; min-width: 0; }
.od-grid > * + * { grid-column: span 5; }
.od-grid > :only-child { grid-column: 1 / -1; }
.od-grid.is-flip > * + * { order: -1; }
.od-here-hd { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.od-here-hd .od-h2 { margin: 0; font-size: 1.15rem; }
.od-acts { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.od-act { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--rl-line);
  border-radius: 10px; background: #fff; }
.od-act.is-first { background: var(--ai-tint); border-color: var(--ai-line); }
.od-at { flex: 1 1 240px; min-width: 0; }
.od-atag { margin: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ai-ink); }
.od-att { margin: 1px 0 0; font-size: 0.96rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
/* every action button the same width, its label centred (Chris, 2026-10-10: "the action button should have consistent
   width") -- wide enough for the longest, "See your AI check-in summary" (272px on macOS), with room for a wider font */
.od-act .od-btn-ai { min-height: 38px; flex: 0 0 280px; justify-content: center; box-sizing: border-box; }
/* the check-in summary under them is the same button, its right edge in line with theirs: a card's 1px border + 12px
   padding, less the line's own 2px (Chris, 2026-10-11: "your AI check-in summary box width should match with review
   with AI") */
.od-ln .od-btn-ai { min-height: 38px; flex: 0 0 280px; justify-content: center; box-sizing: border-box; margin-right: 11px; }
.od-ats { margin: 2px 0 0; font-size: 0.8rem; color: #4b5164; }
.od-lines { display: flex; flex-direction: column; border-top: 1px solid var(--rl-line-soft); }
.od-ln { margin: 0; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 7px 2px; font-size: 0.84rem;
  color: #4b5164; border-bottom: 1px solid var(--rl-line-soft); }
.od-ln:last-child { border-bottom: 0; }
.od-ln > span { flex: 1 1 200px; min-width: 0; }
.od-ln b { font-weight: 700; color: var(--ink); }
.od-ln .od-ico { width: 16px; height: 16px; margin: 0; }
.od-ln.is-wait .od-ico { color: #6b7186; }
.od-ln.is-done .od-ico { color: #2f8f62; }
.od-list { margin: 0; display: flex; flex-direction: column; }
.od-li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--rl-line-soft); }
.od-li:last-child { border-bottom: 0; }
.od-li dt { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.od-li .v { margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; text-align: right;
  font-size: 0.9rem; font-weight: 700; color: var(--navy); }
.od-li .v.is-pending { color: #3a4060; font-weight: 600; }
.od-li .n { margin: 0; grid-column: 1 / -1; font-size: 0.74rem; color: var(--muted); }
.od-li.is-stack { grid-template-columns: minmax(0, 1fr); }
.od-li.is-stack .v { justify-content: flex-start; text-align: left; }
/* your history and your tools, in one strip */
/* history and tools are two cards on the grid (2026-10-13), no longer one strip */
.od-hist, .od-tools { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.od-trend { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--rl-line); background: #fafbfd;
  border-radius: 10px; padding: 8px 11px; font-size: 0.82rem; line-height: 1.45; color: var(--ink); }
.od-trend[hidden], .od-drawer[hidden], .od-scrim[hidden] { display: none; }
.od-trend-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding-top: 1px; font-size: 0.66rem;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.od-trend-tag .od-spark { width: 11px; height: 11px; }
.od-trend-tag.is-ai { color: var(--ai-ink); }
.od-trend:has(.od-trend-tag.is-ai) { background: var(--ai-tint); border-color: var(--ai-line); }
.od-rows { display: flex; flex-direction: column; gap: 6px; }
.od-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 92px 64px minmax(0, 1fr) 16px; align-items: center;
  gap: 10px; width: 100%; padding: 7px 12px; border: 1px solid var(--rl-line); border-radius: 10px; background: #fff;
  font: inherit; text-align: left; cursor: pointer; color: inherit; }
.od-row:hover { border-color: #c3c8d6; background: #fbfcfe; }
.od-row:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 42, 89, 0.22); }
.od-row.is-open { border-color: var(--navy); background: #eef0fb; }
.od-row .cy { font-weight: 700; font-size: 0.86rem; color: var(--navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-row .cy small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.od-row .potential-pill, .od-row .tcat-pill { white-space: nowrap; }
.od-row .chev { color: #9aa0b4; font-size: 1.15rem; text-align: right; }
.od-dash { color: #9aa0b4; font-size: 0.8rem; }
.od-tg { margin-right: 2px; }
.od-foot { margin: 0; }
.od-lms { margin: 0; font-size: 0.76rem; color: #6b7186; }
/* the record panel: a past cycle slides in from the right */
.od-scrim { position: fixed; inset: 0; background: rgba(20, 24, 52, 0.38); z-index: 900; opacity: 0; transition: opacity 0.2s; }
.od-scrim.is-on { opacity: 1; }
.od-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(562px, 100vw); background: #fff; z-index: 901;
  box-shadow: -18px 0 40px -18px rgba(20, 24, 52, 0.5); display: flex; flex-direction: row;
  transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); }
.od-drawer.is-on { transform: none; }
.od-drawer:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .od-drawer, .od-scrim { transition: none; } }
.od-dh { padding: 16px 20px 12px; border-bottom: 1px solid var(--rl-line-soft); display: flex; align-items: flex-start; gap: 10px; }
.od-dr-title { margin: 0; font-size: 1.2rem; color: var(--navy); }
.od-dr-sub { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); }
.od-dnav { margin-left: auto; display: flex; gap: 6px; }
.od-ib { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--rl-line); background: #fff; color: #3a4060;
  font-size: 1.1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.od-ib:hover:not([disabled]) { background: #f3f4fa; }
.od-ib[disabled] { opacity: 0.35; cursor: default; }
.od-ib[hidden] { display: none; }
.od-ibw { width: auto; padding: 0 10px; gap: 4px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
/* the panel's content beside its close bezel */
.od-sheet { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* the close bezel: a thin strip down the panel's left edge with a chevron pointing the way it slides */
.od-bezel { flex: 0 0 22px; width: 22px; align-self: stretch; margin: 0; padding: 0; border: 0;
  border-right: 1px solid #dde1ea; background: #e8ebf3; color: #5b6275; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: none; border-radius: 0;
  transition: background 0.15s, color 0.15s; }
.od-bezel svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.15s; }
.od-bezel:hover { background: #d9e0f3; color: var(--navy); }
.od-bezel:hover svg { transform: translateX(2px); }
.od-bezel:active { background: #cdd5ec; }
.od-bezel:focus { outline: none; }
.od-bezel:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.od-scrim.is-on:hover ~ .od-drawer .od-bezel { background: #d9e0f3; color: var(--navy); }
.od-db { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; overflow: auto; flex: 1; }
.od-ai { border: 1px solid var(--ai-line); background: var(--ai-tint); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; }
.od-ai.is-plain { border-color: var(--rl-line); background: #fafbfd; }
.od-ai .od-kick.is-plain { color: var(--muted); }
.od-ai .t { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink); }
.od-ai .t.is-wait { color: var(--muted); }
.od-ai .f { margin: 0; font-size: 0.72rem; color: #8a5a5e; }
.od-ai.is-plain .f { color: var(--muted); }
.od-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.od-g { border: 1px solid var(--rl-line); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.od-g .k { margin: 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.od-g .v { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.od-g .n { margin: 0; font-size: 0.72rem; color: var(--muted); }
.od-sec h3 { margin: 0 0 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.od-kt { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.od-kt th { text-align: left; font-size: 0.7rem; color: var(--muted); font-weight: 700; padding: 0 0 5px; }
.od-kt td { padding: 7px 0; border-top: 1px solid var(--rl-line-soft); vertical-align: top; }
.od-kt .r { text-align: right; }
.od-kt .sub { display: block; font-size: 0.72rem; color: var(--muted); }
.od-pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.od-pchip { font-size: 0.78rem; border-radius: 20px; padding: 3px 10px; background: #eef1f7; color: #2e3566; font-weight: 600; }
.od-pchip.is-grow { background: #fdf0e2; color: #9a5a12; }
.od-goals { margin: 0; padding: 0 0 0 18px; font-size: 0.86rem; line-height: 1.6; }
.od-quote { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #3a4060; border-left: 3px solid var(--rl-line); padding-left: 10px; }
.od-dlinks { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--rl-line-soft); }
.od-dlinks:empty { display: none; }
.od-lk { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #d7dbe6;
  border-radius: 8px; font-size: 0.82rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.od-lk:hover { background: #f3f4fa; text-decoration: none; }
/* This cycle in detail: Summary · KPI · 360 · Competency · Career Plan (the canvas's row C, 2026-10-11). The tab bar
   stays at the top of the panel as it scrolls; Summary opens first, the AI read leading it. */
.od-tabs { position: sticky; top: -1px; z-index: 2; display: flex; gap: 2px; padding: 3px; margin: 0 0 12px;
  background: #f1f2f7; border-radius: 9px; box-shadow: 0 6px 10px -8px rgba(20,24,52,.25); }
.od-tab { flex: 1 1 0; min-width: 0; border: 0; border-radius: 7px; padding: 7px 4px; background: transparent; font: inherit;
  font-size: 0.8rem; font-weight: 600; color: #5f6678; cursor: pointer; white-space: nowrap; }
.od-tab:hover { color: var(--navy); }
.od-tab[aria-selected="true"] { background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 1px 3px rgba(20,24,52,.12); }
.od-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.od-pane { display: flex; flex-direction: column; gap: 12px; }
.od-pane[hidden] { display: none; }
.od-ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.od-ptile { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; padding: 10px 12px; border: 1px solid var(--rl-line);
  border-radius: 10px; background: #fff; font: inherit; color: var(--ink); cursor: pointer; }
.od-ptile:hover { border-color: #c3c8d6; background: #fbfcfe; }
.od-ptile .k { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #8a90a2; }
.od-ptile b { font-size: 0.9rem; color: var(--navy); }
.od-ptile.is-ok b { color: #1a7a54; }
.od-ptile.is-wait b { color: #8a5a00; }
.od-ptile.is-none b { color: #8a90a2; }
.od-ptile .l { font-size: 0.76rem; color: #5f6678; }
.od-ptile .go { margin-top: 2px; font-size: 0.74rem; font-weight: 700; color: #2e3566; }
.od-empty { margin: 0 0 10px; font-size: 0.86rem; line-height: 1.55; color: #3a4060; }
.od-todo { margin: 0; padding: 0 0 0 18px; font-size: 0.86rem; line-height: 1.7; }
.od-err { margin: 0; font-size: 0.86rem; color: var(--muted); }
/* the tools: two cards that open their panels (2026-10-09, the canvas "OneHR Tools Slide-out Panels") */
.od-tcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 1px solid var(--rl-line);
  border-radius: 10px; background: #fff; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.od-tcard:hover { border-color: #c3c8d6; background: #fbfcfe; }
.od-tcard:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 42, 89, 0.22); }
.od-tc-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #eef1fa; display: flex; align-items: center;
  justify-content: center; }
.od-tc-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--navy); stroke-width: 1.9; stroke-linecap: round;
  stroke-linejoin: round; }
.od-tc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.od-tc-txt b { font-size: 0.88rem; color: var(--navy); }
.od-tc-txt .l1 { font-size: 0.78rem; color: #4b5164; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-tc-txt .l2 { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-tc-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: #8a90a2; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
/* the panel's header: the title block, its year / cycle picker, and a way back */
.od-dt { flex: 1; min-width: 0; }
.od-pick { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.od-pick[hidden] { display: none; }
.od-pick .lab { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin-right: 2px; }
/* the year / cycle dropdown (2026-10-10): one button with the pick and its tag, a menu grouped by year, and the 360's
   newer / older arrows beside it */
.od-dd { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; max-width: 380px; }
.od-dd-box { position: relative; flex: 1 1 auto; min-width: 0; }
.od-dd-btn { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px; border: 1px solid var(--navy); border-radius: 8px; background: #fff; font: inherit; cursor: pointer;
  color: var(--navy); }
.od-dd-btn .v { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-dd-btn .tw { display: flex; align-items: center; gap: 8px; flex: none; }
.od-dd-btn .t { font-size: 0.76rem; color: var(--muted); }
.od-dd-btn svg { width: 14px; height: 14px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; }
.od-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.od-dd-btn:focus-visible, .od-dd-o:focus-visible, .od-dd-step:focus-visible { outline: none;
  box-shadow: 0 0 0 3px rgba(37, 42, 89, 0.22); }
.od-dd-step { flex: none; width: 34px; height: 38px; border: 1px solid #d7dbe6; border-radius: 8px; background: #fff;
  color: var(--navy); font: inherit; font-size: 1rem; cursor: pointer; }
.od-dd-step:disabled { color: #b9bfcf; cursor: default; }
.od-dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; background: #fff;
  border: 1px solid #d7dbe6; border-radius: 10px; box-shadow: 0 14px 34px -12px rgba(20, 24, 52, 0.35); padding: 6px;
  max-height: 340px; overflow-y: auto; }
.od-dd-menu[hidden] { display: none; }
.od-dd-g { margin: 0; padding: 6px 8px 2px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }
.od-dd-o { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 10px; border: 0; border-radius: 7px; background: #fff; font: inherit; text-align: left; cursor: pointer;
  color: var(--navy); }
.od-dd-o .v { font-size: 0.88rem; font-weight: 600; }
.od-dd-o .t { font-size: 0.76rem; color: var(--muted); }
.od-dd-o:hover { background: #f4f5f9; }
.od-dd-o.is-on { background: var(--navy); color: #fff; }
.od-dd-o.is-on .t { color: #c9cde3; }
.od-ib[data-od-back] { width: auto; padding: 0 10px; font-size: 0.8rem; font-weight: 600; color: var(--navy); }
/* the full record's list */
.od-lhead { display: grid; grid-template-columns: minmax(0, 1.4fr) 92px 64px minmax(0, 1fr) 16px; gap: 10px; padding: 0 12px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.od-note { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
/* ...by year (2026-10-14, board A of "OneHR Full Record by Year"): a card per year, its Year-End result on the header;
   open, its Year-End ("Final", a filled dot) and Mid-Year ("Checkpoint", a hollow one) rows. Same columns as the
   header line above. */
.od-years { display: flex; flex-direction: column; gap: 8px; }
.od-yg { border: 1px solid var(--rl-line); border-radius: 10px; background: #fff; overflow: hidden; }
.od-yg.is-open { border-color: var(--navy); }
.od-yr, .od-crow { display: grid; grid-template-columns: minmax(0, 1.4fr) 92px 64px minmax(0, 1fr) 16px; align-items: center;
  gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; font: inherit; text-align: left; color: inherit; }
.od-yr { cursor: pointer; }
.od-yr:hover { background: #fbfcfe; }
.od-yr:focus-visible, .od-crow:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(37, 42, 89, 0.22); }
.od-yr .cy { font-weight: 800; font-size: 0.95rem; color: var(--navy); min-width: 0; }
.od-yr .cy small { display: block; font-weight: 400; font-size: 0.72rem; line-height: 1.35; color: var(--muted); }
.od-yr .potential-pill, .od-yr .tcat-pill, .od-crow .potential-pill, .od-crow .tcat-pill { white-space: nowrap; }
.od-ychev { width: 16px; height: 16px; fill: none; stroke: #8a90a2; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; justify-self: end; transition: transform 0.18s; }
.od-yr[aria-expanded="true"] .od-ychev { transform: rotate(180deg); }
.od-yck { grid-column: 2 / 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.od-ychip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--navy);
  color: #fff; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.od-ychip i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.od-ycp { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.od-ycp i, .od-cdot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #8a90a2; box-sizing: border-box;
  display: inline-block; flex: none; }
.od-yc { border-top: 1px solid var(--rl-line-soft); }
.od-crow { padding: 8px 12px 8px 14px; background: #f8f9fc; border-top: 1px solid var(--rl-line-soft); cursor: pointer; }
.od-crow:first-child { border-top: 0; }
.od-crow:hover { background: #f1f3f9; }
.od-crow.is-last { background: #eef0fb; box-shadow: inset 3px 0 0 var(--navy); }
.od-crow .cy { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.od-crow .cy .od-cdot { margin-top: 5px; }
.od-crow.is-final .od-cdot { background: var(--navy); border-color: var(--navy); }
.od-ck { display: flex; flex-direction: column; min-width: 0; }
.od-ck b { font-size: 0.84rem; color: var(--navy); }
.od-ck small { font-size: 0.7rem; line-height: 1.35; color: var(--muted); }
.od-ck .od-ctag { font-weight: 700; color: #8a90a2; }
.od-crow.is-final .od-ctag { color: var(--navy); }
.od-crow .chev { color: #9aa0b4; font-size: 1.15rem; text-align: right; }
.od-crow.is-wait { cursor: default; }
.od-crow.is-wait:hover { background: #f8f9fc; }
.od-cnote { grid-column: 2 / 6; font-size: 0.76rem; color: var(--muted); }
.od-yfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.od-yfoot .od-linkbtn { margin-left: auto; }
/* the Career Plan */
.od-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ai-line);
  background: var(--ai-tint); border-radius: 10px; }
.od-banner p { flex: 1; margin: 0; font-size: 0.82rem; line-height: 1.45; color: #3a4060; }
.od-dl { margin: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 12px; font-size: 0.86rem; }
.od-dl dt { color: var(--muted); }
.od-dl dd { margin: 0; color: var(--ink); font-weight: 600; }
.od-dl dd.is-none { color: #8a90a2; font-weight: 400; }
.od-acts7 { margin: 6px 0 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 8px; font-size: 0.82rem;
  line-height: 1.45; }
.od-acts7 dt { font-weight: 800; color: #3a4060; }
.od-acts7 dd { margin: 0; color: var(--ink); }
.od-acts7 dd b { font-weight: 600; color: #3a4060; }
/* the 360 report */
.od-empty { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 24px; }
.od-empty b { font-size: 1rem; color: var(--navy); }
.od-empty p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: #4b5164; }
.od-bandrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--rl-line);
  border-radius: 10px; background: #fafbfd; }
.od-bandrow .k { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.od-bandrow .n { font-size: 0.78rem; color: var(--muted); }
.od-prin { padding: 8px 0 10px; border-bottom: 1px solid var(--rl-line-soft); display: flex; flex-direction: column; gap: 6px; }
.od-prin:last-child { border-bottom: 0; }
.od-prin-h { display: grid; grid-template-columns: minmax(0, 1fr) 92px 112px; align-items: center; gap: 10px; }
.od-prin-h .nm { min-width: 0; display: flex; flex-direction: column; }
.od-prin-h .nm b { font-size: 0.86rem; color: var(--navy); }
.od-prin-h .nm small { font-size: 0.72rem; color: var(--muted); }
.od-prin-h .w { font-size: 0.8rem; color: #4b5164; text-align: right; }
.od-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.od-meter i { height: 7px; border-radius: 2px; background: #e1e4ee; }
.od-meter i.on { background: var(--navy); }
.od-beh { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.od-beh li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.78rem; line-height: 1.4; color: #3a4060; }
.od-beh .tx { min-width: 0; }
.od-beh em { margin-left: 6px; font-style: normal; font-size: 0.68rem; font-weight: 700; color: #6b7186; background: #eef0f5;
  border-radius: 999px; padding: 0 6px; }
.od-beh .w { flex: none; color: var(--muted); }
button.od-lk { background: #fff; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
/* the Career Plan's check-ins (2026-10-10): where each goal is, a check-in form, and the dated history */
.od-ghd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
div.od-goal-h { align-items: center; }
div.od-goal-h .a { flex: 1; min-width: 0; }
.od-gst { flex: none; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; color: #3a4060;
  background: #eef0f5; }
.od-gst.is-in_progress { color: #1b46b3; background: #e0e9fb; }
.od-gst.is-done { color: #1a6b46; background: #d7f0e0; }
.od-gst.is-dropped { color: #6b7186; background: #eef0f5; text-decoration: line-through; }
.od-ck-btn { flex: none; min-height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid #c3c8d6; background: #fff;
  color: var(--navy); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.od-ck-btn:hover { border-color: var(--navy); }
.od-ck-btn[hidden] { display: none; }
.od-ckf { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rl-line-soft); display: flex; flex-direction: column;
  gap: 8px; }
.od-ckf fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.od-ckf legend { padding: 0; margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; color: #3a4060; }
.od-ck-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px;
  border: 1px solid #d7dbe6; font-size: 0.8rem; font-weight: 600; color: #3a4060; cursor: pointer; }
.od-ck-opt:has(input:checked) { border-color: var(--navy); background: #eef1fa; color: var(--navy); }
.od-ck-opt input { margin: 0; accent-color: var(--navy); }
.od-ck-note { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 700; color: #3a4060; }
.od-ck-note textarea { font: inherit; font-size: 0.84rem; font-weight: 400; padding: 8px 10px; border: 1px solid #c3c8d6;
  border-radius: 8px; resize: vertical; min-height: 54px; }
.od-ck-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.od-ck-cancel { min-height: 34px; padding: 0 10px; border: 0; background: none; font: inherit; font-size: 0.82rem;
  font-weight: 600; color: var(--navy); cursor: pointer; }
.od-ckf .od-err[hidden] { display: none; }
.od-ckf .od-err { color: #a02323; }
.od-cklog { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rl-line-soft); }
.od-cklog ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.od-cklog li { display: grid; grid-template-columns: 82px 78px minmax(0, 1fr); gap: 8px; font-size: 0.76rem; line-height: 1.4; }
.od-cklog li[hidden] { display: none; }
.od-cklog .d { color: var(--muted); }
.od-cklog b { font-weight: 700; color: #3a4060; }
.od-cklog .n { color: #4b5164; }
.od-ck-none { margin: 0; font-size: 0.76rem; color: #8a90a2; }
.od-ck-more { margin-top: 4px; border: 0; background: none; padding: 0; font: inherit; font-size: 0.76rem; font-weight: 700;
  color: var(--navy); text-decoration: underline; cursor: pointer; }
/* navy buttons: what opens the record, a panel or a check-in -- never the AI red, which says "AI conversation" */
.od-btn-nv { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: inherit; font-size: 0.86rem;
  font-weight: 700; cursor: pointer; white-space: nowrap; }
.od-btn-nv:hover { background: var(--navy-700); border-color: var(--navy-700); }
.od-btn-nv.is-outline { background: #fff; color: var(--navy); border-color: #c3c8d6; }
.od-btn-nv.is-outline:hover { border-color: var(--navy); background: #fff; }
.od-btn-nv.is-sm { min-height: 34px; padding: 0 12px; font-size: 0.82rem; }
.od-btn-nv:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 42, 89, 0.22); }
.od-btn-nv:disabled { opacity: 0.6; cursor: default; }
/* between cycles (2026-10-10, the "OneHR Dashboard States" canvas): the last cycle's journey with its dates, its
   results with the AI read, this year's plan -- or what a leader led */
.od-complete { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: #2f7a4f; }
.od-complete i { width: 8px; height: 8px; border-radius: 50%; background: #2f8f62; }
.od-complete.is-part { color: var(--muted); }
.od-complete.is-part i { background: #9aa0b4; }
.od-snb { border: 0; background: none; padding: 0; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--navy);
  text-align: left; cursor: pointer; }
.od-snb:hover { text-decoration: underline; }
.od-res, .od-led, .od-planc { display: flex; flex-direction: column; gap: 9px; }
.od-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.od-tile { border: 1px solid var(--rl-line); border-radius: 10px; padding: 7px 12px; min-width: 0; }
.od-tile .k { margin: 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #3a4060; }
.od-tile .v { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.84rem; }
.od-tile .v.is-none { color: #8a90a2; }
.od-snap { background: #fdf6f6; border: 1px solid #f2d5d6; border-radius: 10px; padding: 8px 12px; }
.od-snap-k { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: #3a4060; }
.od-snap-k.is-ai { color: var(--ai-ink); }
.od-snap-k .od-spark { width: 12px; height: 12px; }
.od-snap-t { margin: 3px 0 0; font-size: 0.84rem; line-height: 1.5; color: #3a4060; }
.od-res-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* its two buttons the same width, side by side or stacked (2026-10-11, with the What needs you buttons) */
.od-res-acts .od-btn-nv { flex: 0 0 212px; box-sizing: border-box; }
.od-pstrip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px;
  border: 1px solid var(--rl-line); border-radius: 10px; font-size: 0.82rem; color: var(--muted); }
.od-pstrip b { color: var(--navy); }
.od-ledl { margin: 0; display: flex; flex-direction: column; }
.od-ledl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rl-line-soft);
  font-size: 0.84rem; }
.od-ledl dt { color: #4b5164; }
.od-ledl dd { margin: 0; font-weight: 700; color: var(--navy); white-space: nowrap; }
.od-tk { margin: 2px 0 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #3a4060; }
.od-tally { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.od-tb { border: 1px solid var(--rl-line); border-radius: 8px; padding: 5px 6px; text-align: center; display: flex;
  flex-direction: column; }
.od-tb .k { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 0.72rem; font-weight: 800;
  color: #3a4060; }
.od-tb .k i { display: inline-block; width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; font-size: 0; }
.od-tb b { font-size: 1rem; color: var(--navy); }
.od-tb .p { font-size: 0.7rem; color: var(--muted); }
.od-pgoals { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.od-pgoals li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px;
  border: 1px solid var(--rl-line); border-radius: 10px; }
.od-pgoals .t { min-width: 0; display: flex; flex-direction: column; }
.od-pgoals .t b { font-size: 0.88rem; color: var(--navy); }
.od-pgoals .t span { font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-pnote { margin: 0; font-size: 0.78rem; }
.od-planc > .od-btn-nv { align-self: flex-start; }
/* a BU CEO's Where your BU is (2026-10-10): each axis ready to lock or not, then each department's reviews */
.od-bu { display: flex; flex-direction: column; gap: 8px; }
.od-bu-axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* a BU CEO of several units: one pill each, the one on screen lit (admin round 4) */
.od-bu-units { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px 0 8px; }
.od-bu-units::-webkit-scrollbar { display: none; }
.od-bu-unit { flex: 0 1 auto; min-width: 0; display: flex; gap: 4px; align-items: baseline; padding: 3px 10px;
  border: 1px solid #d6dae5; border-radius: 999px; background: #fff; color: #1f2433; text-decoration: none;
  font-size: 12px; line-height: 1.4; white-space: nowrap; }
.od-bu-unit b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.od-bu-unit span { flex: none; color: #5b6275; }
.od-bu.has-units .od-bu-body { max-height: 102px; }
.od-bu-unit.is-locked span { color: #1a7a54; }
.od-bu-unit:hover { border-color: #9aa3b8; text-decoration: none; }
.od-bu-unit.is-on { border-color: #1b2a5c; box-shadow: inset 0 0 0 1px #1b2a5c; background: #f3f5fb; }
.od-bu-ax { border: 1px solid var(--rl-line); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.od-bu-ax .k { margin: 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #3a4060; }
.od-bu-ax .l { margin: 3px 0 0; font-size: 0.74rem; line-height: 1.35; color: var(--muted); }
.od-bu-st { display: inline-block; margin-top: 3px; font-size: 0.74rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.od-bu-st.is-ready { color: #1a6b46; background: #d7f0e0; }
.od-bu-st.is-waiting { color: #8a4a12; background: #fbeedd; }
.od-bu-st.is-locked { color: #fff; background: var(--navy); }
.od-bu-tbl { display: flex; flex-direction: column; border: 1px solid var(--rl-line-soft); border-radius: 8px; min-height: 0; }
.od-bu-tbl .od-bu-r { padding: 4px 8px; }
.od-bu-tbl .od-bu-r.is-h { background: #fafbfd; border-bottom: 1px solid var(--rl-line-soft); border-radius: 8px 8px 0 0; }
.od-bu-body { max-height: 128px; overflow-y: auto; }
.od-bu-body:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(37, 42, 89, 0.22); }
.od-bu-body .od-bu-r:first-child { border-top: 0; }
.od-bu-r > span { white-space: nowrap; }
.od-bu-r { display: grid; grid-template-columns: minmax(0, 1fr) 104px 104px; gap: 8px; align-items: center; padding: 4px 2px;
  border-top: 1px solid var(--rl-line-soft); font-size: 0.78rem; }
.od-bu-r.is-h { border-top: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #3a4060; }
.od-bu-r .n { font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-bu-r .is-in { color: #2f7a4f; }
.od-bu-r .is-wait { color: #8a4a12; }
/* a BG CEO's Where the group is (canvas board K): each business unit, the list scrolling inside the card */
.od-bg-r { grid-template-columns: minmax(0, 1fr) 112px; }
.od-bg-r .t { min-width: 0; display: flex; flex-direction: column; }
.od-bg-r .t b { font-size: 0.82rem; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-bg-r .t span { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-bg-body { max-height: 168px; }
/* not in this cycle's own review, but asked to act (boards L-N) */
.od-notin { display: flex; flex-direction: column; gap: 8px; }
.od-ni-why { margin: 0; font-size: 0.84rem; line-height: 1.5; color: #3a4060; }
.od-ni-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.od-ni-st > div { border: 1px solid var(--rl-line); border-radius: 8px; padding: 5px 8px; display: flex; flex-direction: column; }
.od-ni-st > div.is-turn { border-color: var(--ai-line); background: var(--ai-tint); }
.od-ni-st b { font-size: 1rem; color: var(--navy); }
.od-ni-st .is-turn b { color: var(--ai-ink); }
.od-ni-st span { font-size: 0.72rem; color: var(--muted); }
.od-ni-foot { margin: 0; font-size: 0.76rem; line-height: 1.45; }
/* a BU CEO's What you led: tiles, then performance and potential each on its own row (board H) */
.od-ledt { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.od-ledt > div { border: 1px solid var(--rl-line); border-radius: 9px; padding: 6px 9px; display: flex; flex-direction: column; min-width: 0; }
.od-ledt .k { font-size: 0.72rem; color: var(--muted); }
.od-ledt b { font-size: 0.86rem; color: var(--navy); }
/* a BG CEO's record: business units first, each opening its Talent Box (board I) */
/* the Talent Box and the business units: two cards, the units' foot (See your people, or what is released to a BU
   CEO) on the same line as the box's four talent status totals (2026-10-13) */
.od-boxg, .od-boxu { display: flex; flex-direction: column; gap: 8px; }
.od-box-g { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.od-box-g[hidden] { display: none; }
.od-box-cats { margin-top: auto; }
.od-box-foot { margin-top: auto; width: 100%; height: 54px; box-sizing: border-box; }
.od-box-sum { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--rl-line);
  border-radius: 8px; padding: 6px 12px; }
.od-box-sum .k { font-size: 0.68rem; font-weight: 700; color: #3a4060; }
.od-box-sum b { font-size: 0.92rem; color: var(--navy); }
.od-box-units { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; }
.od-box-u { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 10px; border: 1px solid var(--rl-line); border-radius: 9px; background: #fff; font: inherit; text-align: left;
  cursor: pointer; }
.od-box-u:hover { border-color: #c3c8d6; }
.od-box-u:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 42, 89, 0.22); }
.od-box-u .t { min-width: 0; display: flex; flex-direction: column; }
.od-box-u .t b { font-size: 0.84rem; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-box-u .t span { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-box-u .c { flex: none; display: flex; gap: 5px; }
.od-box-u .c span { font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.od-box-u .ss { background: #faf3e2; color: #7a5d12; }
.od-box-u .pip { background: #fbeceb; color: #8f3630; }
.od-box-u.is-on { background: var(--navy); border-color: var(--navy); }
.od-box-u.is-on .t b { color: #fff; }
.od-box-u.is-on .t span { color: #c9cde3; }
.od-box-u.is-on .c span { background: #ffffff26; color: #fff; }
.od-box-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.od-box-cats > div { height: 54px; box-sizing: border-box; border: 1px solid var(--rl-line); border-radius: 8px; padding: 6px 8px; }
/* the 9-box (Chris, 2026-10-13: "show this in 9 boxes"): performance in thirds against potential, each box labelled */
.od-grid9 { display: grid; grid-template-columns: 48px repeat(3, minmax(0, 1fr)); gap: 5px; }
.od-grid9 .h { font-size: 0.68rem; font-weight: 800; color: #3a4060; text-align: center; }
.od-grid9 .h i { font-style: normal; font-weight: 500; color: var(--muted); }
.od-grid9 .h.r { text-align: left; display: flex; align-items: center; }
.od-grid9 .c { height: 54px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; }
.od-grid9 .c b { font-size: 1rem; }
.od-grid9 .c small { font-size: 0.66rem; font-weight: 600; opacity: 0.85; }
.od-grid9 .c.tbox-cat-pip-improvement { color: #8f3630; }
.od-grid9 .c.tbox-cat-star { color: #2c6a5f; }
.od-grid9 .c.tbox-cat-super-star { color: #7a5d12; }
.od-grid9 .ax { grid-column: span 3; font-size: 0.66rem; color: var(--muted); text-align: center; }
.od-box-cats .k { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; color: #3a4060; }
.od-box-cats i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid #c3c8d6; }
.od-box-cats b { font-size: 0.96rem; color: var(--navy); }
.od-box-cats .p { font-size: 0.7rem; color: var(--muted); }
.od-ledc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center; padding: 7px 12px;
  border: 1px solid var(--rl-line); border-radius: 10px; font-size: 0.8rem; color: #4b5164; }
.od-ledc .cy { display: flex; flex-direction: column; font-weight: 700; color: var(--navy); }
.od-ledc small { font-size: 0.7rem; font-weight: 400; color: var(--muted); }
@media (max-width: 600px) { .od-tiles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .od-grid { grid-template-columns: minmax(0, 1fr); }
  .od-grid > *, .od-grid > * + * { grid-column: 1 / -1; order: 0; }
  .od-steps { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 0; }
  .od-link { display: none; }
  .od-row, .od-yr, .od-crow { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .od-row .pt, .od-row .ts, .od-yr .pt, .od-yr .ts, .od-crow .pt, .od-crow .ts { display: none; }
  .od-yck { grid-column: 2 / 3; }
  .od-cnote { grid-column: 2 / 4; }
  .od-glance { grid-template-columns: minmax(0, 1fr); }
}

/* the record panel's details (2026-10-08): the plan in full, this cycle's competency calls, the manager's words */
.od-line { margin: 0 0 6px; font-size: 0.84rem; color: #3a4060; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.od-by { margin: 8px 0 3px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.od-goal { border: 1px solid var(--rl-line); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; }
.od-goal-h { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--navy); display: flex; justify-content: space-between; gap: 8px; }
.od-goal-st { flex: none; font-size: 0.7rem; font-weight: 700; color: #3a4060; background: #eef0f5; border-radius: 20px; padding: 1px 8px; }
.od-goal-m { margin: 3px 0 0; font-size: 0.76rem; color: var(--muted); }
.od-goal-a { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink); }
.od-goal-a b { font-weight: 700; color: #3a4060; }
.od-comp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.od-comp li { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; font-size: 0.82rem;
  border-bottom: 1px solid var(--rl-line-soft); padding-bottom: 5px; }
.od-comp .nm { min-width: 0; font-weight: 600; }
.od-comp .cl { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; flex: none; max-width: 60%; }
.od-call { font-size: 0.7rem; font-weight: 700; border-radius: 20px; padding: 1px 8px; background: #eef0f5; color: #4b5164; }
.od-call.is-yes { background: #d9efe6; color: #0f6e56; }
.od-call.is-no { background: #fdf0e2; color: #9a5a12; }

/* ---- The admin shell (2026-10-10, the "OneHR Admin Revamp" canvas: direction A, with B's calendar and C's search
   and sheet). A sidebar of sections; each section's tabs and pages across the top; one Settings page per module. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.adm-shell { display: flex; align-items: stretch; min-height: calc(100vh - 56px); }
.adm-side { flex: 0 0 224px; width: 224px; background: #fff; border-right: 1px solid var(--rl-line); }
.adm-side-in { position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; box-sizing: border-box; padding: 14px 10px 24px; display: flex; flex-direction: column; gap: 2px; }
.adm-side-sec { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a90a2; padding: 12px 10px 4px; }
.adm-side-rule { height: 1px; background: var(--rl-line-soft); margin: 8px 10px; }
.adm-side-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: .88rem; color: var(--ink); text-decoration: none; }
.adm-side-item:hover { background: #f4f5f9; text-decoration: none; }
.adm-side-item.is-active { background: #eef1fa; color: var(--navy); font-weight: 700; }
.adm-side-sq { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.adm-side-lbl { flex: 1; min-width: 0; }
.adm-side-badge { flex: none; font-size: .7rem; font-weight: 700; }
.adm-side-badge.is-todo { color: #7a4b00; }
.adm-side-badge.is-ok { color: #1a7a54; }
.adm-side-badge.is-off { color: #8a90a2; }
.adm-main { flex: 1; min-width: 0; max-width: 1400px; padding: 16px 24px 40px; box-sizing: border-box; }
.adm-head { margin: 0 0 16px; }
.adm-head-row { display: flex; align-items: center; gap: 12px; }
.adm-head-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--navy); }
.adm-head-title .adm-side-sq { width: 12px; height: 12px; }
.adm-state { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.adm-state.is-on { background: #d7f0e0; color: #1a7a54; }
.adm-state.is-off { background: #eef0f5; color: #5f6678; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; border-bottom: 1px solid var(--rl-line); }
.adm-tabs a { padding: 9px 14px; font-size: .92rem; color: #4b5164; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.adm-tabs a:hover { color: var(--navy); text-decoration: none; }
.adm-tabs a.is-active { color: var(--navy); font-weight: 700; border-bottom-color: var(--navy); }
.adm-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.adm-subnav a { font-size: .82rem; padding: 6px 12px; border-radius: 999px; border: 1px solid #c9cede; background: #fff; color: #3a4060; text-decoration: none; }
.adm-subnav a:hover { border-color: var(--navy); text-decoration: none; }
.adm-subnav a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
/* the top bar's search, and the search itself */
.adm-search-trigger { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 300px; padding: 0 10px 0 12px; margin-right: 8px; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #dfe2f0; font: inherit; font-size: .85rem; cursor: pointer; }
.adm-search-trigger:hover { background: rgba(255,255,255,.18); }
.adm-search-trigger span { flex: 1; text-align: left; }
.adm-search-trigger kbd { font: inherit; font-size: .7rem; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 0 5px; }
.adm-search[hidden] { display: none; }
.adm-search { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: rgba(20,24,52,.35); }
.adm-search-box { width: min(680px, calc(100vw - 32px)); background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(20,24,52,.3); overflow: hidden; }
.adm-search-input { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--rl-line); color: #5f6678; }
.adm-search-input input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; }
.adm-search-input kbd, .adm-kbd { font: inherit; font-size: .7rem; border: 1px solid #c9cede; border-radius: 4px; padding: 1px 6px; }
.adm-search-list { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px; }
.adm-search-grp { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a90a2; padding: 8px 10px 4px; }
.adm-search-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.adm-search-opt:hover, .adm-search-opt.is-cur { background: #eef1fa; text-decoration: none; }
.adm-search-opt .adm-search-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-search-opt b { font-size: .9rem; color: var(--navy); }
.adm-search-opt small { font-size: .78rem; color: #5f6678; }
.adm-search-val { flex: none; max-width: 42%; font-size: .78rem; color: #3a4060; text-align: right; }
.adm-search-empty { padding: 18px 12px; font-size: .88rem; color: #5f6678; }
.adm-search-foot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--rl-line); font-size: .74rem; color: #8a90a2; }
/* a module's Settings page */
.adm-set { display: flex; align-items: flex-start; gap: 20px; }
.adm-set-index { position: sticky; top: calc(var(--topbar-h) + 12px); flex: 0 0 210px; display: flex; flex-direction: column; gap: 2px; }
.adm-set-index a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: .85rem; color: #3a4060; text-decoration: none; }
.adm-set-index a:hover { background: #fff; text-decoration: none; }
.adm-set-idx-scope { font-size: .68rem; font-weight: 600; color: #8a90a2; text-align: right; }
.adm-set-index p { margin: 10px 10px 0; line-height: 1.4; }
.adm-set-cards { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.adm-set-card { scroll-margin-top: calc(var(--topbar-h) + 12px); }
.adm-set-card:target { box-shadow: 0 0 0 2px var(--navy); }
.adm-set-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adm-set-head h2 { margin: 0; font-size: 1.02rem; color: var(--navy); }
.adm-set-last { flex: 1; font-size: .76rem; color: #8a90a2; text-align: right; }
.adm-set-open, .adm-need-go, .adm-rep-dl { flex: none; font-size: .82rem; font-weight: 700; white-space: nowrap; border: 1px solid #c9cede; border-radius: 8px; padding: 6px 11px; text-decoration: none; }
.adm-set-open:hover, .adm-need-go:hover, .adm-rep-dl:hover { border-color: var(--navy); text-decoration: none; }
.adm-set-desc { margin: 6px 0 0; }
.adm-set-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); margin: 8px 0 0; }
.adm-set-rows div { display: contents; }
.adm-set-rows dt, .adm-set-rows dd { margin: 0; padding: 7px 0; border-top: 1px solid var(--rl-line-soft); font-size: .88rem; }
.adm-set-rows dt { color: #5f6678; }
.adm-set-rows dd { font-weight: 600; color: var(--ink); }
.adm-scope { font-size: .68rem; font-weight: 800; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: #eef0f5; color: #3a4060; }
.adm-scope.is-bg { background: #dff2ec; color: #155e52; }
.adm-scope.is-cycle, .adm-scope.is-default_cycle, .adm-scope.is-cycle_unit { background: #e0e9fb; color: #1b46b3; }
.adm-dates { margin-top: 8px; }
.adm-now { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.adm-now.is-open { background: #d7f0e0; color: #1a7a54; }
.adm-now.is-not_open { background: #e0e9fb; color: #1b46b3; }
.adm-now.is-closed { background: #eef0f5; color: #5f6678; }
.adm-readonly { margin: 10px 0 0; }
.adm-subcard { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rl-line-soft); }
.adm-set-also { margin: 10px 0 0; }
/* what needs you: a module's Overview and Home */
.adm-needs { margin-bottom: 16px; }
.adm-needs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.adm-needs-head h2 { margin: 0; font-size: 1.02rem; color: var(--navy); }
.adm-needs-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-need { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--rl-line); border-radius: 10px; }
.adm-need.is-done { background: #fafbfc; border-color: var(--rl-line-soft); }
.adm-need-mark { flex: none; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9cede; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; }
.adm-need.is-done .adm-need-mark { border: 0; background: #d7f0e0; color: #1a7a54; }
.adm-need.is-partial .adm-need-mark { border-color: #f0a500; }
.adm-need-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-need-body b { font-size: .9rem; }
/* N of M on each step, and a step that waits on others (admin round 4, canvas row 1) */
.adm-need-prog { flex: none; width: 200px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.adm-need-n { font-size: .8rem; color: var(--rl-ink-2, #5f6678); white-space: nowrap; }
.adm-need-bar { display: block; width: 100%; height: 5px; border-radius: 3px; background: #eceef4; overflow: hidden; }
.adm-need-bar i { display: block; height: 100%; background: #2f64d6; border-radius: 3px; }
.adm-need.is-done .adm-need-bar i { background: #1a7a54; }
.adm-need.is-waiting .adm-need-bar i { background: #9aa1b5; }
.adm-need.is-waiting .adm-need-mark { border-color: #b8bdcc; border-style: dashed; }
.adm-need-wait { flex: none; width: 230px; text-align: right; font-size: .8rem; color: #5f6678; }
.adm-need-go, .adm-need-done { min-width: 0; }
.adm-need > .adm-need-go, .adm-need > .adm-need-done { width: 230px; box-sizing: border-box; text-align: center; }
@media (max-width: 900px) { .adm-need { flex-wrap: wrap; } .adm-need-prog { width: 100%; align-items: stretch; }
  .adm-need-wait, .adm-need > .adm-need-go, .adm-need > .adm-need-done { width: auto; } }
.adm-need.is-done .adm-need-body b { color: #5f6678; font-weight: 600; }
.adm-need-done { flex: none; font-size: .8rem; font-weight: 700; color: #1a7a54; }
.adm-home { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-home-list { list-style: none; margin: 8px 0 0; padding: 0; }
.adm-home-list li { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--rl-line-soft); }
.adm-home-mod { flex: none; width: 140px; font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.adm-home-what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-home-what b { font-size: .9rem; }
.adm-home .admin-card + .admin-card { margin-top: 0; }
.adm-home-notes h2 { margin: 0; }
.adm-home-notes .adm-home-list li { font-size: .88rem; color: #3a4060; }
/* Home's business group x module grid (canvas J1, 2026-10-10) */
.hm-now { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hm-open { font-size: .8rem; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: #e6f4ee; color: #1a7a54;
  white-space: nowrap; }
.hm { margin: 0 0 16px; padding: 0; overflow: hidden; }
.hm-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 12px 16px 8px; }
.hm-title b { color: var(--navy); font-size: .98rem; }
.hm-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.hm-table th, .hm-table td { padding: 8px 10px; text-align: left; vertical-align: middle; border-top: 1px solid #f1f2f6; }
.hm-table th:first-child, .hm-table td:first-child { padding-left: 16px; }
.hm-table thead th { background: #f7f8fb; font-size: .76rem; font-weight: 700; color: #5f6678; white-space: nowrap; }
.hm-table thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.hm-table thead th a:hover { color: var(--navy); }
.hm-table tbody th { font-weight: 700; color: var(--ink); min-width: 120px; max-width: 200px; font-size: .8rem; }
.hm-total th, .hm-total td { background: #f7f8fb; }
.hm-cell { display: flex; flex-direction: column; gap: 4px; min-width: 96px; color: inherit; text-decoration: none; }
a.hm-cell:hover { text-decoration: none; }
a.hm-cell:hover .hm-pct b { text-decoration: underline; }
.hm-pct { display: flex; align-items: baseline; gap: 6px; }
.hm-pct b { font-size: .95rem; }
.hm-pct { flex-wrap: wrap; }
.hm-pct span { font-size: .72rem; color: #6b7286; }
.hm-bar { height: 5px; border-radius: 3px; background: #eef0f5; overflow: hidden; }
.hm-bar span { display: block; height: 5px; }
.hm-ok b { color: #1a7a54; } .hm-ok .hm-bar span { background: #1a7a54; }
.hm-mid b { color: #7a4b00; } .hm-mid .hm-bar span { background: #e0a42d; }
.hm-low b { color: #b42318; } .hm-low .hm-bar span { background: #e07068; }
.hm-none b { color: #8a90a2; }
.adm-ready { margin-top: 16px; }
.adm-ready > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.adm-ready > summary::-webkit-details-marker { display: none; }
/* the sheet of every setting */
.adm-sheet-search input { width: 300px; height: 38px; box-sizing: border-box; padding: 0 12px; border: 1px solid #c9cede; border-radius: 9px; font: inherit; }
.adm-sheet-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { height: 32px; padding: 0 12px; border: 1px solid #c9cede; border-radius: 999px; background: #fff; color: #3a4060; font: inherit; font-size: .82rem; cursor: pointer; }
.adm-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.adm-sheet-mod { white-space: nowrap; font-size: .82rem; font-weight: 700; color: #3a4060; }
.adm-sheet-mod .adm-side-sq { margin-right: 7px; }
.adm-sheet-open { white-space: nowrap; text-align: right; }
.adm-sheet-count { margin: 10px 0 0; }
/* reports */
.adm-rep { margin-bottom: 12px; }
.adm-rep-h { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 1rem; color: var(--navy); }
.adm-rep-files { list-style: none; margin: 0; padding: 0; }
.adm-rep-files li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rl-line-soft); }
.adm-rep-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-rep-fmt { flex: none; font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #eef0f5; color: #3a4060; }
.adm-rep-pages { margin: 8px 0 0; }
.adm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.adm-tile { display: flex; flex-direction: column; gap: 2px; }
.adm-tile b { font-size: 1.5rem; color: var(--navy); }
@media (max-width: 900px) {
  .adm-shell { flex-direction: column; }
  .adm-side { flex: none; width: auto; border-right: 0; border-bottom: 1px solid var(--rl-line); }
  .adm-side-in { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .adm-side-sec, .adm-side-rule { display: none; }
  .adm-set { flex-direction: column; }
  .adm-set-index { position: static; flex: none; width: 100%; }
  .adm-home { grid-template-columns: 1fr; }
  .adm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-search-trigger { min-width: 0; }
  .adm-search-trigger span, .adm-search-trigger kbd { display: none; }
}
/* the cycle calendar (2026-10-10, the canvas's B2) */
.adm-cal-pick select { min-width: 220px; }
.adm-cal { display: flex; align-items: flex-start; gap: 14px; }
.adm-cal-chart { flex: 1; min-width: 0; padding: 12px 16px; }
.adm-cal-side { flex: 0 0 280px; display: flex; flex-direction: column; gap: 12px; }
.adm-cal-scale { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: end; padding-bottom: 6px; border-bottom: 1px solid var(--rl-line-soft); }
.adm-cal-h { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a90a2; }
.adm-cal-months { display: grid; font-size: .76rem; font-weight: 700; color: #5f6678; }
.adm-cal-group { display: flex; align-items: center; gap: 8px; padding: 9px 0 3px; font-size: .84rem; color: var(--navy); }
.adm-cal-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; padding: 4px 6px; margin: 0 -6px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.adm-cal-row:hover { background: #f4f5f9; text-decoration: none; }
.adm-cal-row.is-sel { background: #eef1fa; box-shadow: inset 0 0 0 1.5px var(--navy); }
.adm-cal-name { padding-left: 18px; padding-right: 8px; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-cal-track { position: relative; height: 20px; }
.adm-cal-mline { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--rl-line-soft); }
.adm-cal-bar { position: absolute; top: 1px; height: 18px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; font-size: .68rem; font-weight: 700; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--t); color: var(--ink); }
.adm-cal-bar.is-open { background: var(--c); color: #fff; }
.adm-cal-bar.is-undated { background: repeating-linear-gradient(-45deg, #fff, #fff 5px, #f1f2f6 5px, #f1f2f6 10px); border: 1px dashed #c4c8d4; color: #5f6678; }
.adm-cal-out { position: absolute; top: 1px; line-height: 18px; font-size: .68rem; font-weight: 700; color: #3a4060; white-space: nowrap; }
.adm-cal-today { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--red); }
.adm-cal-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; }
.adm-cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.adm-cal-k { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.adm-cal-k.is-today { width: 2px; height: 14px; background: var(--red); border-radius: 0; }
.adm-cal-k.is-open { background: var(--navy); }
.adm-cal-k.is-tint { background: #dbe0f0; }
.adm-cal-k.is-undated { background: repeating-linear-gradient(-45deg, #fff, #fff 3px, #e4e7ef 3px, #e4e7ef 6px); border: 1px dashed #c4c8d4; }
.adm-cal-edit { box-shadow: 0 0 0 1.5px var(--navy); }
.adm-cal-eyebrow { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--navy)); }
.adm-cal-edit h2, .adm-cal-card h2 { margin: 2px 0 8px; font-size: 1rem; color: var(--navy); }
.adm-cal-edit label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 700; color: #3a4060; }
.adm-cal-btns { display: flex; gap: 8px; margin-top: 10px; }
.adm-cal-btns .primary { flex: 1; }
.adm-cal-mod { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .86rem; }
.adm-cal-mod input { width: 16px; height: 16px; accent-color: var(--navy); }
@media (max-width: 1100px) { .adm-cal { flex-direction: column; } .adm-cal-side { flex: none; width: 100%; } }
@media (max-width: 700px) { .adm-cal-scale, .adm-cal-row { grid-template-columns: 150px minmax(0, 1fr); } }
/* the OneHR Admin Agent (2026-10-10): docked on the right of every admin page, in the AI look (red marks the AI) */
.adm-agent[hidden] { display: none; }
.adm-agent { position: fixed; right: 16px; bottom: 84px; z-index: 885; width: 420px; max-width: calc(100vw - 32px);
  height: min(590px, calc(100vh - 140px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rl-line);
  border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(20,24,52,.45); }
/* every admin page ends 88px clear of the icon, so the last row and its buttons scroll above it (canvas board A3) */
.adm-main { padding-bottom: 88px; }
.adm-agent-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rl-line-soft); }
.adm-agent-mark { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ai-tint); color: var(--ai); font-size: 15px; }
.adm-agent-mark.is-sm { width: auto; height: auto; background: none; font-size: 14px; }
.adm-agent-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-agent-who b { font-size: .92rem; color: var(--navy); }
.adm-agent-who span { font-size: .74rem; color: #5f6678; }
.adm-agent-new { border: 1px solid #c9cede; background: #fff; border-radius: 7px; padding: 5px 9px; font: inherit; font-size: .76rem; color: #3a4060; cursor: pointer; }
.adm-agent-x { border: 0; background: none; width: 32px; height: 32px; font-size: 20px; color: #5f6678; cursor: pointer; }
.adm-agent-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.adm-agent-hello p { margin: 0 0 10px; font-size: .88rem; color: #3a4060; }
.adm-agent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.adm-agent-chip { border: 1px solid var(--ai-line); background: var(--ai-tint); color: var(--ai-ink); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.adm-am-user { align-self: flex-end; max-width: 84%; background: #eef1fa; border-radius: 12px 12px 4px 12px; padding: 9px 12px; font-size: .88rem; white-space: pre-wrap; }
.adm-am-agent { display: flex; gap: 9px; font-size: .88rem; }
.adm-am-agent > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-am-agent p { margin: 0; color: var(--ink); white-space: pre-wrap; }
.adm-am-agent.is-busy p { color: #8a90a2; }
.adm-ac { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border: 1px solid var(--rl-line); border-radius: 10px; }
.adm-ac b { font-size: .86rem; color: var(--navy); }
.adm-ac-eyebrow { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.adm-ac-val { font-size: .82rem; color: #3a4060; }
.adm-ac-sub { font-size: .76rem; color: #5f6678; }
.adm-ac-line, .adm-ac-solid { align-self: flex-start; margin-top: 4px; font-size: .8rem; font-weight: 700; border-radius: 8px; padding: 6px 11px; text-decoration: none; }
.adm-ac-line { color: var(--ai-ink); background: var(--ai-tint); border: 1px solid var(--ai-line); }
.adm-ac-solid { color: #fff; background: var(--ai); border: 1px solid var(--ai); }
.adm-ac-line:hover, .adm-ac-solid:hover { text-decoration: none; filter: brightness(.96); }
.adm-ac-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-ac-scroll { overflow-x: auto; margin: 4px 0 2px; }
.adm-ac-built table { border-collapse: collapse; width: 100%; font-size: .76rem; }
.adm-ac-built th { text-align: left; font-weight: 600; color: #5f6678; padding: 3px 4px; border-bottom: 1px solid var(--rl-line-soft); white-space: nowrap; }
.adm-ac-built td { padding: 4px; border-bottom: 1px solid #f1f2f6; white-space: nowrap; }
.adm-ac-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .8rem; }
.adm-ac-steps span { font-size: .66rem; font-weight: 800; text-transform: uppercase; color: #5f6678; }
.adm-ac-steps small { color: #8a90a2; }
.adm-agent-form { padding: 10px 14px 12px; border-top: 1px solid var(--rl-line-soft); }
.adm-agent-input { display: flex; align-items: flex-end; gap: 8px; border: 1px solid #c9cede; border-radius: 10px; padding: 4px 4px 4px 12px; }
.adm-agent-input:focus-within { border-color: var(--ai); }
.adm-agent-input textarea { flex: 1; min-width: 0; border: 0; outline: none; resize: none; font: inherit; font-size: .88rem; padding: 7px 0; max-height: 120px; background: transparent; }
.adm-agent-send { flex: none; height: 36px; border: 0; border-radius: 8px; background: var(--ai); color: #fff; font: inherit; font-size: .84rem; font-weight: 700; padding: 0 14px; cursor: pointer; }
.adm-agent-form p { margin: 6px 0 0; font-size: .72rem; color: #5f6678; }
.adm-search-ask b { color: var(--ai-ink); }
.adm-search-ask > span:first-child { color: var(--ai); }
.adm-rep-built .adm-rep-dl + .adm-rep-dl { margin-left: 0; }
@media (max-width: 1100px) { body.adm-agent-on .adm-shell { margin-right: 0; } .adm-agent { width: min(420px, 100vw); } }
.adm-am-agent > .adm-agent-mark { align-self: flex-start; padding-top: 1px; }

/* ---- The person page (canvas row I, 2026-10-10): one person, everything set for them ---- */
.pp { display: flex; flex-direction: column; gap: 10px; }
.pp-crumb a { text-decoration: none; }
.pp-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 0; }
.pp-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #e2e4f3; color: var(--navy); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pp-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-name { margin: 0; font-size: 1.25rem; color: var(--navy); }
.pp-badges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.pp-role { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: #eef0f5; color: #3a4060; white-space: nowrap; }
.pp-role.is-lm { background: #e0e9fb; color: #1b46b3; } .pp-role.is-hod { background: #d3eef0; color: #0b5f69; }
.pp-role.is-bu { background: #ebdff7; color: #5e2a96; } .pp-role.is-bg { background: #e2e4f3; color: var(--navy); }
.pp-role.is-mx { background: #fdf0d5; color: #7a4b00; }
.pp-in { font-size: .78rem; font-weight: 700; color: #1a7a54; margin-left: 4px; }
.pp-out { font-size: .74rem; font-weight: 700; color: #b42318; }
.pp-cycle select { min-width: 200px; }
.pp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rl-line); }
.pp-tabs a { padding: 7px 12px; color: #4b5164; text-decoration: none; font-size: .9rem; }
.pp-tabs a.is-on { color: var(--navy); font-weight: 700; border-bottom: 2px solid var(--navy); margin-bottom: -1px; }
.pp-past { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fdf6e3; color: #6b4b00; font-size: .85rem; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.pp-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-mod { margin: 0; padding: 11px 14px; display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--mod, var(--navy)); font-size: .88rem; }
.pp-mod-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-mod-h b { color: var(--navy); font-size: .95rem; }
.pp-mod-h a, .pp-mod a { font-size: .8rem; font-weight: 700; text-decoration: none; }
.pp-card { margin: 0; padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; }
.pp-h { margin: 0; font-size: .95rem; color: var(--navy); }
.pp-h-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-none { margin: 0; }
.pp-need { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .86rem; border-top: 1px solid #f1f2f6; padding-top: 6px; }
.pp-need a { font-size: .8rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.pp-need-m { color: var(--navy); }
.pp-log { display: grid; grid-template-columns: 92px 150px minmax(0, 1fr); gap: 8px; font-size: .82rem; border-top: 1px solid #f1f2f6; padding-top: 5px; }
.pp-log span { overflow-wrap: anywhere; }
.pp-line { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #f1f2f6; padding-top: 7px; font-size: .86rem; }
.pp-line-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; }
.pp-change[open] { flex-basis: 100%; display: flex; align-items: center; gap: 8px; }
.pp-change[open] > summary { margin: 0; }
.pp-line-h a { text-decoration: none; font-weight: 700; }
.pp-change > summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--navy-600); list-style: none; }
.pp-change > summary::-webkit-details-marker { display: none; }

.pp-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pp-inline input, .pp-inline select { height: 32px; box-sizing: border-box; padding: 0 9px; border: 1px solid #c9cede; border-radius: 8px; font: inherit; font-size: .84rem; max-width: 170px; }
.pp-plan { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 10px; background: #f7f8fb; border: 1px solid var(--rl-line); font-size: .84rem; }
.pp-plan input[name="override_reason"] { height: 32px; padding: 0 9px; border: 1px solid #c9cede; border-radius: 8px; font: inherit; }
.pp-plan-btns { display: flex; gap: 12px; align-items: center; margin-top: 2px; }
.pp-block { color: #b42318; font-weight: 600; }
.pp-warn { color: #7a4b00; }
.pp-r { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .86rem; border-top: 1px solid #f1f2f6; padding-top: 6px; }
.pp-r a { text-decoration: none; white-space: nowrap; }
.pp-r form { margin: 0; }
/* a BU CEO of several units: each unit's Remove and "Add a unit" on their own lines under the label (admin round 4) */
.pp-r.pp-r-bu { flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; }
.pp-r.pp-r-bu > span:first-child { flex: 1 0 100%; }
.pp-r.pp-r-bu .btn-link { white-space: normal; text-align: left; }
/* Performance */
.pp-frame-row { display: flex; gap: 10px; align-items: stretch; }
.pp-frame { flex: 1; margin: 0; padding: 9px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: .86rem; }
.pp-frame a { text-decoration: none; }
.pp-k { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pp-flow .pp-k { display: inline; margin-right: 2px; }
.pp-ok { color: #1a7a54; } .pp-bad { color: #b42318; }
.pp-add-btn { display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--rl-btn-radius); background: var(--navy); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pp-add-btn:hover { background: var(--navy-700); color: #fff; text-decoration: none; }
.pp-tag { font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 1px 6px; background: #e0e9fb; color: #1b46b3; margin-right: 2px; }
.pp-tag.is-mx { background: #fdf0d5; color: #7a4b00; }
.pp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; }
.pp-step { font-weight: 700; border-radius: 999px; padding: 4px 10px; background: #eef0f5; color: var(--muted); }
.pp-step.is-lm { background: #e0e9fb; color: #1b46b3; } .pp-step.is-mx { background: #fdf0d5; color: #7a4b00; }
.pp-step.is-now { background: var(--navy); color: #fff; } .pp-step.is-done { background: #e6f4ee; color: #1a7a54; }
.pp-arr { color: #8a90a2; }
.pp-kpis { margin: 0; padding: 0; overflow: hidden; }
.pp-krow { display: grid; grid-template-columns: 22px minmax(0, 1.5fr) 54px 150px 150px minmax(0, 1.2fr) minmax(0, 1fr) 62px; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid #f1f2f6; font-size: .86rem; }
.pp-khead { background: #f7f8fb; border-top: 0; font-size: .74rem; font-weight: 700; color: var(--muted); }
.pp-kname { display: flex; flex-direction: column; min-width: 0; }
.pp-kname b { overflow-wrap: anywhere; }
.pp-who-mod { font-weight: 600; overflow-wrap: anywhere; } .pp-who-mod.is-lm { color: #1b46b3; } .pp-who-mod.is-matrix { color: #7a4b00; }
.pp-state { font-size: .8rem; font-weight: 700; color: var(--muted); }
.pp-state.is-done { color: #1a7a54; } .pp-state.is-lm { color: #1b46b3; } .pp-state.is-mx { color: #7a4b00; } .pp-state.is-warn { color: #b42318; }
.pp-act { font-size: .8rem; font-weight: 700; color: var(--navy-600); text-align: right; }
.pp-kpi > summary { cursor: pointer; list-style: none; }
.pp-kpi > summary::-webkit-details-marker { display: none; }
.pp-kpi[open] > summary { background: #fbfaf5; }
.pp-kpi[open] .pp-act::after { content: " ▴"; }
.pp-edit { background: #fbfaf5; padding: 10px 16px 12px 48px; border-top: 1px solid var(--rl-line); display: flex; flex-direction: column; gap: 8px; }
.pp-edit form, .pp-addbox form { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.pp-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pp-fields label, .pp-lib { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--muted); }
.pp-fields input, .pp-fields select, .pp-mod-pick input[name="matrix_eid"], .pp-del input { height: 34px; box-sizing: border-box; padding: 0 9px; border: 1px solid #c9cede; border-radius: 8px; background: #fff; font: inherit; font-size: .86rem; color: var(--ink); }
.pp-f-wide { grid-column: span 2; } .pp-f-full { grid-column: 1 / -1; }
.pp-mod-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .86rem; }
.pp-mod-pick b { font-size: .8rem; color: #3a4060; }
.pp-mod-pick input[name="matrix_eid"] { width: 170px; }
.pp-edit-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pp-del { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.pp-del input { width: 320px; }
.pp-danger { color: #b42318 !important; font-weight: 700; }
.pp-addbox { margin: 0; padding: 10px 16px; }
.pp-addbox > summary { cursor: pointer; }
.pp-addbox[open] > summary { margin-bottom: 10px; }
.pp-lib select { max-width: 420px; }
.pp-foot { margin: 0; }
.pp .admin-card + .admin-card { margin-top: 0; }   /* the page's own gaps space its cards (grid and columns) */

/* ---- Cycle > Reminders (canvas E2, 2026-10-10): the one reminder ---- */
.rm-lede { margin: 0 0 10px; }
.rm-off { color: #7a4b00; font-weight: 600; }
.rm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
.rm-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rm .admin-card + .admin-card { margin-top: 0; }
.rm-card { margin: 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.rm-card h2 { margin: 0; font-size: 1rem; }
.rm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rm-badge { font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; background: #e2e4f3; color: var(--navy); }
.rm-rules fieldset, .rm-words fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rm-rules, .rm-words { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.rm-rule, .rm-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .9rem; }
.rm-switch { font-weight: 700; color: var(--navy); }
.rm-days { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rm-day { display: inline-flex; align-items: center; border: 1px solid #c9cede; border-radius: 999px; padding: 0 4px 0 8px; background: #fff; }
.rm-day input { width: 34px; border: 0; font: inherit; text-align: center; background: transparent; }
.rm-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 4px; }
.rm-num { width: 48px; } .rm-time { width: 110px; }
.rm-num, .rm-time, .rm-words input, .rm-inline input { height: 34px; box-sizing: border-box; padding: 0 9px; border: 1px solid #c9cede; border-radius: 8px; font: inherit; font-size: .88rem; }
.rm-words label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--muted); }
.rm-note { margin: 0; }
.rm-btns, .rm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rm-actions form { margin: 0; }
.rm-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.rm-inline input { width: 150px; }
.rm-who { margin: 0; } .rm-who td, .rm-who th { padding: 7px 10px; }
.rm-total { margin: 0; font-size: .9rem; }
.rm-preview iframe { width: 100%; height: 460px; border: 1px solid var(--rl-line); border-radius: 10px; background: #f4f5f9; }
.rm-run { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; font-size: .84rem; border-top: 1px solid #f1f2f6; padding-top: 6px; }
.rm-bad { color: #b42318; }
.rm-test { margin-top: 6px; } .rm-test input { width: 220px; }
.rm button.primary:disabled { opacity: .45; cursor: not-allowed; }
/* the person page, part 2 (canvas I3-I6) */
.pp-pad { padding: 10px 16px; }
.pp-chip { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: #eef0f5; color: #3a4060; }
.pp-chip.is-ok { background: #e6f4ee; color: #1a7a54; } .pp-chip.is-low { background: #fdf0d5; color: #7a4b00; } .pp-chip.is-bad { background: #fde8e7; color: #b42318; }
.pp-crow, .pp-frow, .pp-hrow { display: grid; gap: 10px; align-items: center; padding: 7px 16px; border-top: 1px solid #f1f2f6; font-size: .86rem; }
.pp-crow { grid-template-columns: minmax(0, 1.6fr) 96px 46px minmax(0, 1.1fr) 56px 66px 70px; }
.pp-frow { grid-template-columns: minmax(0, 1.6fr) 130px minmax(0, 1fr) 90px; }
.pp-hrow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 70px 54px 96px minmax(0, 1fr) 120px 64px; }
.pp-crow.pp-khead, .pp-frow.pp-khead, .pp-hrow.pp-khead { border-top: 0; }
.pp-crow.is-future { background: #faf7ff; } .pp-frow.is-archived { opacity: .6; } .pp-hrow.is-on { background: #eef1fa; }
.pp-crow form, .pp-frow form, .pp-r form { margin: 0; }
.pp-src-hr { color: #7a4b00; font-weight: 600; }
.pp-pick { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--rl-line); border-radius: 10px; padding: 7px 10px; color: var(--ink); text-decoration: none; }
.pp-pick:hover { text-decoration: none; border-color: #c9cede; }
.pp-pick.is-on { border: 1.5px solid var(--navy); background: #eef1fa; }
.pp-sugg { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 0; }
.pp-sg { display: flex; align-items: center; gap: 6px; font-size: .86rem; }
.pp-path { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.pp-node { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--rl-line); border-radius: 10px; padding: 8px 11px; font-size: .88rem; }
.pp-node.is-next { border: 1.5px solid #7c3aed; background: #faf7ff; }
.pp-path > .pp-arr { align-self: center; }
.pp-routes { flex: 1.2; min-width: 200px; border-left: 1px dashed #c9cede; padding-left: 12px; display: flex; flex-direction: column; gap: 3px; font-size: .86rem; }
.pp-grid-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pp-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 4px 0 0; }
.pp-goal { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--rl-line); border-radius: 10px; padding: 7px 10px; font-size: .86rem; }
.pp-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; }
.pp-trail .pp-k { display: inline; margin-right: 4px; }
.pp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; font-size: .88rem; border-top: 1px solid #f1f2f6; padding-top: 8px; }

/* ---- Group calibration (canvas G1 / G3, 2026-10-10) ---- */
.gc-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; border-top: 1px solid #f1f2f6; padding-top: 10px; }
/* the names a Group Chief's Talent Box filters by, the departments the group follows, and Refresh (2026-10-13) */
.gc-seg, .gc-follow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.gc-seg input { height: 30px; border: 1px solid #d7dbe6; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px; width: 180px; }
.gc-names { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 8px; }
.gc-name { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.gc-pill { font-size: 12.5px; background: #eef1fa; border-radius: 999px; padding: 3px 10px; color: #252A59; }
.gc-refresh { margin-left: auto; font-weight: 700; }
.gc-refresh-box { border: 1px solid #dfe3ee; border-radius: 10px; padding: 12px 14px; background: #fafbfe; margin-bottom: 10px; }
.gc-refresh-box h3 { margin: 0; font-size: 14px; }
.gc-refresh-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; font-size: 13px; }
.gc-refresh-cols ul { margin: 4px 0 0; padding-left: 18px; }
.gc-join { color: #1a7a54; } .gc-leave { color: #8f3630; }
.gc-refresh-acts { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.gc-mode, .gc-match, .gc-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .88rem; margin: 0; }
.gc-k { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gc-w input { width: 44px; height: 30px; box-sizing: border-box; padding: 0 6px; border: 1px solid #c9cede; border-radius: 7px; font: inherit; }
.gc-match input[name="dept"] { height: 32px; box-sizing: border-box; padding: 0 9px; border: 1px solid #c9cede; border-radius: 8px; font: inherit; width: 170px; }
.gc-bgs { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.gc-preview { background: #f7f8fb; border-radius: 10px; padding: 8px 12px; }
.gc-row { display: flex; flex-direction: column; gap: 10px; }
.gc-row form { display: flex; align-items: end; gap: 10px; margin: 0; flex-wrap: wrap; }
.gc-row label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc-row label.gc-id { flex: 0 0 200px; }
.gc-row label.gc-ids { flex: 1 1 320px; max-width: 520px; }
.gc-row label.gc-segin { flex: 0 0 200px; }
.gc-row button { flex: none; }
.gc-row textarea { font: inherit; border: 1px solid #c9cede; border-radius: 8px; padding: 6px 9px; }
.gc-row-note { margin: 0; }
.gc-refresh-notes { list-style: none; padding: 0; margin: 10px 0 0; border-top: 1px solid #e6e8f0; padding-top: 8px; }
.fb-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) 72px 92px 110px 130px minmax(0, 1.6fr); gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid #f1f2f6; font-size: .86rem; }
.fb-head { background: #f7f8fb; border-top: 0; font-size: .74rem; font-weight: 700; color: var(--muted); }
.fb-grid form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.fb-grid select, .fb-grid input[name="reason"] { height: 30px; box-sizing: border-box; padding: 0 8px; border: 1px solid #c9cede; border-radius: 7px; font: inherit; font-size: .82rem; }
.fb-grid input[name="reason"] { flex: 1; min-width: 120px; }
.fb-tie { font-weight: 700; color: #7a4b00; }
.fb-final { font-size: .8rem; color: #1a7a54; }
.fb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px; }
.fb-bar form { margin: 0; }

/* The Group Chief's locks on the group calibration page (canvas G2, 2026-10-10) */
.gl { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.gl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.gl-head b { color: #252A59; font-size: 15px; }
.gl-depts { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-depts form { margin: 0; }
.gl-dept { border: 1px solid #c9cede; background: #fff; color: #1f2330; border-radius: 999px; padding: 5px 12px;
  font-size: 12.5px; cursor: pointer; }
.gl-dept span { color: #5f6678; margin-left: 4px; }
.gl-dept:hover:not([disabled]) { border-color: #252A59; }
.gl-dept[disabled] { cursor: default; opacity: .65; }
#gl-ticked { display: flex; align-items: center; gap: 10px; margin: 0; }
.gl-bgcall .potential-pill { font-size: 10.5px; padding: 0 6px; }
.gl-tick-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #3a4060; margin-top: 3px;
  cursor: pointer; }
.gl-locked { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; min-width: 120px; }
.gl-locked b { color: #1a7a54; }
#gl-ticked-btn[disabled] { opacity: .45; cursor: default; }

/* The admin's Talent Box (canvas J2, 2026-10-10): the BG CEO's box, read only */
.atb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.atb-bar form { margin: 0; }
.atb-bg { color: #252A59; }
.atb-units { display: flex; flex-wrap: wrap; gap: 6px; }
.atb-unit { font-size: 12.5px; border-radius: 999px; padding: 5px 11px; background: #fff; border: 1px solid #c9cede;
  color: #3a4060; text-decoration: none; }
.atb-unit.is-on { background: #252A59; border-color: #252A59; color: #fff; font-weight: 700; }
.atb-spacer { flex: 1; }
.atb-toggle { display: inline-flex; border: 1px solid #c9cede; border-radius: 8px; overflow: hidden; }
.atb-toggle button { border: 0; background: #fff; padding: 5px 11px; font-size: 12.5px; cursor: pointer; color: #1f2330; }
.atb-toggle button.is-on { background: #252A59; color: #fff; font-weight: 700; }
.atb { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.atb .admin-card + .admin-card { margin-top: 0; }
.atb-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.atb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.atb-head b { color: #252A59; font-size: 14px; }
.atb-grid { display: grid; grid-template-columns: 54px repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(92px, auto)) 22px; gap: 6px; }
.atb-ax { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #5f6678; }
.atb-cell { border: 2px solid transparent; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px; cursor: pointer; text-align: left; color: #252A59; font: inherit; }
.atb-cell b { font-size: 20px; }
.atb-cell-l { font-size: 11px; font-weight: 800; color: #3a4060; }
.atb-cell-s { font-size: 11px; color: #5f6678; }
.atb-cell.is-dark, .atb-cell.is-dark .atb-cell-l { color: #fff; }
.atb-cell.is-dark .atb-cell-s { color: #c9cde3; }
.atb-cell.is-on { border-color: #D61923; }
.atb-axes { margin: 0; }
.atb [data-view-pane][hidden] { display: none; }
.atb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.atb-chip { font-size: 12px; border-radius: 999px; padding: 4px 10px; border: 1px solid #c9cede; background: #fff;
  color: #3a4060; cursor: pointer; }
.atb-chip.is-on { background: #252A59; border-color: #252A59; color: #fff; font-weight: 700; }
.atb-people { display: flex; flex-direction: column; gap: 6px; max-height: 640px; overflow: auto; }
.atb-people > b { color: #252A59; font-size: 14px; }
.atb-people ul { list-style: none; margin: 0; padding: 0; }
.atb-people li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; border-top: 1px solid #f1f2f6;
  padding: 5px 0; }
.atb-people li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.atb-people li a { font-weight: 700; }
.atb-bands { font-size: 11.5px; color: #3a4060; white-space: nowrap; }

/* The Group Chief's calibration card in the chat (canvas G2, 2026-10-10): BG, then unit, then department, one row each */
.rv-grp { display: flex; flex-direction: column; gap: 10px; }
.rv-grp-note { margin: 0; font-size: 13px; color: #3a4060; }
.rv-grp-filters { display: flex; flex-direction: column; gap: 6px; }
.rv-grp-frow { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 8px; }
.rv-grp-flbl { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5f6678; }
.rv-grp-tablewrap { max-height: 420px; overflow: auto; border: 1px solid var(--rl-line, #e4e7ef); border-radius: 10px; }
.rv-grp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-grp-table th { position: sticky; top: 0; z-index: 1; background: #f7f8fb; text-align: left; font-size: 11.5px;
  font-weight: 700; color: #5f6678; padding: 7px 10px; }
.rv-grp-table td { padding: 7px 10px; border-top: 1px solid #f1f2f6; vertical-align: middle; }
.rv-grp-table tr.is-locked td { background: #f6fbf8; }
.rv-grp-tick { width: 26px; }
.rv-grp-where { display: block; font-size: 11.5px; color: #6b7286; }
.rv-grp-sel { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid #c9cede; border-radius: 6px; background: #fff; }
.rv-grp-locked { font-weight: 700; color: #1a7a54; }
.rv-grp-moved { font-size: 12px; font-weight: 700; color: #7a4b00; }
.rv-grp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rv-grp-lockf { margin: 0; }
.rv-tbox-grp { margin-left: 6px; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px;
  background: #fdf0d5; color: #7a4b00; white-space: nowrap; }

/* ============================================================================================================
   The admin page kit (canvas K2, 2026-10-10): one way to title, filter, list, confirm and save on every admin page
   ============================================================================================================ */
/* the shell names the page; a page title that carries data (a person, a check) stays, at the shell's own scale */
.adm-main .page-head h1 { font-size: 1.25rem; line-height: 1.3; color: var(--navy); }
.adm-lede { margin: 0 0 14px; color: #5f6678; font-size: .92rem; max-width: 900px; }
.adm-lede b { color: var(--navy); }
.adm-headrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.adm-headrow .adm-lede { margin: 0; }
.adm-headrow-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* a link that is the page's main action looks like the primary button (Users' "Add a person") */
a.primary { display: inline-flex; align-items: center; background: var(--navy); color: #fff; border: 1px solid var(--navy);
  border-radius: var(--rl-btn-radius); font-weight: 600; padding: 7px 14px; text-decoration: none; }
a.primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; text-decoration: none; }
/* a table that opens its card sits at the card's top, not 14px under it */
.admin-card > .table-scroll:first-child { margin-top: 0; }
/* filter rows: business group, then unit, then department, one row each */
.admin-card.adm-filters { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.adm-frows { display: flex; flex-direction: column; gap: 6px; }
.adm-frow { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px; }
.adm-frow-lbl { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5f6678; }
.adm-frow-track { display: flex; align-items: center; gap: 6px; min-width: 0; }
.adm-frow-pills { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; }
.adm-frow-pills::-webkit-scrollbar { display: none; }
.adm-frow-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid #c9cede; background: #fff; color: #3a4060; font-size: .8rem; text-decoration: none; white-space: nowrap; }
.adm-frow-pill span { color: #8a90a2; font-size: .72rem; }
.adm-frow-pill:hover { text-decoration: none; border-color: var(--navy); color: var(--navy); }
.adm-frow-pill.is-on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.adm-frow-pill.is-on span { color: #c9cde3; }
.adm-frow-nav { display: none; flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid #c9cede;
  background: #fff; color: var(--navy); cursor: pointer; align-items: center; justify-content: center; }
.adm-frow-track.is-overflow .adm-frow-nav { display: inline-flex; }
.adm-frow-nav[disabled] { opacity: .35; cursor: default; }
/* the search row under the filter rows */
.adm-fsearch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rr-bandvis > summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; list-style: none; }
.rr-bandvis > summary::-webkit-details-marker { display: none; }
.rr-bandvis[open] > summary { margin-bottom: 10px; }
.bw-all { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; font-size: .88rem; }
/* the potential band cutoffs card: this cycle first, the default folded under it (2026-10-11) */
.pc-block { border: 1px solid #e4e7ef; border-radius: 10px; padding: 12px 14px; margin: 10px 0 12px; max-width: 560px; }
.pc-h { margin: 0 0 8px; display: flex; gap: 8px; align-items: baseline; }
.pc-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; margin-bottom: 8px; }
.pc-in { display: flex; gap: 8px; align-items: center; }
.pc-in input { width: 96px; }
.pc-default summary { cursor: pointer; color: var(--navy); }
.adm-fsearch select, .adm-fsearch .modern-select { width: auto; flex: 0 0 auto; min-width: 150px; }
.adm-frows + .adm-fsearch { border-top: 1px solid #f1f2f6; padding-top: 8px; }
.adm-fsearch input[type=search], .adm-fsearch input[type=text] { flex: 1 1 260px; min-width: 200px; height: 34px;
  box-sizing: border-box; padding: 0 10px; border: 1px solid #c9cede; border-radius: 8px; font: inherit; font-size: .88rem; }
.adm-fsearch label.adm-field { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: #5f6678; }
.adm-fsearch .adm-count { font-size: .8rem; color: #5f6678; }
/* classes some pages used without a rule (the review, 2026-10-10) */
a.btn, button.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--rl-line, #e4e7ef);
  border-radius: 7px; background: #fff; color: var(--navy); font: inherit; font-size: .85rem; font-weight: 600;
  text-decoration: none; cursor: pointer; }
a.btn:hover, button.btn:hover { background: #f3f4f8; text-decoration: none; }
a.btn.primary, button.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filter-row label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: #5f6678; }
.flash-info { background: #e0e9fb; color: #1b46b3; }
/* the one-field question and the notice (base.html openTextPrompt / openNotice) */
.dp-card input[type=text], .dp-card input[type=email], .dp-card input[type=password] { width: 100%; box-sizing: border-box;
  height: 36px; padding: 0 10px; border: 1px solid #c9cede; border-radius: 8px; font: inherit; margin: 4px 0 12px; }
/* Leaders and admins > Admins (canvas K8) */
/* the row's actions on one line (a flex cell squeezed them into a column); Change opens under them */
.admin-table td.adm-admins-acts { white-space: nowrap; text-align: right; }
.adm-admins-acts > form, .adm-admins-acts > details { display: inline-block; vertical-align: top; margin: 0 0 0 10px; }
.adm-admins-acts .adm-inline-form, .adm-admins-acts .adm-units { white-space: normal; text-align: left; }
.adm-admins th { white-space: nowrap; }
.adm-admins-units { display: block; margin-top: 3px; max-width: 46ch; }
.adm-inline-edit > summary { list-style: none; cursor: pointer; }
.adm-inline-edit > summary::-webkit-details-marker { display: none; }
.adm-inline-edit[open] { display: block !important; margin: 0 0 6px !important; }
.adm-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.adm-units { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.adm-units legend { padding: 0; margin-bottom: 4px; }
.adm-units label { display: inline-flex; align-items: center; gap: 5px; font-size: .86rem; }
.adm-units-group { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.adm-units-group[hidden] { display: none; }
.status-pill.adm-scope-super { background: var(--navy); color: #fff; }
/* one page with modes (Panels, Import, Calendar): a segmented switch at the top */
.adm-modes { display: inline-flex; border: 1px solid #c9cede; border-radius: 9px; overflow: hidden; margin: 0 0 12px; background: #fff; }
.adm-modes a { padding: 6px 14px; font-size: .86rem; color: #3a4060; text-decoration: none; border-left: 1px solid #c9cede; }
.adm-modes a:first-child { border-left: 0; }
.adm-modes a:hover { background: #f3f4f8; text-decoration: none; }
.adm-modes a.is-on { background: var(--navy); color: #fff; font-weight: 700; }
.adm-note-line { margin: 0 0 12px; padding: 9px 14px; border-radius: 10px; background: #fdf0d5; color: #5c3a00; font-size: .88rem; }
.adm-note-line a { font-weight: 700; }
.adm-tiles > .admin-card.adm-tile { margin: 0; }
/* People > Users (canvas K4) */
/* People: one line a row, the overflow cut with its full text as the tooltip (2026-10-12) */
.adm-users { table-layout: fixed; width: 100%; }
.adm-users td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 7px; padding-bottom: 7px; }
.adm-users td .muted.small { font-size: .78rem; }
.adm-users td:last-child .btn-link { min-height: 0; padding: 2px 6px; }   /* Open: a link, so the row stays one line high */
.adm-role { display: inline-block; margin: 0 4px 2px 0; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 1px 8px;
  background: #eef1fa; color: var(--navy); }
.status-pill.adm-status-gone { background: #eef0f5; color: #5f6678; }
.adm-form-acts { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
/* People > Users > Mark several as left / Bring people back (2026-10-10): the choose bar over the table */
.adm-bulk-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 10px; min-height: 34px; }
.adm-bulk-acts { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; }
.adm-bulk-acts[hidden] { display: none; }
.admin-table th.adm-cb-col { width: 34px; }
.adm-add-user .pp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.adm-add-user .pp-fields label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: #5f6678; }
.pp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pp-acts form { margin: 0; }
/* the person page's 360 tab: change a relationship, add someone by name (canvas K7) */
.pp-relsel { height: 30px; font-size: .8rem; padding: 0 6px; }
.pp-addsearch { position: relative; flex-wrap: wrap; }
.pp-addq { flex: 1 1 220px; height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid #c9cede; border-radius: 8px; font: inherit; font-size: .86rem; }
.pp-addres { position: absolute; z-index: 5; top: 40px; left: 0; right: 0; background: #fff; border: 1px solid #e4e7ef; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(37,42,89,.12); padding: 4px; display: flex; flex-direction: column; max-height: 260px; overflow: auto; }
.pp-addres[hidden] { display: none; }
.pp-addopt { text-align: left; border: 0; background: none; padding: 7px 9px; border-radius: 7px; cursor: pointer; font: inherit; font-size: .86rem; }
.pp-addopt:hover, .pp-addopt:focus { background: #eef1fa; }
.pp-frow { grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1fr) minmax(160px, auto); }
.pp-frow > span:last-child { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pp-frow > span:last-child form { margin: 0; }
.pp-head-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
/* a dedicated settings page opened from its card: Settings › Page (the review, 2026-10-10) */
.adm-crumb { margin: 0 0 8px; font-size: .82rem; color: #5f6678; }
.adm-crumb a { color: var(--navy); font-weight: 600; }
/* 360 Feedback > Overview (canvas K5) */
a.adm-tile-link { color: inherit; text-decoration: none; }
a.adm-tile-link:hover { box-shadow: 0 4px 14px rgba(37,42,89,.10); text-decoration: none; }
.adm-stage-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: .86rem; }
.adm-bar { display: inline-block; width: 120px; height: 6px; border-radius: 3px; background: #eef0f5; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.adm-bar span { display: block; height: 6px; }
.adm-bar .is-ok { background: #1a7a54; } .adm-bar .is-mid { background: #e0a42d; } .adm-bar .is-low { background: #e07068; }
/* Cycle > Calendar > This cycle (canvas K6) */
.adm-cyc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.adm-cyc-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-cyc-lbl { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5f6678; }
.adm-cyc-cell > b { color: var(--navy); font-size: 1rem; }
.adm-cyc-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
.adm-cyc-mods { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-cyc-mod { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: #e6f4ee; color: #1a7a54; }
.adm-cyc-mod.is-off { background: #eef0f5; color: #8a90a2; text-decoration: line-through; }
.adm-cal-closef { margin: 6px 0 0; }

/* ---- Ask OneHR on the dashboard (the canvas "OneHR Ask Agent and Admin Standard", row A; 2026-10-11) ---- */
.ask-panel { position: fixed; right: 16px; bottom: 84px; width: 400px; max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 140px)); z-index: 880; background: #fff; border: 1px solid var(--rl-line);
  border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(20, 24, 52, .45);
  display: flex; flex-direction: column; }
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid #eef0f5; }
.ask-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ai-tint); color: var(--ai); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ask-head-txt { flex: 1; min-width: 0; }
.ask-head h2 { margin: 0; font-size: 17px; color: var(--navy); }
.ask-head p { margin: 2px 0 0; font-size: 12px; color: #5f6678; }
.ask-close { width: 32px; height: 32px; border: 1px solid var(--rl-line); border-radius: 8px; background: #fff;
  color: #5f6678; font-size: 18px; line-height: 1; cursor: pointer; }
.ask-offline { margin: 10px 18px 0; font-size: 12px; color: #7a4b00; background: #fdf0d5; border-radius: 8px; padding: 6px 10px; }
.ask-log { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.ask-msg { margin: 0; font-size: 14px; line-height: 1.5; }
.ask-msg.is-user { align-self: flex-end; max-width: 80%; background: var(--navy); color: #fff;
  border-radius: 12px 12px 2px 12px; padding: 9px 12px; }
.ask-msg.is-agent { display: flex; gap: 8px; align-items: flex-start; }
.ask-ai { width: 22px; height: 22px; border-radius: 6px; background: var(--ai-tint); color: var(--ai); font-size: 11px;
  font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.ask-msg.is-agent > p, .ask-body > p { margin: 0; background: #f7f8fb; border-radius: 12px; padding: 10px 12px; }
.ask-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.ask-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rl-line); border-radius: 10px;
  padding: 10px 12px; background: #fff; color: var(--ink); text-decoration: none; font: inherit; text-align: left;
  cursor: pointer; width: 100%; }
.ask-card:hover { border-color: #c9cede; text-decoration: none; }
.ask-card-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ask-card b { font-size: 13px; color: var(--navy); }
.ask-src { font-size: 11px; color: #8a90a2; }
.ask-go { color: var(--ai); font-weight: 700; }
.ask-card.is-guide { flex-direction: column; align-items: flex-start; gap: 3px; border-style: dashed; cursor: default; }
.ask-card.is-guide p { margin: 0; font-size: 12px; line-height: 1.5; color: #3a4060; }
.ask-note { font-size: 11px; color: #8a90a2; }
.ask-try-h { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #8a90a2; text-transform: uppercase; }
.ask-try { display: flex; flex-direction: column; gap: 8px; }
.ask-sugg { text-align: left; border: 1px solid var(--ai-line); background: #fff; color: var(--ai-ink); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ask-sugg:hover { background: var(--ai-tint); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 30px; }
.ask-chip { border: 1px solid var(--ai-line); background: #fff; color: var(--ai-ink); border-radius: 999px;
  padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ask-thinking { margin: 0 0 0 30px; font-size: 13px; color: #8a90a2; }
.ask-form { display: flex; gap: 8px; padding: 12px 18px 6px; border-top: 1px solid #eef0f5; }
.ask-form input { flex: 1; min-width: 0; height: 40px; border: 1px solid #c9cede; border-radius: 10px; padding: 0 12px;
  font: inherit; font-size: 14px; }
.ask-send { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ai); color: #fff; font: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; }
.ask-send.is-offline { background: var(--navy); }
.ask-send:disabled { opacity: .6; cursor: default; }
.ask-foot { margin: 0; padding: 0 18px 12px; font-size: 11px; color: #8a90a2; }

/* ---- The admin table standard (canvas B2, 2026-10-11): 15 rows in view, header frozen; the rest scroll (admin.js sets
   the exact height from the first 15 rows showing). The old 60vh cap is the fallback where the script doesn't run. ---- */
.table-scroll.table-cap15 { overflow-y: auto; }
.table-scroll.table-cap15 thead th, .table-scroll-capped thead th { position: sticky; top: 0; background: #f8fafd; z-index: 1; }
.auto-colmenu { z-index: 1200; min-width: 220px; max-width: 320px; }
.auto-colmenu .cm-foot { display: flex; justify-content: flex-end; gap: 6px; padding-top: 6px; }
th .col-menu-btn.auto-cm { font-size: inherit; letter-spacing: inherit; text-transform: inherit; }

/* "Show moved" beside the Lock (2026-10-12): an outline toggle, the Lock's height */
.rv-tbox-showmoved { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border: 1px solid #c9cede; border-radius: 8px; background: #fff; color: var(--navy, #252A59); font: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rv-tbox-showmoved:hover { border-color: var(--navy, #252A59); }
.rv-tbox-showmoved[aria-pressed="true"] { border-color: var(--navy, #252A59); background: #eef0f8; }
.rv-tbox-showmoved:disabled { opacity: .5; cursor: default; }
.rv-tbox-showmoved .rv-tbox-catn { font-weight: 500; }

/* ---- Release results in two steps (2026-10-12, canvas boards R1-R2): leaders first, then the person ---- */
.rr2-cyc { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #3a4060; }
.rr2-cyc select.modern-select { width: auto; min-width: 210px; text-transform: none; letter-spacing: 0; font-weight: 700;
  color: var(--navy); border-color: var(--navy); }
.rr2-steps { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; margin: 0 0 12px; }
.rr2-step { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--rl-line);
  border-radius: 12px; padding: 10px 14px; }
.rr2-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; }
.rr2-step-t { flex: 1; min-width: 0; }
.rr2-step-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rr2-step-h > b { font-size: .9rem; color: var(--navy); }
.rr2-step-h > span { font-size: .78rem; color: #5f6678; }
.rr2-step-h > span b { color: var(--navy); }
.rr2-step-h > span b.is-ok { color: #1a7a54; }
.rr2-step-h > span b.is-warn { color: #9a5a12; }
.rr2-step-t p { margin: 3px 0 0; font-size: .78rem; line-height: 1.45; color: #4b5164; }
.rr2-arrow { display: flex; align-items: center; justify-content: center; color: #8a90a2; }
.rr2-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rr2-show { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: .78rem; }
.rr2-show-k { font-weight: 700; color: #3a4060; margin-right: 4px; }
.rr2-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--rl-line);
  border-radius: 8px; background: #fff; color: #4b5164; text-decoration: none; }
.rr2-chip:hover { border-color: #c9cede; text-decoration: none; }
.rr2-chip.is-on { border-color: var(--navy); background: #eef1fa; color: var(--navy); }
.rr2-tbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.rr2-what { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: #3a4060; }
.rr2-what select.modern-select { width: auto; min-width: 190px; }
.rr2-table th.rr2-tick, .rr2-table td.rr2-tick { width: 34px; }
.rr2-table td.rr2-person a { display: block; text-decoration: none; }
.rr2-table td.rr2-person .muted { display: block; margin-top: 1px; }
.rr2-st { font-size: .78rem; font-weight: 700; color: #8a90a2; white-space: nowrap; }
.rr2-st.is-ok { color: #1a7a54; }
.rr2-st.is-warn { color: #9a5a12; }
.rr2-st.is-part { color: #3a4060; }
.rr2-rep { display: block; margin-top: 2px; font-size: .72rem; color: #5f6678; }
.rr2-table td.rr2-actcol { text-align: right; white-space: nowrap; }
.rr2-act { min-height: 30px; padding: 0 10px; border: 1px solid var(--navy); border-radius: 8px; background: #fff; color: var(--navy);
  font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rr2-act.is-solid { background: var(--navy); color: #fff; }
.rr2-table tr.rr2-goto > td { background: #fff7e6 !important; transition: background .3s; }
.rr2-foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  padding: 10px 12px; border: 1px solid var(--rl-line); border-radius: 12px; background: #fff; }
.rr2-sel { font-size: .84rem; font-weight: 700; color: var(--navy); }
.rr2-note { flex: 1; min-width: 120px; text-align: right; font-size: .78rem; color: #5f6678; }
.rr2-btn { min-height: 36px; padding: 0 14px; border: 1px solid var(--navy); border-radius: 8px; background: #fff; color: var(--navy);
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.rr2-btn.is-solid { background: var(--navy); color: #fff; }
.rr2-btn.is-plain { border-color: transparent; background: none; color: #4b5164; font-weight: 400; }
.rr2-btn:disabled { opacity: .45; cursor: default; }
.rr2-revoke { position: relative; }
.rr2-revmenu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; min-width: 220px; display: flex; flex-direction: column;
  padding: 6px; background: #fff; border: 1px solid var(--rl-line); border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(20,24,52,.35); }
.rr2-revmenu[hidden] { display: none; }
.rr2-revmenu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: .84rem;
  color: #1f2330; cursor: pointer; }
.rr2-revmenu button:hover, .rr2-revmenu button:focus-visible { background: #f2f4f9; }
/* the two confirmations */
.rr2-dlg .modal-card { max-width: 540px; display: flex; flex-direction: column; gap: 12px; }
.rr2-dlg .modal-card > * { margin: 0; }
.rr2-dlg .modal-card h2 { font-size: 1.15rem; color: var(--navy); line-height: 1.3; }
.rr2-dlg .rr2-kick { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3a4060; }
.rr2-dlg .rr2-msg { font-size: .86rem; line-height: 1.5; color: #3a4060; }
.rr2-dlg .rr2-small { font-size: .8rem; color: #5f6678; }
.rr2-who { border: 1px solid var(--rl-line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rr2-who > b { font-size: .84rem; color: var(--navy); }
.rr2-who > b span { font-weight: 400; color: #5f6678; }
.rr2-who-g { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: .8rem; }
.rr2-who-g dt { color: #5f6678; }
.rr2-who-g dd { margin: 0; }
.rr2-dl-k { margin: 0 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #3a4060; }
.rr2-dl-ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rl-line); border-radius: 10px; max-height: 180px; overflow-y: auto; }
.rr2-dl-ul li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; font-size: .84rem; }
.rr2-dl-ul li + li { border-top: 1px solid var(--rl-line-soft); }
.rr2-dl-ul li .m { color: #5f6678; font-size: .78rem; text-align: right; }
.rr2-held { background: #fdf6ec; border: 1px solid #f0d9b5; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rr2-held > b { font-size: .84rem; color: #8a4a12; }
.rr2-held > span { font-size: .78rem; color: #8a4a12; }
.rr2-held .rr2-dl-ul { border-color: #f0d9b5; background: #fff; }
.rr2-go { min-height: 30px; padding: 0 10px; border: 1px solid var(--navy); border-radius: 8px; background: #fff; color: var(--navy);
  font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
/* fixed widths, so the name keeps its room and nothing scrolls sideways at 1280 */
.rr2-table { table-layout: fixed; width: 100%; }
.rr2-table th:nth-child(1) { width: 36px; }
.rr2-table th:nth-child(3) { width: 118px; }
.rr2-table th:nth-child(4) { width: 104px; }
.rr2-table th:nth-child(5) { width: 120px; }
.rr2-table th:nth-child(6) { width: 116px; }
.rr2-table th:nth-child(7) { width: 124px; }
.rr2-table th:nth-child(8) { width: 160px; }
.rr2-table td { overflow-wrap: anywhere; }
.rr2-table .rr2-st { white-space: normal; }

/* What you led: the way into their people (2026-10-12, canvas board W1) */
.od-ledp { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.od-ledp-bar { height: 6px; border-radius: 4px; background: #e1e4ee; overflow: hidden; }
.od-ledp-bar > span { display: block; height: 100%; background: var(--navy); border-radius: 4px; }
.od-ledp-n { font-size: 0.76rem; color: #5f6678; }
.od-ledp-btn { align-self: stretch; }
/* What you led: the panel (2026-10-12, canvas boards W2-W5) -- wider than the record panel, a list that opens per person */
.od-drawer.is-wide { width: min(940px, 100vw); }
.od-drawer.is-wide .od-db { gap: 9px; padding-top: 12px; }
.od-led-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.od-led-tab { height: 32px; padding: 0 12px; border: 1px solid #d7dbe6; border-radius: 8px; background: #fff; color: #3a4060;
  font: inherit; font-size: 0.82rem; cursor: pointer; }
.od-led-tab.is-on { border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 700; }
.od-led-top { display: flex; flex-direction: column; gap: 7px; }
.od-led-top:empty { display: none; }
.od-led-frow, .od-led-tal { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.76rem; }
.od-led-frow > .k, .od-led-tal > .k { flex: 0 0 auto; min-width: 96px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: #3a4060; }
.od-led-strip { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.od-led-strip::-webkit-scrollbar { display: none; }
.od-led-nav { flex: none; width: 26px; height: 28px; border: 1px solid #d7dbe6; border-radius: 7px; background: #fff; color: var(--navy);
  cursor: pointer; }
.od-led-nav[hidden] { display: none; }
.od-led-nav:disabled { color: #b9bdcc; border-color: var(--rl-line); cursor: default; }
.od-led-pill { flex: none; height: 28px; padding: 0 11px; border: 1px solid #d7dbe6; border-radius: 999px; background: #fff; color: #3a4060;
  font: inherit; font-size: 0.76rem; white-space: nowrap; cursor: pointer; }
.od-led-pill .n { opacity: 0.75; }
.od-led-pill.is-on { border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 700; }
.od-led-tchip { height: 28px; padding: 0 10px; border: 1px solid var(--rl-line); border-radius: 8px; background: #fff; color: #4b5164;
  font: inherit; font-size: 0.76rem; cursor: pointer; white-space: nowrap; }
.od-led-tchip.is-on { border-color: var(--navy); background: #eef1fa; color: var(--navy); }
.od-led-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.od-led-search { flex: 0 1 260px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #d7dbe6;
  border-radius: 8px; color: #8a90a2; box-sizing: border-box; }
.od-led-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.od-led-search input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 0.82rem; outline: none; background: none; padding: 0; }
.od-led-band { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #3a4060; }
.od-led-band select { height: 34px; border: 1px solid #d7dbe6; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 0.8rem; background: #fff; }
.od-led-moved { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #3a4060; }
.od-led-moved input { width: 16px; height: 16px; margin: 0; }
.od-led-count { margin-left: auto; font-size: 0.76rem; color: #5f6678; }
.od-led-note { background: #f6f7fb; border: 1px solid var(--rl-line); border-radius: 10px; padding: 9px 12px; font-size: 0.8rem;
  line-height: 1.5; color: #3a4060; }
.od-led-hd, .od-led-line { display: grid; grid-template-columns: minmax(0, 1fr) 150px 96px 96px 128px 24px; gap: 0 10px; align-items: center; }
.od-led-hd { padding: 7px 10px; border-bottom: 1px solid var(--rl-line); background: #fafbfd; font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; color: #3a4060; }
.od-led-list { display: flex; flex-direction: column; }
.od-led-row { border-bottom: 1px solid var(--rl-line-soft); padding: 7px 10px; }
.od-led-row.is-open { background: #f6f8fd; }
.od-led-line { cursor: pointer; }
.od-led-who { min-width: 0; display: flex; flex-direction: column; }
.od-led-who b { font-size: 0.82rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-led-who .m { font-size: 0.7rem; color: #5f6678; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-led-who .r { font-size: 0.66rem; color: #8a90a2; }
.od-led-who .r.is-ok { color: #1a7a54; }
.od-led-who .r.is-you { color: var(--navy); }
.od-led-line .c { min-width: 0; font-size: 0.76rem; }
.od-led-line .mv { color: #8a90a2; }
.od-led-line .mv.is-moved { color: #9a5a12; font-weight: 600; }
.od-led-incal { display: inline-block; font-size: 0.72rem; font-weight: 700; color: #5f6678; border-radius: 999px; padding: 2px 9px;
  background: repeating-linear-gradient(135deg, #f3f4f8 0 8px, #eceef4 8px 16px); white-space: nowrap; }
.od-led-chev { border: 0; background: none; padding: 0; font-size: 0.9rem; color: #3a4060; cursor: pointer; }
.od-led-chain { margin: 8px 0 3px; border: 1px solid var(--rl-line); border-radius: 10px; padding: 8px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 6px; }
.od-led-chain[hidden] { display: none; }
.od-led-grid { display: grid; gap: 4px 8px; align-items: center; }
.od-led-grid .h { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #5f6678; }
.od-led-grid .ax { font-size: 0.74rem; font-weight: 600; color: #3a4060; }
.od-led-grid .cell { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 24px; }
.od-led-grid .cell.is-hidden { padding: 0 8px; border-radius: 6px; background: repeating-linear-gradient(135deg, #f3f4f8 0 8px, #eceef4 8px 16px); }
.od-led-grid .cell .w { font-size: 0.66rem; color: #5f6678; white-space: nowrap; }
.od-led-grid .cell .w.is-moved { color: #9a5a12; font-weight: 700; }
.od-led-grid .potential-pill.is-moved { box-shadow: 0 0 0 1.5px #d9822b; }
.od-led-why { margin: 0; border-top: 1px solid var(--rl-line-soft); padding-top: 6px; display: grid; grid-template-columns: 130px minmax(0, 1fr);
  gap: 3px 10px; font-size: 0.76rem; line-height: 1.45; }
.od-led-why dt { color: #5f6678; }
.od-led-why dd { margin: 0; color: #3a4060; }
.od-led-why dd b { color: var(--navy); }
.od-led-loading { margin: 0; font-size: 0.76rem; color: #5f6678; }
.od-led-empty { margin: 14px 0; font-size: 0.82rem; color: #5f6678; }
.od-led-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.76rem; color: #5f6678; }
.od-led-more:empty { display: none; }

/* ---- The floating AI icon (2026-10-12, canvas boards A1-A3): Ask OneHR on the dashboard, the Admin Agent on admin
   pages. White with the red spark; the name slides out on hover / focus (and once on a first visit); grey with a
   magnifier when the AI is out of reach; open, it becomes the panel's close button. ---- */
.ai-fab { position: fixed; right: 16px; bottom: 16px; z-index: 890; display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ai-fab-btn { width: 56px; height: 56px; flex: none; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--ai-line);
  background: #fff; color: var(--ai); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(20, 24, 52, .45); transition: background .15s, border-color .15s, color .15s; }
.ai-fab-spark { width: 24px; height: 24px; fill: currentColor; }
.ai-fab-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ai-fab-x { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ai-fab-lab { height: 34px; display: inline-flex; align-items: center; padding: 0 12px; box-sizing: border-box; border-radius: 999px;
  background: #fff; border: 1px solid var(--ai-line); color: var(--ai-ink); font-size: .82rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(20, 24, 52, .4); opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .15s, transform .15s; }
.ai-fab:hover .ai-fab-lab, .ai-fab:focus-visible .ai-fab-lab, .ai-fab.is-intro .ai-fab-lab, .ai-fab.is-offline .ai-fab-lab {
  opacity: 1; transform: none; }
.ai-fab:hover .ai-fab-btn, .ai-fab:focus-visible .ai-fab-btn { border-color: var(--ai); background: var(--ai-tint); }
.ai-fab:focus { outline: none; }
.ai-fab:focus-visible .ai-fab-btn { box-shadow: 0 0 0 3px rgba(214, 25, 35, .28), 0 10px 24px -10px rgba(20, 24, 52, .45); }
.ai-fab.is-offline .ai-fab-btn { border-color: #d7dbe6; color: #3a4060; }
.ai-fab.is-offline .ai-fab-lab { border-color: #d7dbe6; color: #3a4060; }
.ai-fab.is-offline:hover .ai-fab-btn, .ai-fab.is-offline:focus-visible .ai-fab-btn { background: #f4f5f9; border-color: #b9bfcf; }
.ai-fab[aria-expanded="true"] .ai-fab-btn { border-color: var(--navy); background: #fff; color: var(--navy); }
.ai-fab[aria-expanded="true"] .ai-fab-spark, .ai-fab[aria-expanded="true"] .ai-fab-ico { display: none; }
.ai-fab[aria-expanded="true"] .ai-fab-x { display: block; }
.ai-fab[aria-expanded="true"] .ai-fab-lab { display: none; }
@media (prefers-reduced-motion: reduce) { .ai-fab-lab, .ai-fab-btn { transition: none; } }
/* the icon floats over the page and moves no card (Chris, 2026-10-12: "the ask onehr icon should be floating and have
   no effect on the card alignment"): the page only gets room below its last card, so scrolled to the end nothing sits
   under it */
.od.has-fab { padding-bottom: 72px; }
/* the release page's sticky bar keeps its buttons clear of the floating Admin Agent icon (canvas board A3) */
.rr2-foot { padding-right: 84px; }

/* Stage tiles, stage bars and the lock status table (admin round 4, canvas row 1) */
.adm-stage-tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.adm-stage-tiles > .admin-card { margin: 0; }
.adm-stage-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
a.adm-stage-tile:hover { border-color: var(--navy); text-decoration: none; }
.adm-stage-tile b { font-size: 1.5rem; color: var(--navy); }
.adm-stage-tile b small { font-size: .8rem; font-weight: 600; }
.adm-stage-k { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #3a4060; }
.adm-stage-k i, .adm-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.adm-frow-pill .adm-dot { margin-right: 6px; }
.adm-stage-table th.num, .adm-stage-table td.num, .adm-locks .num { text-align: right; white-space: nowrap; }
.adm-stage-table th .adm-stage-k { justify-content: flex-end; }
.adm-stage-bar { display: flex; width: 100%; min-width: 140px; height: 10px; border-radius: 5px; overflow: hidden; background: #eceef4; }
.adm-stage-bar i { display: block; height: 100%; }
.adm-locks-head th { background: #f5f6fa; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: #5f6678; }
.adm-lock { display: inline-block; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.adm-lock.is-locked { background: #e8f5ee; color: #1a7a54; }
.adm-lock.is-open { background: #fdf3e1; color: #7a4b00; }
.adm-lock.is-closed, .adm-lock.is-any { background: #f1f2f6; color: #5f6678; }
@media (max-width: 900px) { .adm-stage-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#module-progress-table td:nth-child(4) { min-width: 150px; }
#module-progress-table .adm-stage-k b { white-space: nowrap; }

/* the admin pages' Back sits over the bottom of the sidebar: let the sidebar scroll its last entry clear of it */
.adm-side-in { padding-bottom: 72px; }
.fab-back.is-admin { left: 16px; bottom: 16px; }

/* Cycle setup (admin round 4, canvas C2-C5): the This cycle card, Edit cycle, the dates-not-set prompt, Edit all dates */
.adm-cyc2-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.adm-cyc2-head h2 { margin: 0; }
.adm-cyc2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; margin: 12px 0 0; }
.adm-cyc2-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-cyc2-grid > .is-wide { grid-column: 1 / -1; }
.adm-cyc2-grid dt { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a90a2; }
.adm-cyc2-grid dd { margin: 0; font-weight: 600; }
.adm-cyc2-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rl-line-soft); }
.adm-cyc-x { border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #5f6678; }
.adm-cyc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.adm-cyc-fields label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; }
.adm-cyc-half { border: 1px solid var(--rl-line); border-radius: 10px; padding: 8px 12px; margin: 12px 0 6px; }
.adm-cyc-half legend { font-size: .8rem; font-weight: 700; padding: 0 4px; }
.adm-nodates { border-left: 4px solid #e0a84a; }
.adm-nodates h2 { margin: 0 0 4px; }
.adm-nodates-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.adm-nodates-form label { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.adm-nodates-form .modern-select { width: auto; }
.adm-win-period { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.adm-win-period > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.adm-win-move { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.win-group th { background: #f5f6fa; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: #3a4060; }
.win-group .adm-side-sq { margin-right: 8px; vertical-align: -1px; }
.win-row .win-err { display: block; font-size: .78rem; font-weight: 700; color: #c0392b; }
.win-row.is-bad input[type=datetime-local] { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b inset; }
.win-row.is-unused td { color: #8a90a2; background: #fafbfc; }
@media (max-width: 900px) { .adm-cyc2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-cyc-fields { grid-template-columns: 1fr; } }
.adm-freeze-tick { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #fdf0d5; }
.adm-cal-bar.is-unused { background: repeating-linear-gradient(135deg, #f1f2f6 0 6px, #fafbfc 6px 12px) !important; color: #8a90a2 !important; border-color: #e2e5ee !important; }
.adm-cyc-half .radio-line { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 4px 0; font-weight: 400; }
.adm-cyc-half .radio-line input { margin: 0; flex: none; width: auto; }

/* The roster import in one step (admin round 4, canvas D4) */
.ri-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; padding: 0; }
.ri-steps li { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--rl-line); background: #fff; font-size: .82rem; color: #5f6678; }
.ri-steps li b { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #8a90a2; }
.ri-steps li.is-on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); color: #1f2330; }
.ri-steps li.is-on b, .ri-steps li.is-done b { color: var(--navy); }
.ri-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.ri-tile { display: flex; flex-direction: column; min-width: 120px; padding: 10px 14px; border-radius: 10px; background: #f8f9fc; border-left: 4px solid var(--c); }
.ri-tile b { font-size: 1.35rem; color: #1f2330; }
.ri-tile span { font-size: .8rem; color: #5f6678; }
.ri-errs, .ri-chg { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rl-line-soft); }
.ri-errs h3, .ri-chg h3 { margin: 0; font-size: .95rem; }
.ri-fields { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 10px; padding: 0; font-size: .86rem; }
.ri-apply { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; }
/* the quality step (canvas D5): a verdict, what can't be imported by kind, what's worth a look and why */
.ri-verdict { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 12px 16px; border-radius: 10px;
  border: 1px solid; }
.ri-verdict.is-bad { background: #fbecea; border-color: #f0c9c5; }
.ri-verdict.is-warn { background: #fdf6e8; border-color: #f1dcb1; }
.ri-verdict.is-ok { background: #e9f5f0; border-color: #c4e3d6; }
.ri-verdict-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; }
.ri-verdict.is-bad .ri-verdict-ic { background: #c0473f; }
.ri-verdict.is-warn .ri-verdict-ic { background: #c98a16; }
.ri-verdict.is-ok .ri-verdict-ic { background: #1a7a54; }
.ri-verdict-t { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; color: #3b4150; }
.ri-verdict-t b { color: #1f2330; font-size: .95rem; }
.ri-verdict .adm-rep-dl { flex: none; }
.ri-errs h3 .muted, .ri-chg h3 .muted { font-weight: 400; }
.ri-fix { list-style: none; margin: 8px 0 0; padding: 0; }
.ri-fix li { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 260px); gap: 12px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid #eef0f5; font-size: .88rem; }
.ri-fix li:first-child { border-top: 0; }
.ri-fix li b { color: #b23a32; text-align: right; }
.ri-look { margin-top: 8px; }
.ri-look td { vertical-align: top; }
.ri-look-n { display: inline-block; min-width: 22px; color: #9a6100; }
.ri-look-dl { white-space: nowrap; text-align: right; }
.ri-look-a { font-size: .82rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.ri-look-a:hover { text-decoration: underline; }
.ri-check button.primary:disabled { opacity: .45; cursor: not-allowed; }
.ri-go { border-top: 1px solid var(--rl-line-soft); padding-top: 14px; }
.ri-ack { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: #1f2330; }
.ri-head-acts { display: inline-flex; gap: 14px; }

/* People picker; Details card; Data integrity fixes (admin round 4, canvas D2/D3) */
.pick { position: relative; display: inline-flex; flex: 1 1 220px; min-width: 200px; }
.pick .pick-q { width: 100%; }
.pick-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 950; min-width: 100%; width: max-content; max-width: 420px; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #d7dbe6; border-radius: 10px; box-shadow: 0 10px 28px rgba(31,35,48,.16); }
.pick-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: .85rem; }
.pick-list li span { color: #5f6678; font-size: .78rem; }
.pick-list li small { flex-basis: 100%; color: #5f6678; font-size: .76rem; }
.pick-list li.is-on, .pick-list li:hover { background: #eef1fa; }
.pick-list li.pick-none { color: #8a90a2; cursor: default; }
.pp-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 8px 0 0; }
.pp-dl dt { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a90a2; }
.pp-dl dd { margin: 0; font-weight: 600; font-size: .9rem; }
.pp-det-form { display: grid; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rl-line-soft); }
.pp-det-form label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 600; }
.dc-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20; }
.dc-bulk label { display: flex; align-items: center; gap: 8px; font-size: .86rem; flex: 1 1 420px; }
.dc-row-fix { display: flex; align-items: center; gap: 8px; min-width: 280px; }
.pp-det-form input:not([type=checkbox]):not([type=radio]) { height: 34px; border: 1px solid #c9cede; border-radius: 8px; padding: 0 10px; font: inherit; }
.pp-change .pp-inline { flex-wrap: wrap; }

/* Org structure as one table (admin round 4, canvas O2-O4) */
.org-find { height: 34px; border: 1px solid #c9cede; border-radius: 8px; padding: 0 10px; min-width: 200px; }
.org-table .num { text-align: right; white-space: nowrap; }
.org-table tr.org-g th, .org-table tr.org-g td { background: #fafbfd; font-weight: 700; }
.org-table tr.org-u th { padding-left: 34px; font-weight: 500; }
.org-table tr.org-edit td { background: #f5f6fa; }
.org-none { color: #8f3630; font-weight: 700; font-size: .85rem; }
.org-menu { position: relative; display: inline-block; }
.org-menu > summary { list-style: none; cursor: pointer; width: 32px; height: 28px; border: 1px solid #d7dbe6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #3a4060; }
.org-menu > summary::-webkit-details-marker { display: none; }
.org-menu[open] > summary { border-color: var(--navy); }
.org-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; background: #fff; border: 1px solid #d7dbe6; border-radius: 10px; box-shadow: 0 10px 28px rgba(31,35,48,.16); padding: 4px; display: flex; flex-direction: column; }
.org-pop button, .org-pop a { text-align: left; border: 0; background: none; font: inherit; font-size: .86rem; padding: 7px 10px; border-radius: 7px; color: #1f2330; text-decoration: none; cursor: pointer; width: 100%; }
.org-pop button:hover, .org-pop a:hover { background: #eef1fa; text-decoration: none; }
.org-pop form { margin: 0; }
.org-pop .danger-link { color: #8f3630; }
.org-none { white-space: nowrap; }

/* A BU CEO of several units: one pill per unit on the calibration card (admin round 4, canvas B3) */
.rv-cal-units { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.rv-cal-units-lbl { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a90a2; margin-right: 4px; }
.rv-cal-unit { display: inline-flex; flex-direction: column; gap: 1px; padding: 6px 12px; border: 1px solid #d7dbe6; border-radius: 10px; background: #fff; color: #1f2330; text-decoration: none; font-size: .82rem; }
.rv-cal-unit span { font-size: .74rem; color: #5f6678; }
.rv-cal-unit:hover { border-color: var(--navy); text-decoration: none; }
.rv-cal-unit.is-on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #eef1fa; }
.rv-cal-unit.is-locked span { color: #1a7a54; }

/* Units calibrated together (admin round 4, row 6) */
.adm-join h2, .adm-join + .admin-card h2 { margin: 0 0 10px; font-size: 1rem; }
.adm-join-tbl .adm-join-tick { width: 34px; text-align: center; }
.adm-join-tbl tr.is-off th, .adm-join-tbl tr.is-off td { color: #8a90a2; }
.adm-join-why { display: block; font-weight: 400; }
.adm-join-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 6px; }
.adm-join-who select.modern-select { width: auto; min-width: 280px; max-width: 100%; }
.adm-join-notes { margin: 8px 0 0; padding-left: 18px; }
.adm-join-acts { display: flex; justify-content: flex-end; margin-top: 10px; }
.adm-joined { list-style: none; margin: 0; padding: 0; }
.adm-joined li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid #eef0f5; }
.adm-joined li:first-child { border-top: 0; }
.adm-joined-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* units calibrated together (row 6): the business unit row on its own line above the department row */
.rv-cal-filter { flex-wrap: wrap; }
.rv-cal-filter > .rv-cal-unitrow { flex: 1 0 100%; min-width: 0; }

/* The Group Chief's 9-box on the group card (admin round 4, row 7): your calls on both axes, a box filters the list */
.rv-grp-9 { display: grid; grid-template-columns: 56px repeat(3, minmax(0, 1fr)); gap: 4px; margin: 6px 0 10px; }
.rv-grp-9y { align-self: center; font-size: 11px; font-weight: 700; color: #5b6275; text-transform: uppercase; letter-spacing: .04em; }
.rv-grp-9x { text-align: center; font-size: 11px; color: #5b6275; }
.rv-grp-9c { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 6px 8px; border: 1px solid #e4e7ef;
  border-radius: 8px; background: #fff; font: inherit; font-size: 12px; color: #1f2433; cursor: pointer; text-align: left; }
.rv-grp-9c b { font-size: 15px; }
.rv-grp-9c span { color: #5b6275; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-grp-9c.is-empty { color: #9aa0b0; background: #fafbfd; }
.rv-grp-9c:hover { border-color: #9aa3b8; }
.rv-grp-9c.is-on { border: 2px solid #1b2a5c; padding: 5px 7px; background: #f3f5fb; }
.rv-grp-potsel { margin-left: 2px; }

/* People > Users: an Excel-style menu on the Unit and Department columns (admin round 4, row 8) */
.adm-colf { position: relative; display: inline-block; }
.adm-colf > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 4px; align-items: center;
  padding: 2px 6px; margin: -2px -6px; border-radius: 6px; }
.adm-colf > summary::-webkit-details-marker { display: none; }
.adm-colf > summary:hover, .adm-colf[open] > summary { background: #eef1fa; color: #1b2a5c; }
.adm-colf.is-on > summary { color: #1b2a5c; font-weight: 700; }
.adm-colf-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: -6px; width: 300px; background: #fff;
  border: 1px solid #d6dae5; border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 28, 60, .14); padding: 10px;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: #1f2433; }
.adm-colf-q { width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 6px 8px; border: 1px solid #c9cede;
  border-radius: 8px; font: inherit; font-size: 13px; }
.adm-colf-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.adm-colf-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center;
  padding: 4px 2px; font-size: 13px; cursor: pointer; }
.adm-colf-opt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-colf-opt b { font-weight: 500; color: #5b6275; font-size: 12px; }
.adm-colf-acts { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
.adm-roles { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-role.is-lm { background: #eef1fa; color: #252a59; }
.adm-role.is-hod { background: #e2f3f4; color: #0f6a73; }
.adm-role.is-bu { background: #f1eafa; color: #5b2f96; }
.adm-role.is-bg { background: #fdf3e1; color: #7a4b00; }
.adm-role.is-gc { background: #fbecea; color: #8f3630; }
.adm-colf-opt[hidden] { display: none; }
.pp-role.is-gc { background: #fbecea; color: #8f3630; }

/* the roster check's role changes (admin round 4, row 8) */
.ri-seat-list { list-style: none; margin: 0; padding: 0; }
.ri-seat-list li { padding: 6px 0; border-top: 1px solid #eef0f5; font-size: 13px; }
.ri-seat-list li:first-child { border-top: 0; }
.ri-seat-tag { display: inline-block; min-width: 76px; text-align: center; margin-right: 8px; padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700; }
.ri-seat-tag.is-add { background: #e6f4ef; color: #1a6a52; }
.ri-seat-tag.is-swap { background: #fdf3e1; color: #7a4b00; }
.ri-seat-tag.is-take { background: #fbecea; color: #8f3630; }
.ri-seat-note { color: #7a4b00; }

/* =========================================================================
   Sign-in, forgot password and reset (redesigned 2026-10-15, the canvas "OneHR AI+ Sign-in", in Chin Hin's brand
   guide: Chin Hin Blue #282460, Chin Hin Red #DF1E26, white, Aptos, the Infinite Sail stripes). Committing buttons
   navy; red only for the mark and what's wrong. Prefix ax-.
   ========================================================================= */
.ax { --ax-blue: #282460; --ax-red: #DF1E26; --ax-ink: #212322; --ax-body: #3F4244; --ax-muted: #55585A;
  --ax-line: #C2C4CC; --ax-soft: #F3F4F9;
  min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; background: #fff;
  font-family: Aptos, "Aptos Display", "Segoe UI", Arial, Helvetica, sans-serif; color: var(--ax-ink); }
.ax [hidden], .ax-modal[hidden], .ax-modal [hidden] { display: none !important; }
.ax a, .ax-modal a { color: var(--ax-blue); }
.ax a:hover, .ax-modal a:hover { color: var(--ax-red); }
.ax-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -- the brand panel -- */
.ax-brand { flex: 1 1 480px; min-width: 0; position: relative; overflow: hidden; background: var(--ax-blue); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 64px; }
.ax-sail { position: absolute; transform: skewX(-32deg); pointer-events: none; }
.ax-sail-1 { right: -140px; top: 96px; width: 620px; height: 240px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 2px, transparent 2px 10px); }
.ax-sail-2 { right: -60px; top: 300px; width: 460px; height: 170px;
  background: repeating-linear-gradient(180deg, rgba(150,148,230,.30) 0 2px, transparent 2px 10px); }
.ax-lockup { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ax-lockup-sq { width: 14px; height: 14px; background: var(--ax-red); border-radius: 3px; }
.ax-lockup-name { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.ax-lockup-by { font-size: 14px; color: #C9CBE6; }
.ax-aiplus { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #fff;
  color: var(--ax-red); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.ax-brand-body { position: relative; display: flex; flex-direction: column; gap: 24px; max-width: 520px; }
.ax-headline { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.ax-lede { margin: 0; font-size: 18px; line-height: 1.55; color: #DADCF0; }
.ax-tagline { position: relative; margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #B4B6DD; }
.ax-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #E6E7F5; }
.ax-points li { display: flex; align-items: center; gap: 12px; }
.ax-points svg { flex: none; color: #fff; }

/* the assistant card: one 12-second loop, every bubble holds its place (opacity only), so nothing jumps */
.ax-demo { margin: 0; max-width: 440px; background: #fff; color: var(--ax-ink); border-radius: 16px; padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 40px rgba(10,10,40,.30); }
.ax-demo-head { display: flex; align-items: center; gap: 10px; }
.ax-spark-tile { width: 28px; height: 28px; border-radius: 8px; background: var(--ax-red); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none; }
.ax-demo-name { font-size: 13px; font-weight: 700; color: var(--ax-blue); }
.ax-demo-pause { margin: -8px -10px -8px auto; width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  border-radius: 10px; color: var(--ax-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ax-demo-pause:hover { background: var(--ax-soft); color: var(--ax-blue); }
.ax-demo-pause .ax-ico-play { display: none; }
.ax-demo.is-paused .ax-ico-play { display: block; }
.ax-demo.is-paused .ax-ico-pause { display: none; }
.ax-demo-feed { display: flex; flex-direction: column; gap: 9px; }
.ax-demo-step { display: flex; flex-direction: column; gap: 8px; }
.ax-bub { margin: 0; align-self: flex-start; max-width: 88%; background: var(--ax-soft); border-radius: 12px 12px 12px 4px;
  padding: 8px 12px; font-size: 13.5px; line-height: 1.45; }
.ax-bub-me { align-self: flex-end; background: var(--ax-blue); color: #fff; border-radius: 12px 12px 4px 12px; }
.ax-bub-done { justify-self: stretch; max-width: none; display: flex; flex-direction: column; gap: 6px; }
.ax-done-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ax-blue); }
.ax-done-row span { display: inline-flex; align-items: center; gap: 6px; }
.ax-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ax-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ax-blue); background: #fff; color: var(--ax-blue);
  font-size: 12.5px; font-weight: 600; }
.ax-chip-quiet { border-color: #C9CBD3; color: var(--ax-body); }
.ax-slot { display: grid; }
.ax-slot > * { grid-area: 1 / 1; }
.ax-typing { align-self: start; justify-self: start; opacity: 0; display: inline-flex; gap: 4px; background: var(--ax-soft);
  border-radius: 12px; padding: 12px 14px; }
.ax-dot { width: 6px; height: 6px; border-radius: 999px; background: #6B6E80; }
@keyframes axIn1 { 0% { opacity: 0; transform: translateY(6px); } 4% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes axIn2 { 0%, 18% { opacity: 0; transform: translateY(6px); } 21% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes axT3 { 0%, 24% { opacity: 0; } 26%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes axIn3 { 0%, 36% { opacity: 0; transform: translateY(6px); } 39% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes axT5 { 0%, 50% { opacity: 0; } 52%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes axIn5 { 0%, 62% { opacity: 0; transform: translateY(6px); } 65% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes axTap { 0%, 14% { background: #fff; color: #282460; } 16%, 92% { background: #282460; color: #fff; } 97%, 100% { background: #fff; color: #282460; } }
@keyframes axDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ax-a1 { animation: axIn1 12s infinite; }
.ax-a2 { animation: axIn2 12s infinite; }
.ax-t3 { animation: axT3 12s infinite; }
.ax-a3 { animation: axIn3 12s infinite; }
.ax-t5 { animation: axT5 12s infinite; }
.ax-a5 { animation: axIn5 12s infinite; }
.ax-tap { animation: axTap 12s infinite; }
.ax-dot { animation: axDot 1.2s infinite; }
.ax-dot2 { animation-delay: .2s; }
.ax-dot3 { animation-delay: .4s; }
.ax-demo.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .ax-demo * { animation: none !important; }
  .ax-demo .ax-typing { opacity: 0 !important; }
  .ax-demo .ax-tap { background: #282460; color: #fff; }
  .ax-demo-pause { display: none; }
}

/* -- the form side -- */
.ax-main { flex: 1 1 420px; min-width: 0; background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 48px 32px; }
.ax-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 24px; }
.ax-head { display: flex; flex-direction: column; gap: 8px; }
.ax-h { margin: 0; font-size: 34px; font-weight: 700; color: var(--ax-blue); letter-spacing: -0.015em; line-height: 1.15; }
.ax-sub { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ax-muted); }
.ax-tile { width: 48px; height: 48px; border-radius: 12px; background: #ECECF8; color: var(--ax-blue);
  display: flex; align-items: center; justify-content: center; flex: none; }
.ax-form { display: flex; flex-direction: column; gap: 18px; }
.ax-field { display: flex; flex-direction: column; gap: 8px; }
.ax-field label { font-size: 14px; font-weight: 600; color: var(--ax-ink); }
.ax-field input { width: 100%; height: 48px; margin: 0; border: 1px solid var(--ax-line); border-radius: 10px; padding: 0 14px;
  font-size: 16px; font-family: inherit; color: var(--ax-ink); background: #fff; box-shadow: none; }
.ax-field .pw-field > input { padding-right: 52px; }
.ax-field input:focus-visible { outline: none; border-color: var(--ax-blue); box-shadow: 0 0 0 3px rgba(40,36,96,.22); }
.ax-field input[aria-invalid="true"] { border-color: #B3141B; }
.ax-field .pw-field .pw-toggle { right: 2px; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 8px;
  color: var(--ax-muted); }
.ax-field .pw-field .pw-toggle:hover { background: var(--ax-soft); color: var(--ax-blue); }
.ax-err { margin: -6px 0 0; font-size: 14px; color: #8F1016; }
.ax-small { margin: -4px 0 0; font-size: 13px; color: var(--ax-muted); }
.ax-btn, a.ax-btn { height: 50px; margin: 0; padding: 0 22px; border: 0; border-radius: 10px; background: var(--ax-blue); color: #fff;
  font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; transition: background .15s; }
.ax-form > .ax-btn { width: 100%; margin-top: 4px; }
.ax-btn:hover, a.ax-btn:hover { background: #1C1A47; color: #fff; text-decoration: none; }
.ax-btn:focus-visible { outline: 3px solid #8E8CD8; outline-offset: 2px; box-shadow: none; }
.ax-btn[disabled] { opacity: .6; cursor: progress; }
.ax-btn-quiet, a.ax-btn-quiet { background: #fff; color: var(--ax-blue); border: 1px solid var(--ax-line); font-weight: 600; }
.ax-btn-quiet:hover, a.ax-btn-quiet:hover { background: var(--ax-soft); color: var(--ax-blue); }
.ax-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: -4px; }
.ax-links a { padding: 8px 0; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ax-linkbtn { margin: 0; border: 0; background: transparent; padding: 8px 0; font-size: 15px; font-family: inherit; color: var(--ax-body);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ax-linkbtn:hover { color: var(--ax-blue); }
.ax-linkbtn[aria-expanded="true"] { color: var(--ax-blue); font-weight: 600; }
.ax-first { margin-top: -10px; background: var(--ax-soft); border: 1px solid #E1E3EE; border-radius: 12px; padding: 14px 16px; }
.ax-first p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ax-ink); }
.ax-first code { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 1px solid #E1E3EE; border-radius: 6px;
  padding: 1px 6px; font-size: 0.92em; }
.ax-foot { margin: 0; font-size: 14px; color: var(--ax-muted); border-top: 1px solid #ECEDF2; padding-top: 18px; }
.ax-alert { display: flex; gap: 12px; align-items: flex-start; background: #FDF1F1; border: 1px solid #F2C1C3; border-radius: 12px;
  padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--ax-ink); }
.ax-alert > svg { flex: none; margin-top: 1px; color: #B3141B; }
.ax-alert > div { display: flex; flex-direction: column; gap: 4px; }
.ax-alert strong { color: #8F1016; }
.ax-alert p { margin: 0; }
.ax-alert-link { align-self: flex-start; padding: 4px 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ax-note { display: flex; gap: 10px; align-items: flex-start; background: #EEF7F1; border: 1px solid #BFE2CC; border-radius: 12px;
  padding: 12px 16px; font-size: 14px; line-height: 1.5; color: #1D5A36; }
.ax-note > svg { flex: none; margin-top: 1px; }
.ax-note p { margin: 0; }
.ax-info { margin: 0; padding: 14px 16px; list-style: none; background: var(--ax-soft); border-radius: 12px; display: flex;
  flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ax-body); }
.ax-info li { display: flex; gap: 10px; align-items: flex-start; }
.ax-info svg { flex: none; margin-top: 2px; color: var(--ax-blue); }
.ax-dev { background: #FFF7E6; border: 1px solid #F0D49A; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5;
  color: #6A4A00; word-break: break-all; display: flex; flex-direction: column; gap: 4px; }
.ax-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.ax-actions-start { justify-content: flex-start; }
.ax-rules { margin: -4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px;
  color: var(--ax-body); }
.ax-rules li { display: flex; align-items: center; gap: 10px; }
.ax-rule-dot { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--ax-line); color: transparent; flex: none;
  display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.ax-rules li.is-met .ax-rule-dot { background: var(--ax-blue); border-color: var(--ax-blue); color: #fff; }
.ax-rules li.is-met { color: var(--ax-ink); }
.ax-rules li.is-bad { color: #8F1016; }
.ax-rules li.is-bad .ax-rule-dot { border-color: #B3141B; }

/* -- the forgot-password pop-out -- */
body.ax-modal-open { overflow: hidden; }
.ax-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(18,18,52,.55); display: flex; align-items: center;
  justify-content: center; padding: 24px; font-family: Aptos, "Aptos Display", "Segoe UI", Arial, Helvetica, sans-serif;
  color: #212322; animation: axFade .16s ease-out; }
.ax-dialog { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff;
  border-radius: 16px; box-shadow: 0 28px 70px rgba(10,10,40,.40); padding: 32px; animation: axRise .18s ease-out;
  --ax-blue: #282460; --ax-red: #DF1E26; --ax-ink: #212322; --ax-body: #3F4244; --ax-muted: #55585A; --ax-line: #C2C4CC;
  --ax-soft: #F3F4F9; }
.ax-pane { display: flex; flex-direction: column; gap: 20px; }
.ax-dhead { display: flex; flex-direction: column; gap: 8px; padding-right: 28px; }
.ax-dhead h2 { margin: 0; font-size: 24px; font-weight: 700; color: var(--ax-blue); line-height: 1.2; }
.ax-dhead h2:focus { outline: none; }
.ax-dhead p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ax-body); }
.ax-dialog .ax-tile { width: 44px; height: 44px; }
.ax-dialog .ax-form { gap: 16px; }
.ax-dialog .ax-actions { margin-top: 4px; }
.ax-dialog .ax-btn { height: 48px; font-size: 15px; }
.ax-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent;
  border-radius: 10px; color: var(--ax-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ax-x:hover { background: var(--ax-soft); color: var(--ax-blue); }
@keyframes axFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes axRise { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ax-modal, .ax-dialog { animation: none; } }

/* a shorter laptop screen: the panel tightens so the page fits without scrolling */
@media (max-height: 860px) and (min-width: 901px) {
  .ax-brand { padding: 36px 56px; gap: 24px; }
  .ax-brand-body { gap: 18px; }
  .ax-headline { font-size: 38px; }
  .ax-lede { font-size: 16px; }
  .ax-main { padding: 36px 32px; }
}
/* narrower desktops: the panel's text steps down so the assistant still fits beside the form */
@media (max-width: 1180px) and (min-width: 901px) {
  .ax-brand { padding-left: 48px; padding-right: 48px; }
  .ax-headline { font-size: 34px; }
  .ax-lede { font-size: 15.5px; }
  .ax-bub { font-size: 13px; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .ax-lede { display: none; }
}
/* below 900px the two halves stack: a compact brand strip, then the form straight after it */
@media (max-width: 900px) {
  .ax { flex-direction: column; flex-wrap: nowrap; }
  .ax-brand { flex: none; padding: 28px 24px; gap: 16px; }
  .ax-brand-body { gap: 0; }
  .ax-headline { font-size: 26px; }
  .ax-lede, .ax-extra, .ax-tagline { display: none; }
  .ax-main { flex: 1 1 auto; align-items: flex-start; padding: 36px 24px 56px; }
}