/* =============================================================================
   HrChronicle - Harbor primitives (packet admin-harbor-retrofit A1, 2026-08-01)
   Ported from design/prototypes/harbor/harbor.css (LOCKED prototype).
   Semantic-tokens-only per DesignTokenTests (no --hrc-p-* primitive refs).

   What this file ships:
     .hrc-page-head     - two-line title block + right-aligned actions
     .hrc-hero          - record hero (avatar + name/meta + right actions)
     .hrc-subtabs       - horizontal tab strip for one-record sections
     .hrc-card          - the section container (head/title/sub/actions/body/foot)
     .hrc-two-col       - main + sidebar grid, container-driven reflow
     .hrc-stack         - vertical stack of cards
     .hrc-dl            - definition-list rows (label / value / edit)
     .hrc-alert-tile    - attention-grabbing card (warn/crit/info)
     .hrc-pill          - status pill (ok/warn/crit/mute/info/admin)
     .hrc-info-row      - label/value row for compact side-card widgets
     .hrc-feed          - vertical timeline (title / sub)

   What it does NOT ship (yet):
     - .hrc-btn / --ghost / --sm  -> lives in forms.css beside .hrc-button (additive there)
     - .hrc-grid / table          -> lives in datagrid.css (unchanged)
     - .hrc-empty / .hrc-alert    -> already in feedback.css / forms.css (unchanged)

   Naming: HrChronicle BEM-flavoured. Harbor's short names (.hero, .card, .btn) are
   prototype-only; renaming the library would break every HrChronicle.Web consumer,
   which is a non-goal of this packet.

   All rules reference SEMANTIC tokens only. If a value is not in tokens.css, add
   it to tokens.css (semantic tier), not here.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   §1  PAGE HEAD - the two-line title block that opens an inner page.
   -------------------------------------------------------------------------- */
.hrc-page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--hrc-space-md);
  flex-wrap: wrap;
}

.hrc-page-head__text {
  min-inline-size: 0;
  /* Packet P8.1 (2026-08-08 fix): flex:1 so the title/description block fills the
     available inline space between the page-start and the Actions slot. Without
     this, .hrc-page-head__text sits at its content width and long descriptions
     wrap to 3-4 lines despite empty space to the right - MYS 2026-08-08. */
  flex: 1 1 auto;
}

.hrc-page-head__title {
  font-size: var(--hrc-text-xl);
  font-weight: var(--hrc-weight-semibold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--hrc-ink);
  line-height: var(--hrc-leading-tight);
}

.hrc-page-head__sub {
  font-size: var(--hrc-text-sm);
  color: var(--hrc-ink-subtle);
  margin: var(--hrc-space-2xs) 0 0;
  /* Packet P8.1 (2026-08-08): dropped the 66ch cap. On wide viewports the
     description was wrapping to 3-4 lines despite empty horizontal space to the
     right of the Actions slot. Let the flex parent's gap constraint decide the
     wrap point instead of a fixed measure. */
  line-height: var(--hrc-leading-loose);
}

.hrc-page-head__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--hrc-space-xs);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   §2  HERO - the record hero band (tenant profile, employee profile, etc.).
   The avatar / body / actions triad; body carries the name row and meta row.
   -------------------------------------------------------------------------- */
.hrc-hero {
  background: var(--hrc-surface);
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius);
  box-shadow: var(--hrc-shadow);
  padding: var(--hrc-space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--hrc-space-md);
  flex-wrap: wrap;
}

.hrc-hero__avatar {
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: var(--hrc-accent-soft);
  color: var(--hrc-accent);
  display: grid;
  place-items: center;
  font-size: var(--hrc-text-lg);
  font-weight: var(--hrc-weight-semibold);
  flex: none;
  letter-spacing: 0.02em;
}

.hrc-hero__body {
  min-inline-size: 0;
  flex: 1;
}

.hrc-hero__name {
  font-size: var(--hrc-text-xl);
  font-weight: var(--hrc-weight-semibold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--hrc-ink);
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hrc-space-xs);
}

.hrc-hero__alt {
  font-size: var(--hrc-text-sm);
  font-weight: var(--hrc-weight-medium);
  color: var(--hrc-ink-subtle);
  white-space: nowrap;
}

.hrc-hero__meta {
  font-size: var(--hrc-text-sm);
  color: var(--hrc-ink-muted);
  margin: var(--hrc-space-xs) 0 0;
  display: flex;
  align-items: center;
  gap: var(--hrc-space-sm);
  flex-wrap: wrap;
}

.hrc-hero__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--hrc-space-2xs);
  min-inline-size: 0;
}

.hrc-hero__meta svg {
  inline-size: 14px;
  block-size: 14px;
  opacity: 0.65;
  flex: none;
}

.hrc-hero__actions {
  display: flex;
  gap: var(--hrc-space-xs);
  flex-wrap: wrap;
  margin-inline-start: auto;
}

/* -----------------------------------------------------------------------------
   §3  SUBTABS - horizontal tab strip for one-record sections.
   Scroll-snap so overflow at narrow widths still lands on a tab. No dropdown
   fallback: Harbor decision - horizontal scroll is honest, a hidden menu is not.
   -------------------------------------------------------------------------- */
.hrc-subtabs__wrap {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--hrc-z-sticky);
  background: var(--hrc-canvas);
  border-block-end: 1px solid var(--hrc-border);
  display: flex;
  align-items: stretch;
}

.hrc-subtabs__nav {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  flex: none;
  background: var(--hrc-canvas);
  color: var(--hrc-ink-muted);
  border: 0;
  cursor: pointer;
  padding: 0;
}

.hrc-subtabs__nav svg {
  inline-size: 16px;
  block-size: 16px;
}

.hrc-subtabs__nav:hover {
  color: var(--hrc-accent);
  background: var(--hrc-surface-hover);
}

.hrc-subtabs__nav:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: -3px;
  border-radius: var(--hrc-radius-xs);
}

.hrc-subtabs__wrap[data-can-prev="true"] .hrc-subtabs__nav--prev { display: flex; }
.hrc-subtabs__wrap[data-can-next="true"] .hrc-subtabs__nav--next { display: flex; }

.hrc-subtabs {
  display: flex;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 12px;
  scroll-behavior: smooth;
  flex: 1;
  min-inline-size: 0;
}

.hrc-subtabs::-webkit-scrollbar { display: none; }

.hrc-subtab {
  display: inline-flex;
  align-items: center;
  gap: var(--hrc-space-2xs);
  padding: 0 var(--hrc-space-md);
  block-size: 44px;
  font: inherit;
  font-size: var(--hrc-text-sm);
  font-weight: var(--hrc-weight-medium);
  color: var(--hrc-ink-subtle);
  background: none;
  border: 0;
  border-block-end: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  flex: none;
}

.hrc-subtab:hover { color: var(--hrc-ink); }

.hrc-subtab[aria-current="page"],
.hrc-subtab[aria-selected="true"] {
  color: var(--hrc-accent);
  border-block-end-color: var(--hrc-accent);
  font-weight: var(--hrc-weight-semibold);
}

.hrc-subtab:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: -3px;
  border-radius: var(--hrc-radius-xs);
}

.hrc-subtab svg {
  inline-size: 15px;
  block-size: 15px;
  opacity: 0.75;
}

.hrc-subtab__count {
  font-size: var(--hrc-text-xs);
  font-weight: var(--hrc-weight-semibold);
  color: var(--hrc-ink-subtle);
  background: var(--hrc-neutral-soft);
  padding: 1px 7px;
  border-radius: var(--hrc-radius-pill);
}

.hrc-subtab[aria-current="page"] .hrc-subtab__count {
  background: var(--hrc-accent-soft);
  color: var(--hrc-accent);
}

/* -----------------------------------------------------------------------------
   §4  CARD - the primitive container for page sections. Head/title/sub/actions
   in one row; body carries content; foot for a trailing action row. --flow
   allows popovers to escape the overflow clip (only when needed).
   -------------------------------------------------------------------------- */
.hrc-card {
  background: var(--hrc-surface);
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius);
  box-shadow: var(--hrc-shadow);
  overflow: hidden;
}

.hrc-card--flow { overflow: visible; }

.hrc-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hrc-space-sm);
  padding: var(--hrc-space-sm) var(--hrc-density-pad);
  border-block-end: 1px solid var(--hrc-border);
}

.hrc-card__title {
  font-size: var(--hrc-text-lg);
  font-weight: var(--hrc-weight-semibold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--hrc-ink);
}

.hrc-card__sub {
  font-size: var(--hrc-text-xs);
  color: var(--hrc-ink-subtle);
  margin: 2px 0 0;
}

.hrc-card__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--hrc-space-xs);
  flex-wrap: wrap;
}

.hrc-card__body { padding: var(--hrc-density-pad); }
.hrc-card__body--flush { padding: 0; }

.hrc-card__foot {
  padding: var(--hrc-space-sm) var(--hrc-density-pad);
  border-block-start: 1px solid var(--hrc-border);
  display: flex;
  align-items: center;
  gap: var(--hrc-space-sm);
}

/* -----------------------------------------------------------------------------
   §5  TWO-COL and STACK - layout primitives for record pages.
   .hrc-two-col reflows on its CONTAINER (not the viewport) so it stays honest
   inside dialogs and split panes.
   -------------------------------------------------------------------------- */
.hrc-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--hrc-density-gap);
  align-items: start;
  container-type: inline-size;
}

@container (max-width: 900px) {
  .hrc-two-col { grid-template-columns: minmax(0, 1fr); }
}

.hrc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hrc-density-gap);
  min-inline-size: 0;
}

.hrc-stack--tight {
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-xs);
  min-inline-size: 0;
}

/* -----------------------------------------------------------------------------
   §6  DL - row-based key/value list with per-row edit. THE pattern for record
   detail cards (Tenant profile, Entitlements, Personal info, Bank info, etc.).
   Reflows on the CONTAINER: at narrow widths, label and value stack.
   -------------------------------------------------------------------------- */
.hrc-dl {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  align-items: center;
  row-gap: 0;
  column-gap: var(--hrc-space-md);
  container-type: inline-size;
}

.hrc-dl__row { display: contents; }
.hrc-dl__row > * {
  padding: var(--hrc-space-sm) 0;
  border-block-end: 1px solid var(--hrc-border);
}
.hrc-dl__row:last-child > * { border-block-end: 0; }

.hrc-dl__label {
  color: var(--hrc-ink-subtle);
  font-size: var(--hrc-text-sm);
  font-weight: var(--hrc-weight-medium);
}

.hrc-dl__value {
  color: var(--hrc-ink);
  font-size: var(--hrc-text-sm);
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--hrc-space-xs);
  flex-wrap: wrap;
}

.hrc-dl__value--muted {
  color: var(--hrc-ink-subtle);
  font-style: italic;
}

.hrc-dl__value a.hrc-link {
  color: var(--hrc-accent);
  text-decoration: none;
  font-weight: var(--hrc-weight-medium);
}

.hrc-dl__value a.hrc-link:hover { text-decoration: underline; }

.hrc-dl__edit {
  display: flex;
  align-items: center;
  gap: var(--hrc-space-2xs);
  justify-self: end;
}

/* Narrow-container reflow: label stacks over value, edit action stays on the
   right and spans both rows. Container-based, not viewport-based - a .hrc-dl
   inside a narrow dialog gets the reflow even on a desktop screen. */
@container (max-width: 520px) {
  .hrc-dl { grid-template-columns: 1fr auto; column-gap: var(--hrc-space-sm); }
  .hrc-dl__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label edit" "value edit";
    row-gap: 2px;
    padding: var(--hrc-space-sm) 0;
    border-block-end: 1px solid var(--hrc-border);
  }
  .hrc-dl__row:last-child { border-block-end: 0; }
  .hrc-dl__row > .hrc-dl__label {
    grid-area: label;
    padding: 0;
    border: 0;
    font-size: var(--hrc-text-xs);
  }
  .hrc-dl__row > .hrc-dl__value { grid-area: value; padding: 0; border: 0; }
  .hrc-dl__row > .hrc-dl__edit  { grid-area: edit;  padding: 0; border: 0; align-self: start; }
}

/* -----------------------------------------------------------------------------
   §7  ALERT TILE - attention-grabbing card for something requiring action.
   Distinct from .hrc-alert (inline banner in forms.css): .hrc-alert-tile takes
   its own hero position, carries an icon column, and is where destructive
   actions (Close now, Reset password) live BEFORE the confirm page.
   -------------------------------------------------------------------------- */
.hrc-alert-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--hrc-space-sm);
  padding: var(--hrc-space-sm) var(--hrc-space-md);
  border-radius: var(--hrc-radius);
  border: 1px solid var(--hrc-border);
  background: var(--hrc-surface);
}

.hrc-alert-tile--warn {
  background: var(--hrc-warn-soft);
  border-color: color-mix(in srgb, var(--hrc-warn) 30%, transparent);
}

.hrc-alert-tile--crit {
  background: var(--hrc-crit-soft);
  border-color: color-mix(in srgb, var(--hrc-crit) 30%, transparent);
}

.hrc-alert-tile--info {
  background: var(--hrc-accent-soft);
  border-color: var(--hrc-accent-line);
}

.hrc-alert-tile__icon {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--hrc-surface);
  color: var(--hrc-ink-muted);
}

.hrc-alert-tile--warn .hrc-alert-tile__icon { color: var(--hrc-warn); }
.hrc-alert-tile--crit .hrc-alert-tile__icon { color: var(--hrc-crit); }
.hrc-alert-tile--info .hrc-alert-tile__icon { color: var(--hrc-accent); }

.hrc-alert-tile__icon svg {
  inline-size: 16px;
  block-size: 16px;
}

.hrc-alert-tile__body {
  flex: 1;
  min-inline-size: 0;
}

.hrc-alert-tile__title {
  font-size: var(--hrc-text-sm);
  font-weight: var(--hrc-weight-semibold);
  color: var(--hrc-ink);
  margin: 0;
}

.hrc-alert-tile__sub {
  font-size: var(--hrc-text-xs);
  color: var(--hrc-ink-muted);
  margin: 3px 0 0;
  line-height: var(--hrc-leading);
}

.hrc-alert-tile__actions {
  display: flex;
  gap: var(--hrc-space-xs);
  margin-block-start: var(--hrc-space-xs);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   §8  PILL - status pill. Every finite-state field (tenant status, entitlement
   toggle, cert state) renders through one of these.
   -------------------------------------------------------------------------- */
.hrc-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--hrc-text-xs);
  font-weight: var(--hrc-weight-semibold);
  padding: 3px 9px;
  border-radius: var(--hrc-radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

.hrc-pill::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
}

.hrc-pill--ok {
  color: var(--hrc-ok);
  background: var(--hrc-ok-soft);
  border-color: color-mix(in srgb, var(--hrc-ok) 22%, transparent);
}

.hrc-pill--warn {
  color: var(--hrc-warn);
  background: var(--hrc-warn-soft);
  border-color: color-mix(in srgb, var(--hrc-warn) 22%, transparent);
}

.hrc-pill--crit {
  color: var(--hrc-crit);
  background: var(--hrc-crit-soft);
  border-color: color-mix(in srgb, var(--hrc-crit) 22%, transparent);
}

.hrc-pill--mute {
  color: var(--hrc-ink-subtle);
  background: var(--hrc-neutral-soft);
  border-color: var(--hrc-border);
}

.hrc-pill--info {
  color: var(--hrc-accent);
  background: var(--hrc-accent-soft);
  border-color: var(--hrc-accent-line);
}

/* Admin variant - used inside `data-variant="admin"` to mark platform-level
   pills (Enterprise plan, operator role). Rebound below in §12. */
.hrc-pill--admin {
  color: var(--hrc-accent);
  background: var(--hrc-accent-soft);
  border-color: var(--hrc-accent-line);
}

/* -----------------------------------------------------------------------------
   §9  INFO ROW - compact label/value row used in side-card widgets (Quick
   facts, Break-glass stats). Row is a flex; value floats to the trailing edge.
   -------------------------------------------------------------------------- */
.hrc-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hrc-space-sm);
  padding: var(--hrc-space-sm) 0;
  border-block-end: 1px solid var(--hrc-border);
}

.hrc-info-row:last-child { border-block-end: 0; }

.hrc-info-row__lbl {
  color: var(--hrc-ink);
  font-size: var(--hrc-text-sm);
  font-weight: var(--hrc-weight-medium);
}

.hrc-info-row__sub {
  font-size: var(--hrc-text-xs);
  color: var(--hrc-ink-subtle);
  margin: 2px 0 0;
}

.hrc-metric-lg {
  font-size: var(--hrc-text-xl);
  font-weight: var(--hrc-weight-semibold);
  color: var(--hrc-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* -----------------------------------------------------------------------------
   §10  FEED - vertical timeline (recent activity, provisioning log excerpts).
   Each item has a dot-and-line rail on the leading edge.
   -------------------------------------------------------------------------- */
.hrc-feed { padding: 2px 4px 2px 6px; }

.hrc-feed__item {
  position: relative;
  padding: 0 0 var(--hrc-space-md) 22px;
}

.hrc-feed__item:last-child { padding-block-end: 0; }

.hrc-feed__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  inset-block-start: 6px;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--hrc-accent);
  border: 2px solid var(--hrc-surface);
  box-shadow: 0 0 0 1px var(--hrc-accent-line);
}

.hrc-feed__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  inset-block: var(--hrc-space-md) 0;
  inline-size: 1px;
  background: var(--hrc-border);
}

.hrc-feed__title {
  font-size: var(--hrc-text-sm);
  font-weight: var(--hrc-weight-semibold);
  color: var(--hrc-ink);
  margin: 0;
}

.hrc-feed__title b { font-weight: 650; }

.hrc-feed__sub {
  font-size: var(--hrc-text-xs);
  color: var(--hrc-ink-subtle);
  margin: 2px 0 0;
}

/* -----------------------------------------------------------------------------
   §11  LINK - the anchor style used inside cards, dl values, hero meta.
   Distinct from `<a>` in the shell rail (which is stripped) - reach for this
   class when you WANT a hyperlink to look like one.
   -------------------------------------------------------------------------- */
.hrc-link {
  color: var(--hrc-accent);
  text-decoration: none;
  font-weight: var(--hrc-weight-medium);
}

.hrc-link:hover { text-decoration: underline; }

.hrc-link:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: var(--hrc-focus-offset);
  border-radius: var(--hrc-radius-xs);
}

/* -----------------------------------------------------------------------------
   §12  AUTH primitives (added packet admin-harbor-retrofit B3, 2026-08-01).
   Split-panel pre-auth surface: LEFT brand panel (dark, tagline + quote) and
   RIGHT form column (light card). Ported from design/prototypes/harbor/
   sign-in.html + harbor.css §Auth. Semantic-tokens-only per DesignTokenTests.

   Consumers: admin's AuthLayout renders the whole shape (both panels); each
   page (/login, /breakglass, /logout) fills the .hrc-auth-card slot only.
   The tenant Web plane keeps its existing AuthLayout unchanged - non-goal 1
   of this packet.

   The base .hrc-auth-brand carries the DEFAULT gradient (blue Harbor look).
   [data-variant="admin"] .hrc-auth-brand override at §13 makes the admin
   plane a SOLID violet-tinged panel (packet plan §B3 - "no gradient default
   from Web; a solid violet-tinged panel"). The tenant Web plane, when it
   later adopts these primitives, will render the gradient default.
   -------------------------------------------------------------------------- */

/* Split grid - 5:6 columns on desktop, single column below 900px. Uses viewport
   media query (not container) because the auth page IS the outermost chrome; a
   container query needs a wrapping container that has non-auto inline-size,
   which a full-viewport pre-auth surface does not have. Justified deviation
   from "primitives reflow on their CONTAINER" (see .hrc-auth-brand + col at
   media query). */
.hrc-auth {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-block-size: 100dvh;
  background: var(--hrc-canvas);
  color: var(--hrc-ink);
  position: relative;
  container-type: normal;
}

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

/* LEFT PANEL - brand plate + tagline + optional customer quote + footer strip. */
.hrc-auth-brand {
  position: relative;
  overflow: hidden;
  padding: var(--hrc-space-2xl) var(--hrc-space-xl);
  background: var(--hrc-rail);
  color: var(--hrc-rail-ink);
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-lg);
}

@media (max-width: 900px) {
  .hrc-auth-brand { display: none; }
}

.hrc-auth-brand__mark {
  display: flex;
  align-items: center;
  gap: var(--hrc-space-sm);
}

.hrc-auth-brand__mark img {
  display: block;
  block-size: 34px;
  inline-size: auto;
  max-inline-size: 220px;
}

.hrc-auth-brand__body {
  margin-block: auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-md);
}

.hrc-auth-brand__title {
  font-size: var(--hrc-text-2xl);
  font-weight: var(--hrc-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--hrc-rail-ink-strong);
  margin: 0;
  max-inline-size: 22ch;
  line-height: 1.15;
}

.hrc-auth-brand__sub {
  font-size: var(--hrc-text-md);
  color: var(--hrc-rail-ink);
  line-height: 1.55;
  max-inline-size: 44ch;
  margin: 0;
}

.hrc-auth-brand__quote {
  border-inline-start: 3px solid color-mix(in srgb, var(--hrc-rail-ink-strong) 22%, transparent);
  padding: 2px 0 2px var(--hrc-space-md);
  margin: 0;
  font-size: var(--hrc-text-sm);
  color: var(--hrc-rail-ink);
  line-height: 1.6;
  font-style: italic;
  max-inline-size: 42ch;
}

.hrc-auth-brand__quote-who {
  display: block;
  margin-block-start: var(--hrc-space-xs);
  font-style: normal;
  color: var(--hrc-rail-ink);
  opacity: 0.75;
  font-size: var(--hrc-text-xs);
  letter-spacing: 0.02em;
}

.hrc-auth-brand__foot {
  font-size: var(--hrc-text-xs);
  color: var(--hrc-rail-ink);
  opacity: 0.75;
  display: flex;
  gap: var(--hrc-space-md);
  align-items: center;
  flex-wrap: wrap;
}

.hrc-auth-brand__foot a {
  color: inherit;
  text-decoration: none;
}

.hrc-auth-brand__foot a:hover {
  color: var(--hrc-rail-ink-strong);
}

/* Faint decorative glow in the top-inline-end corner. Uses accent-soft to
   pick up the plane variant automatically (violet for admin, blue for base). */
.hrc-auth-brand::after {
  content: "";
  position: absolute;
  inset-block-start: -80px;
  inset-inline-end: -100px;
  inline-size: 340px;
  block-size: 340px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--hrc-accent) 30%, transparent),
    transparent 70%);
  pointer-events: none;
}

/* RIGHT PANEL - the form-card column. */
.hrc-auth-col {
  display: flex;
  flex-direction: column;
  padding: var(--hrc-space-2xl) var(--hrc-space-xl) var(--hrc-space-xl);
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  min-block-size: 100dvh;
  gap: var(--hrc-space-lg);
}

@media (max-width: 900px) {
  .hrc-auth-col { padding: var(--hrc-space-xl) var(--hrc-space-md); }
}

@media (max-width: 480px) {
  .hrc-auth-col { padding: var(--hrc-space-lg) var(--hrc-space-sm); }
}

/* Mobile-only wordmark ABOVE the card, shown only when the brand panel hides. */
.hrc-auth-mark-mobile {
  display: none;
  align-self: center;
  margin-block-end: var(--hrc-space-sm);
}

.hrc-auth-mark-mobile img {
  display: block;
  block-size: 28px;
  inline-size: auto;
  max-inline-size: 200px;
}

@media (max-width: 900px) {
  .hrc-auth-mark-mobile { display: block; }
}

/* Form card. */
.hrc-auth-card {
  inline-size: 100%;
  max-inline-size: 420px;
  background: var(--hrc-surface);
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius);
  box-shadow: var(--hrc-shadow);
  padding: var(--hrc-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-lg);
}

@media (max-width: 480px) {
  .hrc-auth-card { padding: var(--hrc-space-lg) var(--hrc-space-md); }
}

/* Title + sub inside a wrapper - flex child of .hrc-auth-card, so the card
   gap separates it from the next block; the title/sub gap here is tight. */
.hrc-auth-card__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-2xs);
}

.hrc-auth-card__title {
  font-size: var(--hrc-text-xl);
  font-weight: var(--hrc-weight-semibold);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--hrc-ink);
}

.hrc-auth-card__sub {
  font-size: var(--hrc-text-sm);
  color: var(--hrc-ink-subtle);
  margin: 0;
  line-height: 1.55;
}

/* Big primary submit button. Composable with .hrc-button-* variants (e.g.
   .hrc-button + .hrc-auth-card__submit + .hrc-button--secondary). */
.hrc-auth-card__submit {
  inline-size: 100%;
  justify-content: center;
  block-size: 44px;
  font-size: var(--hrc-text-md);
  font-weight: var(--hrc-weight-semibold);
  padding: 0 var(--hrc-space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--hrc-space-xs);
}

.hrc-auth-card__submit svg {
  inline-size: 16px;
  block-size: 16px;
}

/* OR separator between the primary action and the alternate one. */
.hrc-auth-card__sep {
  display: flex;
  align-items: center;
  gap: var(--hrc-space-sm);
  color: var(--hrc-ink-subtle);
  font-size: var(--hrc-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hrc-auth-card__sep::before,
.hrc-auth-card__sep::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--hrc-border);
}

/* Foot of the card - a single trailing sentence with a link. */
.hrc-auth-card__foot {
  font-size: var(--hrc-text-sm);
  color: var(--hrc-ink-subtle);
  text-align: center;
  padding-block-start: var(--hrc-space-sm);
  border-block-start: 1px solid var(--hrc-border);
  margin: 0;
}

.hrc-auth-card__foot a {
  color: var(--hrc-accent);
  font-weight: var(--hrc-weight-semibold);
  text-decoration: none;
}

.hrc-auth-card__foot a:hover { text-decoration: underline; }

/* Strip BELOW the card - version + support/status/terms links. */
.hrc-auth-strip {
  max-inline-size: 420px;
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hrc-space-sm);
  font-size: var(--hrc-text-xs);
  color: var(--hrc-ink-subtle);
  flex-wrap: wrap;
}

.hrc-auth-strip a {
  color: inherit;
  text-decoration: none;
}

.hrc-auth-strip a:hover { color: var(--hrc-ink-muted); }

.hrc-auth-strip__links {
  display: flex;
  gap: var(--hrc-space-md);
}

/* -----------------------------------------------------------------------------
   §13  data-variant="admin" AUTH override - solid violet-tinged brand panel.

   Packet plan §B3: "Left panel carries the admin violet accent (no gradient
   default from Web; a solid violet-tinged panel)."

   The base .hrc-auth-brand is a flat --hrc-rail; the admin variant tints it
   toward accent using color-mix so a rebrand of --hrc-rail-accent (or the
   admin violet swap in tokens.css §VARIANT AXIS) flows through automatically.
   No hex here - color-mix operates on semantic tokens.
   -------------------------------------------------------------------------- */
:root[data-variant="admin"] .hrc-auth-brand {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--hrc-rail) 90%, var(--hrc-rail-accent) 10%) 0%,
      var(--hrc-rail) 55%,
      color-mix(in srgb, var(--hrc-rail) 70%, var(--hrc-rail-accent) 30%) 100%);
}

/* -----------------------------------------------------------------------------
   §14  data-variant="admin" - see tokens.css VARIANT AXIS block for the rebinding.
   The override lives in tokens.css alongside theme/density so DesignTokenTests'
   "no primitive references outside tokens.css" rule stays inviolable. Every
   primitive above this comment references only semantic tokens (--hrc-*),
   so when the admin plane rebinds --hrc-accent to violet, the same .hrc-hero,
   .hrc-subtabs, .hrc-card, .hrc-pill etc. render tinted violet automatically.
   -------------------------------------------------------------------------- */

/* =============================================================================
   §15  TOPBAR DROPDOWNS + DIALOG (packet P5 shell reshape, 2026-08-03)

   Native <details>-based dropdowns for Help / Notifications / User avatar, and
   a native <dialog> primitive for confirms (Logout) and in-page forms (Masters
   Create New). Chosen over the .menu-wrap/.menu pattern (which is fixed-
   positioned via JS) so the topbar surfaces render as static SSR with zero
   JS islands — same shape as the P4 CompanySwitcher already in production.
   All colours reference semantic tokens; DesignTokenTests keeps this file
   primitive-free.
   ============================================================================= */

/* --- topbar dropdown shell (Help, Bell, User avatar) --------------------- */
.hrc-topbar-drop { position:relative; }
.hrc-topbar-drop > summary { list-style:none; cursor:pointer; }
.hrc-topbar-drop > summary::-webkit-details-marker { display:none; }
.hrc-topbar-drop > summary::marker { content:""; }
.hrc-topbar-drop > summary:focus-visible {
  outline:2px solid var(--hrc-accent); outline-offset:2px; border-radius:8px;
}

.hrc-topbar-drop__panel {
  position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0;
  min-inline-size:260px; background:var(--hrc-surface); border:1px solid var(--hrc-border);
  border-radius:12px; box-shadow:var(--hrc-shadow-pop);
  padding:6px 0; z-index:200;
}
.hrc-topbar-drop__panel--wide { min-inline-size:340px; }

.hrc-topbar-drop__head {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-block-end:1px solid var(--hrc-border); margin-block-end:6px;
}
.hrc-topbar-drop__ident { min-inline-size:0; }
.hrc-topbar-drop__name { font-weight:600; color:var(--hrc-ink); font-size:13.5px; }
.hrc-topbar-drop__email { font-size:12px; color:var(--hrc-ink-subtle);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hrc-topbar-drop__row {
  display:flex; align-items:center; gap:10px; padding:8px 14px; color:var(--hrc-ink);
  text-decoration:none; font-size:13.5px; background:none; border:none; inline-size:100%;
  text-align:start; cursor:pointer;
}
.hrc-topbar-drop__row:hover { background:var(--hrc-surface-hover); }
.hrc-topbar-drop__row svg { inline-size:16px; block-size:16px; color:var(--hrc-ink-subtle); flex:none; }
.hrc-topbar-drop__row--danger { color:var(--hrc-crit); }
.hrc-topbar-drop__row--danger svg { color:var(--hrc-crit); }
.hrc-topbar-drop__row--danger:hover { background:var(--hrc-crit-soft); }
.hrc-topbar-drop__row-parked {
  margin-inline-start:auto; font-size:10.5px; color:var(--hrc-ink-subtle);
  background:var(--hrc-neutral-soft); padding:2px 6px; border-radius:6px;
  letter-spacing:.02em;
}

.hrc-topbar-drop__sep { block-size:1px; background:var(--hrc-border); margin:6px 0; }

/* Small avatar plate reused as user chip trigger + panel header icon */
.hrc-topbar-avatar {
  display:inline-grid; place-items:center;
  inline-size:28px; block-size:28px; border-radius:999px;
  background:var(--hrc-accent-soft); color:var(--hrc-accent);
  font-size:11px; font-weight:600; letter-spacing:.04em;
}
.hrc-topbar-avatar--lg { inline-size:38px; block-size:38px; font-size:13px; }

.hrc-topbar-avatar-btn {
  display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px;
  background:none; border:1px solid transparent; border-radius:999px;
  color:var(--hrc-ink); cursor:pointer;
}
.hrc-topbar-avatar-btn:hover { background:var(--hrc-surface-raised); border-color:var(--hrc-border); }
.hrc-topbar-avatar-btn__name { font-size:13px; font-weight:500; }

/* Icon button used for Help + Notifications triggers. --------------------- */
.hrc-topbar-iconbtn {
  position:relative; inline-size:36px; block-size:36px; border-radius:10px;
  border:1px solid transparent; background:none; color:var(--hrc-ink-muted);
  display:inline-grid; place-items:center; cursor:pointer;
}
.hrc-topbar-iconbtn:hover { background:var(--hrc-surface-raised); color:var(--hrc-ink); }
.hrc-topbar-iconbtn svg { inline-size:18px; block-size:18px; }
.hrc-topbar-iconbtn__dot {
  position:absolute; inset-block-start:8px; inset-inline-end:8px;
  inline-size:6px; block-size:6px; border-radius:50%;
  background:var(--hrc-crit); box-shadow:0 0 0 2px var(--hrc-surface);
}

/* Notification bell panel */
.hrc-notify-tabs { display:flex; gap:16px; padding:12px 14px 0;
  border-block-end:1px solid var(--hrc-border); }
.hrc-notify-tab {
  padding:6px 0; font-size:13px; color:var(--hrc-ink-subtle); text-decoration:none;
  border-block-end:2px solid transparent; margin-block-end:-1px;
  background:none; border-inline:none; border-block-start:none; cursor:pointer;
}
.hrc-notify-tab[aria-current="page"] {
  color:var(--hrc-ink); border-block-end-color:var(--hrc-accent); font-weight:600;
}
.hrc-notify-tab .hrc-count { color:var(--hrc-ink-subtle); margin-inline-start:4px; font-weight:500; }
.hrc-notify-body { padding:32px 14px; color:var(--hrc-ink-subtle); text-align:center; font-size:13px; }
.hrc-notify-foot { border-block-start:1px solid var(--hrc-border);
  text-align:center; padding:10px 14px; }
.hrc-notify-foot a { color:var(--hrc-accent); font-size:13px; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px; }

/* Mode picker inside user menu (5 tiny buttons) */
.hrc-topbar-drop__mode { padding:6px 14px 10px; }
.hrc-topbar-drop__mode-label { font-size:10.5px; color:var(--hrc-ink-subtle); font-weight:600;
  margin-block-end:6px; letter-spacing:.06em; text-transform:uppercase; }
.hrc-topbar-drop__mode-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:4px; }
.hrc-topbar-drop__mode-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; border:1px solid var(--hrc-border); border-radius:8px;
  background:var(--hrc-surface); color:var(--hrc-ink-muted); font-size:10px;
  cursor:pointer; line-height:1; text-decoration:none;
}
.hrc-topbar-drop__mode-btn:hover { background:var(--hrc-surface-hover); color:var(--hrc-ink); }
.hrc-topbar-drop__mode-btn[aria-pressed="true"] {
  border-color:var(--hrc-accent); color:var(--hrc-accent); background:var(--hrc-accent-soft);
}
.hrc-topbar-drop__mode-btn svg { inline-size:14px; block-size:14px; }

/* --- native <dialog> confirm/modal --------------------------------------- */
.hrc-dialog {
  border:1px solid var(--hrc-border); border-radius:14px; padding:0;
  background:var(--hrc-surface); color:var(--hrc-ink);
  inline-size:min(460px, 92vw);
  box-shadow:var(--hrc-shadow-pop);
}
.hrc-dialog::backdrop { background:color-mix(in srgb, var(--hrc-ink) 40%, transparent); }
.hrc-dialog__head { padding:18px 20px 4px; display:flex; align-items:center; gap:10px; }
.hrc-dialog__icon { inline-size:32px; block-size:32px; border-radius:8px;
  display:grid; place-items:center; background:var(--hrc-accent-soft); color:var(--hrc-accent); flex:none; }
.hrc-dialog__icon--warn { background:var(--hrc-warn-soft); color:var(--hrc-warn); }
.hrc-dialog__icon svg { inline-size:18px; block-size:18px; }
.hrc-dialog__title { font-size:15.5px; font-weight:700; margin:0; }
.hrc-dialog__body { padding:8px 20px 18px; color:var(--hrc-ink-muted); font-size:13.5px;
  line-height:1.5; }
.hrc-dialog__foot { display:flex; gap:8px; justify-content:flex-end;
  padding:0 20px 18px; }
.hrc-dialog--form { inline-size:min(560px, 94vw); }
.hrc-dialog--form .hrc-dialog__body { padding:12px 20px 16px; }

/* P5.5 (2026-08-04): consistent vertical rhythm for the dialog's stacked fields.
   Before this rule existed, `.hrc-dialog__form-grid` had no CSS at all — successive
   `.hrc-field` siblings collapsed to whatever margin the browser inherited (nothing),
   so the gap between a field's hint and the next field's label was the same as the
   gap between an input and its own hint. Result: no visible rhythm and the ragged
   look in P5.4's screenshot. Two-col at ≥ 480px dialog width so half-width fields
   (Code, Sort order) pair naturally; `--wide` and `--inline` span the row. */
.hrc-dialog__form-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:16px;
  row-gap:14px;
}
.hrc-dialog__form-grid > .hrc-field--wide,
.hrc-dialog__form-grid > .hrc-field--inline {
  grid-column: 1 / -1;
}
/* The `Also map to …` row is a checkbox+label pair — give it breathing room above
   so it reads as a distinct choice, not the tail of the previous field. */
.hrc-dialog__form-grid > .hrc-field--inline {
  margin-block-start:4px;
  padding-block-start:12px;
  border-block-start:1px dashed var(--hrc-border);
}
@media (max-width: 480px) {
  .hrc-dialog__form-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   §16  MASTERS ONE screen — /masters (packet P5)
   Row-tint uses --hrc-ok-soft (light green) deliberately NOT --hrc-accent-soft
   to avoid colliding with the sort-column background (which the shared grid
   already tints with --hrc-accent-soft). Two-layer read: sort column = blue,
   mapped row = green, overlap = green+blue never wash out into one wash.
   ============================================================================= */
/* P5.4 (2026-08-03): one-row toolbar variant. Master Name selector + mapped
   check + Create New + Export all inline in .hrc-card-head--stack .hrc-toolbar.
   The Row-2 .hrc-masters-toolbar (P5.3b) is retired -- search + column chooser
   drop down to DataGrid's own toolbar as an automatic Row 2. */
.hrc-toolbar--masters { flex-wrap:wrap; gap:10px 12px; align-items:center; }
.hrc-toolbar--masters .hrc-field--inline { margin:0; min-inline-size:0; }
.hrc-toolbar--masters .hrc-masters-check-form { margin:0; }

/* Inline field variant: label sits BESIDE the control (default .hrc-field
   stacks vertically). Used inside single-row toolbars. */
.hrc-field--inline {
  display:inline-flex; flex-direction:row; align-items:center; gap:8px;
  inline-size:auto; /* let the form/field size to content, not to the toolbar column */
}
.hrc-field--inline .hrc-field__label {
  margin:0; flex:none; /* never shrink the label */
  white-space:nowrap; font-size:12.5px; color:var(--hrc-ink-muted);
}
.hrc-field--inline .hrc-input,
.hrc-field--inline .hrc-select { inline-size:auto; min-inline-size:180px; }

.hrc-masters-check {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--hrc-ink-muted); cursor:pointer;
}
.hrc-masters-check input { accent-color:var(--hrc-accent); inline-size:14px; block-size:14px; }

.hrc-masters-note {
  font-size:12.5px; color:var(--hrc-accent); margin:10px 0 0;
  display:flex; align-items:center; gap:6px;
}
.hrc-masters-note svg { inline-size:14px; block-size:14px; flex:none; }
.hrc-masters-note b { color:var(--hrc-ink); font-weight:600; }

.hrc-datagrid tr.hrc-tr--mapped > td { background:var(--hrc-ok-soft); }
.hrc-datagrid tr.hrc-tr--mapped:hover > td {
  background:color-mix(in srgb, var(--hrc-ok-soft) 82%, var(--hrc-ink) 6%);
}
.hrc-datagrid tr.hrc-tr--processing > td { background:var(--hrc-warn-soft); }
.hrc-datagrid .hrc-num-badge {
  color:var(--hrc-crit); border:1px solid var(--hrc-crit);
  padding:0 6px; border-radius:6px; font-size:11px; font-weight:600;
  display:inline-block; line-height:18px;
}

.hrc-masters-legend {
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:14px 4px 4px; color:var(--hrc-ink-subtle); font-size:12.5px;
  border-block-start:1px solid var(--hrc-border); margin-block-start:12px;
}
.hrc-masters-legend__item { display:inline-flex; align-items:center; gap:6px; }
.hrc-masters-legend__swatch {
  inline-size:22px; block-size:14px; border-radius:3px;
  border:1px solid var(--hrc-border);
}
.hrc-masters-legend__swatch--mapped {
  background:var(--hrc-ok-soft);
  border-color:color-mix(in srgb, var(--hrc-ok) 30%, transparent);
}
.hrc-masters-legend__swatch--processing {
  background:var(--hrc-warn-soft);
  border-color:color-mix(in srgb, var(--hrc-warn) 22%, transparent);
}
.hrc-masters-legend__swatch--inactive {
  background:var(--hrc-surface); border:1px solid var(--hrc-crit);
}

/* P5.2 row map/unmap toggle -- rendered as a per-row form so each row carries
   its own antiforgery token. The form has no chrome; the button is a small
   circle that flips filled (mapped) / outlined (unmapped) via CSS. */
.hrc-masters-map-form { display:inline-flex; margin:0; padding:0; }
.hrc-icon-button {
  inline-size:24px; block-size:24px; padding:0; margin:0;
  border:1px solid var(--hrc-border); border-radius:50%;
  background:var(--hrc-surface); color:var(--hrc-ink-muted);
  font-size:13px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 120ms, color 120ms, border-color 120ms;
}
.hrc-icon-button:hover { border-color:var(--hrc-accent); color:var(--hrc-accent); }
.hrc-icon-button:focus-visible {
  outline:2px solid var(--hrc-accent); outline-offset:1px;
}
.hrc-icon-button--mapped {
  background:var(--hrc-ok); color:var(--hrc-on-ok, white);
  border-color:var(--hrc-ok);
}
.hrc-icon-button--mapped:hover {
  background:color-mix(in srgb, var(--hrc-ok) 85%, var(--hrc-ink) 15%);
  border-color:color-mix(in srgb, var(--hrc-ok) 85%, var(--hrc-ink) 15%);
  color:var(--hrc-on-ok, white);
}
.hrc-icon-button--unmapped { /* base .hrc-icon-button is already the unmapped state */ }

/* P5.2 Ctrl+K command palette. Native <dialog>, centered by browser default;
   we style padding + inner shape only. */
.hrc-cmdk {
  inline-size:min(560px, calc(100vw - 32px));
  padding:0; margin:15vh auto;
  border:1px solid var(--hrc-border); border-radius:12px;
  background:var(--hrc-surface-raised, var(--hrc-surface));
  color:var(--hrc-ink);
  box-shadow:var(--hrc-shadow-pop, 0 10px 40px rgba(0,0,0,.25));
  max-block-size:70vh;
  flex-direction:column;
}
/* P5.4-fixes MYS: flex only when [open]. Without this the unconditional
   display:flex overrides the browser default dialog:not([open]){display:none}
   and the palette stays visible after close(). */
.hrc-cmdk[open] { display:flex; }
.hrc-cmdk::backdrop { background:rgba(15, 23, 42, .5); backdrop-filter:blur(2px); }
.hrc-cmdk__head { padding:12px 12px 8px; border-block-end:1px solid var(--hrc-border); }
.hrc-cmdk__search {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--hrc-border); border-radius:8px;
  background:var(--hrc-surface);
}
.hrc-cmdk__search-icon { color:var(--hrc-ink-subtle); font-size:15px; }
.hrc-cmdk__input {
  flex:1; border:none; background:transparent; outline:none;
  font:inherit; color:var(--hrc-ink); min-inline-size:0;
}
.hrc-cmdk__kbd {
  font-size:11px; color:var(--hrc-ink-subtle);
  border:1px solid var(--hrc-border); border-radius:4px; padding:1px 6px;
}
.hrc-cmdk__results {
  list-style:none; margin:0; padding:6px;
  overflow-y:auto; flex:1; min-block-size:0;
}
.hrc-cmdk__row {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 10px; border-radius:6px; cursor:pointer;
}
.hrc-cmdk__row.is-focused { background:var(--hrc-accent-soft); }
.hrc-cmdk__row-label { font-weight:500; color:var(--hrc-ink); }
.hrc-cmdk__row-path { font-size:12px; color:var(--hrc-ink-subtle); text-align:end; }
.hrc-cmdk__empty { padding:16px; color:var(--hrc-ink-subtle); text-align:center; font-size:13px; }
.hrc-cmdk__foot {
  display:flex; gap:16px; padding:8px 12px;
  border-block-start:1px solid var(--hrc-border);
  font-size:11px; color:var(--hrc-ink-subtle);
}
.hrc-cmdk__foot kbd {
  border:1px solid var(--hrc-border); border-radius:3px;
  padding:0 4px; margin-inline-end:2px;
  font-family:inherit; font-size:10px;
}

/* P5.2 signout confirm popup. Small centered <dialog>. Scoped exception to the
   destructive-action-is-a-page rule; delete confirms remain page-based. */
.hrc-signout {
  inline-size:min(420px, calc(100vw - 32px));
  padding:0; margin:auto;
  border:1px solid var(--hrc-border); border-radius:12px;
  background:var(--hrc-surface-raised, var(--hrc-surface));
  color:var(--hrc-ink);
  box-shadow:var(--hrc-shadow-pop, 0 10px 40px rgba(0,0,0,.25));
}
.hrc-signout::backdrop { background:rgba(15, 23, 42, .5); backdrop-filter:blur(2px); }
.hrc-signout__form { padding:24px; margin:0; }
.hrc-signout__title { margin:0 0 8px; font-size:18px; font-weight:600; }
.hrc-signout__body { margin:0 0 20px; color:var(--hrc-ink-muted); font-size:14px; }
.hrc-signout__actions { display:flex; gap:8px; justify-content:flex-end; }

/* =============================================================================
   §17  GRID + MENU + FILTER-CHIPS + BULK-BAR + PAGER   (packet P5.3, 2026-08-03)

   The canonical vocabulary EVERY list screen inherits. Ported class-by-class
   from design/prototypes/harbor/grid-employees.html + masters.html, hrc-prefixed
   per the ui skill standing rule. Semantic tokens only (DesignTokenTests).

   The old datagrid.css file was DELETED in P5.3 (F2, one source of truth). The
   outer .hrc-datagrid wrapper + .hrc-datagrid__scroll + print isolation now
   live at the bottom of this section so a grid ships from ONE CSS file.

   Load-bearing rules baked into this stylesheet (do not undo without reopening):
   1. Menus are position:fixed with viewport-clamped coords supplied by menu.js.
      overflow-clip ancestors (.hrc-datagrid__scroll, .hrc-card) would hide any
      absolutely-positioned popover otherwise.
   2. The bulk-bar reveal is pure CSS via :has(:checked) — no JS toggle, honest
      with static SSR. A browser without :has() shows the bar always (safe: the
      server rejects an empty selection with a clear message).
   3. Sort headers stay <a href> anchors — a real navigation, JS-off works,
      URL is the state. Styled to LOOK like a button (arrow icon, data-sort-dir
      on the <th> tints the column).
   ============================================================================= */

/* --- §17.1  card-head + toolbar + card-title + panel-count ---------------
   These are the header primitives that sit at the top of every card the grid
   sits inside. Prototype's .card-head / .card-head--stack / .card-title /
   .toolbar / .panel-count — hrc-prefixed. Naming choice: kebab-hyphen to match
   the prototype, distinct from the BEM double-underscore .hrc-card__* variants
   already in §7 (older-style card component; two vocabularies coexist for now
   and consolidate in a later packet). */
.hrc-card-head {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding:14px var(--hrc-density-pad);
  border-block-end:1px solid var(--hrc-border);
}
.hrc-card-head--stack {
  flex-direction:column; align-items:stretch; gap:12px;
}
.hrc-card-head--stack > * { min-inline-size:0; }

.hrc-card-title {
  font-size:15px; font-weight:650; letter-spacing:-.01em;
  margin:0; color:var(--hrc-ink);
}

.hrc-toolbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  min-inline-size:0;
}
.hrc-card-head--stack .hrc-toolbar { justify-content:flex-start; }

.hrc-panel-count {
  font-size:12px; font-weight:500; color:var(--hrc-ink-subtle);
  margin-inline-start:6px;
}

/* --- §17.1a  Visually-hidden utility (a11y labels, sr-only submits) ------ */
.hrc-sr {
  position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  border:0; padding:0; margin:-1px;
}

/* Page-level attribution / caption note. Small muted text at the foot of a
   card or section. Used for licence attribution (DB-IP), disclaimers, etc. */
.hrc-login-activities__attribution {
  padding:10px var(--hrc-density-pad);
  font-size:12px; color:var(--hrc-ink-subtle);
  margin:0;
}

/* --- §17.2  numeric + identity utility cells ----------------------------- */
.hrc-num { font-variant-numeric:tabular-nums; }
.hrc-who { display:flex; align-items:center; gap:10px; min-inline-size:0; }
.hrc-who__avatar {
  inline-size:30px; block-size:30px; border-radius:50%;
  display:inline-grid; place-items:center; flex:none;
  background:var(--hrc-accent-soft); color:var(--hrc-accent);
  font-size:11px; font-weight:600; letter-spacing:.03em;
}
.hrc-who__name { color:var(--hrc-ink); font-weight:550; white-space:nowrap; }
.hrc-who__alt  { font-size:12px; color:var(--hrc-ink-subtle); white-space:nowrap; }

/* --- §17.3  icon-only 34px button (kebab, close, clear) ------------------ */
/* The topbar has its own 36px .hrc-topbar-iconbtn variant; DO NOT unify without
   a separate visual review — the shell button carries a hover-plate treatment
   the grid kebab does not want (would visually compete with the row). */
.hrc-icon-btn {
  inline-size:34px; block-size:34px;
  display:inline-grid; place-items:center;
  border:0; padding:0; margin:0;
  background:transparent; color:var(--hrc-ink-muted);
  border-radius:var(--hrc-radius-xs); cursor:pointer;
}
.hrc-icon-btn:hover { background:var(--hrc-surface-hover); color:var(--hrc-ink); }
.hrc-icon-btn:focus-visible { outline:2px solid var(--hrc-accent); outline-offset:1px; }
.hrc-icon-btn svg { inline-size:18px; block-size:18px; }

/* --- §17.3a  Toolbar search-pill (icon INSIDE the input) --------------- */
/* A different shape from .hrc-field (which is a vertical form field with the
   label above). This one is the horizontal search pill used only in a grid /
   list toolbar: an icon on the leading edge, an input taking the remaining
   width. Naming it .hrc-toolbar-search keeps the concerns separate. */
.hrc-toolbar-search {
  position:relative; display:flex; align-items:center;
  flex:1 1 20rem; max-inline-size:24rem;
  min-inline-size:0;
}
.hrc-toolbar-search__icon {
  position:absolute; inset-inline-start:9px;
  inline-size:15px; block-size:15px;
  color:var(--hrc-ink-subtle); pointer-events:none;
}
.hrc-toolbar-search .hrc-input {
  padding-inline-start:30px;
  max-inline-size:none;                  /* fill the pill; no 32rem cap */
}

/* --- §17.3b  Column chooser panel (variant of .hrc-menu) ----------------
   The chooser lives inside a menu-wrap but its internals are not a simple
   list of menu items — checkboxes + move buttons + drag grip. So its outer
   panel is .hrc-menu.hrc-menu--chooser (menu.js positions it) and the
   internals carry their own classes. */
.hrc-menu--chooser {
  padding:var(--hrc-space-md);
  min-inline-size:16rem; max-inline-size:min(24rem, 92vw);
  gap:var(--hrc-space-md);
}
.hrc-menu--chooser[data-hrc-menu-open="true"] { flex-direction:column; }

.hrc-chooser__list {
  border:0; padding:0; margin:0;
  display:flex; flex-direction:column; gap:var(--hrc-space-xs);
}
.hrc-chooser__legend {
  position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.hrc-chooser__row {
  display:flex; align-items:center; gap:var(--hrc-space-sm);
  padding:var(--hrc-space-xs); border-radius:var(--hrc-radius-xs);
}
.hrc-chooser__row[draggable="true"] { cursor:grab; }
.hrc-chooser__row--dragging { opacity:.5; cursor:grabbing; }
.hrc-chooser__row--pinned {
  background:var(--hrc-surface-raised); color:var(--hrc-ink-muted); cursor:default;
}
.hrc-chooser__grip {
  color:var(--hrc-ink-subtle); cursor:grab; user-select:none;
  font-family:var(--hrc-font-mono, monospace); letter-spacing:-.2em;
}
.hrc-chooser__pin { font-size:.9em; }
.hrc-chooser__label { flex:1 1 auto; cursor:pointer; }
.hrc-chooser__row--pinned .hrc-chooser__label { cursor:default; }
.hrc-chooser__pinned-note {
  color:var(--hrc-ink-subtle); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.05em;
}
.hrc-chooser__move {
  display:inline-flex; gap:2px; margin-inline-start:auto;
}
.hrc-chooser__move-btn {
  inline-size:1.5rem; block-size:1.5rem;
  border:1px solid transparent; border-radius:var(--hrc-radius-xs);
  background:transparent; color:var(--hrc-ink-muted);
  cursor:pointer; padding:0; line-height:1; font-size:.875rem;
}
.hrc-chooser__move-btn:hover,
.hrc-chooser__move-btn:focus-visible {
  background:var(--hrc-surface-hover); border-color:var(--hrc-border);
  color:var(--hrc-ink); outline:none;
}
.hrc-chooser__actions {
  display:flex; gap:var(--hrc-space-sm); justify-content:flex-end;
}

/* --- §17.4  menu-wrap + menu (shared by grid dropdowns + row-kebab) ------ */
/* Anchor is .hrc-menu-wrap (relative for keyboard focus outline only — the
   panel itself is position:fixed and JS-positioned). menu.js reads
   [data-hrc-menu-toggle] clicks and toggles the sibling [data-hrc-menu-panel]. */
.hrc-menu-wrap { position:relative; display:inline-block; }

.hrc-menu {
  position:fixed; z-index:var(--hrc-z-popover);
  min-inline-size:11rem; max-inline-size:min(20rem, 92vw);
  background:var(--hrc-surface); color:var(--hrc-ink);
  border:1px solid var(--hrc-border); border-radius:10px;
  box-shadow:var(--hrc-shadow-pop);
  padding:6px 0; margin:0;
  display:none;
}
.hrc-menu[data-hrc-menu-open="true"] { display:flex; flex-direction:column; }

.hrc-menu__label {
  padding:6px 10px 2px; margin:0;
  font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--hrc-ink-subtle);
}
.hrc-menu__hint {
  padding:4px 10px 6px;
  font-size:11.5px; color:var(--hrc-ink-subtle);
}
.hrc-menu__sep { block-size:1px; background:var(--hrc-border); margin:4px 0; }

.hrc-menu__item {
  inline-size:100%; text-align:start;
  display:flex; align-items:center; gap:9px;
  padding:0 10px; block-size:34px;
  color:var(--hrc-ink); background:transparent;
  border:0; margin:0; font:inherit; font-size:13px;
  text-decoration:none; cursor:pointer;
}
.hrc-menu__item:hover,
.hrc-menu__item:focus-visible {
  background:var(--hrc-surface-hover); outline:none;
}
.hrc-menu__item[aria-checked="true"] { color:var(--hrc-accent); font-weight:550; }
.hrc-menu__item svg { inline-size:14px; block-size:14px; flex:none; opacity:.75; }
.hrc-menu__item[aria-checked="true"] svg { opacity:1; }

/* Checkmark on the trailing edge of a role="menuitemcheckbox" / "menuitemradio". */
.hrc-menu__check { visibility:hidden; margin-inline-start:auto; color:var(--hrc-accent); }
.hrc-menu__item[aria-checked="true"] .hrc-menu__check { visibility:visible; }

.hrc-menu__item--danger { color:var(--hrc-crit); }
.hrc-menu__item--danger svg { color:var(--hrc-crit); }
.hrc-menu__item--danger:hover,
.hrc-menu__item--danger:focus-visible { background:var(--hrc-crit-soft); }

/* Menu items rendered as <button type="submit"> inside per-row hidden <form>
   still look identical — the type attribute doesn't affect styling. But a
   button inside a <form> submits when Enter is pressed on it, which is
   exactly the affordance the kebab-menu contract wants. */

/* --- §17.5  filter-chips row -------------------------------------------- */
.hrc-filter-chips {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  padding:10px var(--hrc-section-padding);
  border-block-end:1px solid var(--hrc-border);
  background:var(--hrc-surface);
}
.hrc-filter-chips__label {
  font-size:12px; color:var(--hrc-ink-subtle); margin-inline-end:2px;
}

.hrc-filter-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 3px 3px 12px; border-radius:99px;
  background:var(--hrc-accent-soft); color:var(--hrc-ink);
  font-size:12.5px; text-decoration:none;
  border:1px solid var(--hrc-accent-line);
}
.hrc-filter-chip:hover {
  background:color-mix(in srgb, var(--hrc-accent-soft) 60%, var(--hrc-accent) 15%);
}
.hrc-filter-chip b {
  /* Chrome + value split — value carries dir="auto" via markup so a shrink-
     wrapped Arabic string renders in its own direction (ui skill §3). */
  font-weight:650;
  inline-size:fit-content; max-inline-size:20rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hrc-filter-chip__x {
  inline-size:24px; block-size:24px;
  display:inline-grid; place-items:center; flex:none;
  border:0; padding:0; margin:0;
  border-radius:50%; background:transparent; color:currentColor;
  cursor:pointer; text-decoration:none;
}
.hrc-filter-chip__x:hover,
.hrc-filter-chip__x:focus-visible {
  background:var(--hrc-accent); color:var(--hrc-accent-on); outline:none;
}
.hrc-filter-chip__x svg { inline-size:12px; block-size:12px; pointer-events:none; }

.hrc-filter-chips__clear-all {
  font-size:12px; color:var(--hrc-ink-subtle);
  background:none; border:0; padding:2px 6px; cursor:pointer;
  text-decoration:none;
}
.hrc-filter-chips__clear-all:hover { color:var(--hrc-accent); text-decoration:underline; }

/* --- §17.6  bulk-action bar --------------------------------------------- */
/* Revealed automatically when any .hrc-grid row checkbox is checked. Pure CSS
   via :has(:checked) — no JS listener, no server round-trip. Same mechanic
   the previous datagrid.css shipped, preserved. */
.hrc-bulk-bar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px var(--hrc-section-padding);
  background:var(--hrc-accent-soft);
  border-block-end:1px solid var(--hrc-accent-line);
  color:var(--hrc-ink);
}
.hrc-bulk-bar__count { font-weight:650; }
.hrc-bulk-bar__actions {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-inline-start:auto;
}

@supports selector(:has(*)) {
  .hrc-datagrid:not(:has([data-hrc-grid-select]:checked)) .hrc-bulk-bar {
    display:none;
  }
}

/* --- §17.7  the .hrc-grid table primitive ------------------------------- */
.hrc-grid {
  inline-size:100%; border-collapse:collapse;
  font-size:13.5px; color:var(--hrc-ink);
  --_row-h: var(--hrc-grid-row-height);
}

/* Header cells: small caps, muted, tinted when the column is the active sort. */
.hrc-grid th {
  text-align:start; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--hrc-ink-subtle);
  padding:0 var(--hrc-space-md); block-size:40px;
  white-space:nowrap;
  background:var(--hrc-surface-raised);
  border-block-end:1px solid var(--hrc-border-strong);
  position:sticky; inset-block-start:0; z-index:2;
}
.hrc-grid th[data-hrc-sort-dir] { background:var(--hrc-accent-soft); }
.hrc-grid th[data-hrc-sort-dir] .hrc-grid__sort { color:var(--hrc-accent); font-weight:700; }

/* Sort control inside the header — an <a href>. Styled to LOOK like a button
   so the affordance reads, keeps as a real navigation for JS-off + bookmarks. */
.hrc-grid__sort {
  display:inline-flex; align-items:center; gap:5px;
  color:inherit; text-decoration:none;
}
.hrc-grid__sort:hover, .hrc-grid__sort:focus-visible { color:var(--hrc-accent); }
.hrc-grid__sort svg { inline-size:13px; block-size:13px; opacity:.55; }
.hrc-grid th[data-hrc-sort-dir] .hrc-grid__sort svg { opacity:1; color:var(--hrc-accent); }

/* Body cells: comfortable/compact via --_row-h; ellipsis overflow. */
.hrc-grid td {
  padding:0 var(--hrc-space-md); block-size:var(--_row-h);
  color:var(--hrc-ink); vertical-align:middle;
  border-block-end:1px solid var(--hrc-border);
  background:var(--hrc-surface);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hrc-grid tbody tr:hover td { background:var(--hrc-surface-hover); }
.hrc-grid tbody tr:last-child td { border-block-end:0; }

/* Alignment utility classes (grid columns opt in via GridAlign). */
.hrc-grid td.hrc-grid__cell--center, .hrc-grid th.hrc-grid__cell--center { text-align:center; }
.hrc-grid td.hrc-grid__cell--end,    .hrc-grid th.hrc-grid__cell--end    { text-align:end; }

/* Fixed-width checkbox column (both th + td). */
.hrc-grid th.hrc-grid__check,
.hrc-grid td.hrc-grid__check {
  inline-size:36px; padding:0 8px; text-align:center;
}
.hrc-grid input[type=checkbox] {
  inline-size:16px; block-size:16px;
  accent-color:var(--hrc-accent); cursor:pointer; margin:0;
}
.hrc-grid tbody tr:has([data-hrc-grid-select]:checked) td {
  background:var(--hrc-accent-soft);
}

/* Row-actions column: right-aligned action-icon strip.
   Packet P8.1 (2026-08-08 revised): keep the cell as a normal table-cell so
   the layout engine doesn't collapse it, but give every icon-button that FOLLOWS
   another element inside the cell an inline-start margin so buttons don't touch.
   Header cell stays at end alignment; body cells inherit the same padding. */
.hrc-grid th.hrc-grid__actions,
.hrc-grid td.hrc-grid__actions {
  inline-size:1%;
  white-space:nowrap;
  padding-inline:12px;
  text-align:end;
}
/* Any icon-button, inline-form, or anchor button that follows a sibling in the
   actions cell picks up an inline-start margin. Sibling combinator so the FIRST
   child gets no extra space. */
.hrc-grid td.hrc-grid__actions .hrc-button--icon + .hrc-button--icon,
.hrc-grid td.hrc-grid__actions .hrc-button--icon + .hrc-inline-form,
.hrc-grid td.hrc-grid__actions .hrc-inline-form + .hrc-button--icon,
.hrc-grid td.hrc-grid__actions .hrc-inline-form + .hrc-inline-form {
  margin-inline-start: 6px;
}

/* Full-row expand column (P5.4, 2026-08-03).
   Narrow leading column carrying a hidden checkbox + chevron label. The
   checkbox is the source of truth; the CSS :has() selector on the parent
   <tr class="hrc-grid__row"> reveals the immediately-following
   <tr class="hrc-grid__expand-row"> when it's checked. Pure static SSR --
   no JS island. Works with JS off (label toggles the input natively). */
.hrc-grid th.hrc-grid__expand,
.hrc-grid td.hrc-grid__expand {
  inline-size:36px; padding:0 4px; text-align:center;
}
.hrc-grid__expand-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:24px; block-size:24px; border-radius:6px;
  color:var(--hrc-ink-subtle); cursor:pointer;
  transition:background 120ms, color 120ms;
}
.hrc-grid__expand-toggle:hover { background:var(--hrc-accent-soft); color:var(--hrc-accent); }
.hrc-grid__expand-toggle:focus-within {
  outline:2px solid var(--hrc-accent); outline-offset:1px;
}
.hrc-grid__expand-toggle-icon svg { transition:transform 160ms; }
.hrc-grid__row:has(.hrc-grid__expand-toggle-input:checked) .hrc-grid__expand-toggle-icon svg {
  transform:rotate(180deg);
}

/* Expand row is hidden by default; :has() on the sibling main row reveals it. */
.hrc-grid tr.hrc-grid__expand-row { display:none; }
.hrc-grid tr.hrc-grid__row:has(.hrc-grid__expand-toggle-input:checked)
  + tr.hrc-grid__expand-row { display:table-row; }
.hrc-grid tr.hrc-grid__expand-row > td {
  background:var(--hrc-canvas);
  padding:12px var(--hrc-section-padding);
  border-block-end:1px solid var(--hrc-border);
}
.hrc-grid__expand-panel { display:flex; flex-direction:column; gap:12px; }

/* Audit-log Before/After diff panels (P5.4). Stacked vertically inside the
   expand row's full-width <td> so long JSON keys wrap naturally instead of
   fighting a two-column split. Each <pre> gets the full available inline
   size, preserves white-space, and scrolls horizontally only when a single
   line genuinely exceeds it. */
.hrc-audit-detail__panel {
  display:flex; flex-direction:column; gap:12px;
}
.hrc-audit-detail__side {
  display:flex; flex-direction:column; gap:6px; min-inline-size:0;
}
/* P5.5 (2026-08-04): heading + copy button sit on one line, heading on the start,
   copy on the end. `.hrc-audit-detail__copy` is a compact ghost button anchored to
   the panel corner so it doesn't compete with the heading for attention until the
   user reaches for it. `data-hrc-copy-flashed` is set by time-local.js during the
   ~1.4s "Copied" state. */
.hrc-audit-detail__side-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.hrc-audit-detail__copy {
  appearance:none; border:1px solid var(--hrc-border);
  background:var(--hrc-surface); color:var(--hrc-ink-muted);
  font: 500 11px/1 inherit; letter-spacing:.02em;
  padding:4px 8px; border-radius:var(--hrc-radius-xs);
  cursor:pointer;
}
.hrc-audit-detail__copy:hover { color:var(--hrc-ink); border-color:var(--hrc-border-strong); }
.hrc-audit-detail__copy:focus-visible {
  outline:2px solid var(--hrc-accent); outline-offset:2px;
}
.hrc-audit-detail__copy[data-hrc-copy-flashed="1"] {
  color:var(--hrc-ok); border-color:var(--hrc-ok);
}
.hrc-audit-detail__heading {
  margin:0; font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--hrc-ink-subtle); text-transform:uppercase;
}
.hrc-audit-detail__json {
  margin:0; padding:10px 12px;
  background:var(--hrc-surface); border:1px solid var(--hrc-border);
  border-radius:var(--hrc-radius-xs);
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:12px; color:var(--hrc-ink); line-height:1.55;
  white-space:pre; overflow-x:auto; max-block-size:20rem; overflow-y:auto;
}

/* Sticky first data column: keeps orientation on narrow viewports.
   position:sticky on <td> needs an overflow container — .hrc-datagrid__scroll
   is that container (see §17.9). */
.hrc-grid th.hrc-grid__cell--sticky,
.hrc-grid td.hrc-grid__cell--sticky {
  position:sticky; inset-inline-start:0; z-index:1;
  box-shadow:1px 0 0 var(--hrc-border);
}
.hrc-grid th.hrc-grid__cell--sticky { z-index:3; } /* header + sticky intersection */

/* .hrc-sr (visually-hidden) is defined once at §17.1a as a general utility. */

/* --- §17.8  pager ------------------------------------------------------- */
.hrc-pager {
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding:12px var(--hrc-section-padding);
  border-block-start:1px solid var(--hrc-border);
  background:var(--hrc-surface);
  color:var(--hrc-ink-subtle); font-size:12.5px;
}
.hrc-pager__size { display:flex; align-items:center; gap:8px; }
.hrc-pager__size select {
  font:inherit; font-size:12.5px; block-size:28px; padding:0 6px;
  border:1px solid var(--hrc-border-strong); border-radius:var(--hrc-radius-xs);
  background:var(--hrc-surface); color:var(--hrc-ink); cursor:pointer;
}
.hrc-pager__pages {
  margin-inline-start:auto; display:flex; gap:4px; flex-wrap:wrap;
}
.hrc-pager__page {
  min-inline-size:30px; block-size:30px; padding:0 8px;
  display:inline-grid; place-items:center;
  border:1px solid var(--hrc-border); border-radius:var(--hrc-radius-xs);
  background:var(--hrc-surface); color:var(--hrc-ink);
  font:inherit; font-size:12.5px; font-variant-numeric:tabular-nums;
  text-decoration:none; cursor:pointer;
}
.hrc-pager__page:hover, .hrc-pager__page:focus-visible {
  background:var(--hrc-surface-hover); color:var(--hrc-ink);
  border-color:var(--hrc-accent);
}
.hrc-pager__page[aria-current="page"] {
  background:var(--hrc-accent); border-color:var(--hrc-accent);
  color:var(--hrc-accent-on); font-weight:600;
}
.hrc-pager__page[aria-disabled="true"] {
  opacity:.4; cursor:not-allowed; pointer-events:none;
}
.hrc-pager__page--gap { border-color:transparent; background:transparent; cursor:default; }
.hrc-pager__page svg { inline-size:12px; block-size:12px; }

/* --- §17.9  .hrc-datagrid wrapper + horizontal-scroll container --------- */
/* The outer wrapper the razor emits. Container-query context so any inner
   primitive can reflow on the grid's own width, not the viewport (ui skill §8). */
.hrc-datagrid {
  display:flex; flex-direction:column; gap:0;
  container-type:inline-size;
  max-inline-size:100%;
  /* Every URL the grid emits ends with #hrc-datagrid-{key} so Search / Sort /
     Page / chip-remove all scroll back to the grid on navigate. scroll-margin
     leaves the page header visible above it. */
  scroll-margin-top:var(--hrc-space-lg);
}

/* Empty-state padding when the caller's <EmptyState> renders inside the grid. */
.hrc-datagrid__empty {
  padding-block:var(--hrc-space-2xl);
  background:var(--hrc-surface);
}

/* Correlation-id line inside a load-error alert (rendered by FormAlert). */
.hrc-datagrid__error-ref {
  margin-block-start:var(--hrc-space-sm);
  color:var(--hrc-ink-subtle);
  font-family:var(--hrc-font-mono, monospace);
  font-size:0.875rem;
}

.hrc-datagrid__scroll {
  /* Wide content scrolls HORIZONTALLY inside this container, never on the
     page (ui skill §8). overflow-x:auto is the responsive contract made
     concrete. Also the surrounding container that lets sticky <td> work.
     P5.4-fixes (2026-08-03) MYS: 10px rounded corners + full border + inline
     margin so the grid table reads as a distinct card inside the parent
     card, not flush to the card's edges. Radius matches --hrc-radius-sm.

     Packet P8.2 (2026-08-08): added block-start margin (was 0) and widened
     the inline margin by --hrc-space-sm each side. Before P8.2 the sticky
     table header sat visually flush against the outer Section card corners,
     which read as the header overshooting the rounded border (see MYS defect
     screenshot defects/05-Aug2026-Round2-/small-quirk...). The added padding
     gives the datagrid-in-card its own visible breathing room from every
     side of the parent Section - same fix helps every list page that uses
     the shared DataGrid (Audit log, Companies, Users, User Groups, etc). */
  overflow:hidden auto;
  overflow-x:auto;
  margin: var(--hrc-space-sm)
          calc(var(--hrc-section-padding) + var(--hrc-space-sm))
          var(--hrc-space-sm);
  border:1px solid var(--hrc-border);
  border-radius:var(--hrc-radius-sm);
  background:var(--hrc-surface);
}
.hrc-datagrid__scroll .hrc-grid { border:0; }

/* --- §17.10  loading skeleton (cheap; not wired to consumers yet) ------ */
.hrc-grid--skel td { block-size:var(--_row-h); }
.hrc-skel-line {
  display:block; block-size:12px; border-radius:6px;
  background:color-mix(in srgb, var(--hrc-neutral-soft) 60%, transparent);
}
.hrc-skel-line--sm { inline-size:60%; }
.hrc-skel-line--md { inline-size:80%; }
.hrc-skel-line--lg { inline-size:100%; }

/* --- §17.11  container-query reflow at narrow grid widths --------------- */
@container (max-inline-size: 30rem) {
  .hrc-card-head--stack .hrc-toolbar {
    /* Toolbar wraps to two rows when the grid is inside a narrow container
       (e.g. a two-column dashboard tile). */
    flex-wrap:wrap; align-items:stretch;
  }
  .hrc-pager { justify-content:center; }
}

/* --- §17.12  print stylesheet (folded from datagrid.css v2) ------------ */
/* MYS 2026-07-26: "print prints the grid with the header of the grid, just
   what's on screen, PDF spits out one page." Save-as-PDF from the browser
   print dialog delivers the PDF path — no library, and the browser shapes
   Arabic correctly.

   PRINT ISOLATION: datagrid.js MOVES the clicked grid into a marker container
   at the end of body, calls window.print(), then moves it back on afterprint.
   This CSS just hides every direct-of-body sibling that is not that marker
   container. No :has(), no visibility inheritance games, no absolute-positioning
   tricks — just display:none on siblings. (v1 used visibility inheritance +
   :has() + absolute positioning; it looked right in unit tests but rendered
   blank on real print media.) */

.hrc-datagrid__print-summary { display:none; }

@media print {
  body.hrc-print-only-grid > *:not(.hrc-datagrid-print-container) {
    display:none !important;
  }

  /* Base behaviour when NOT print-isolated: still hide app-shell + grid chrome
     so the printed output focuses on data. */
  .hrc-shell__rail,
  .hrc-shell__topbar,
  .hrc-shell__footer,
  .hrc-appearance-corner,
  .hrc-toolbar,
  .hrc-filter-chips,
  .hrc-bulk-bar,
  .hrc-pager,
  .hrc-grid__check,
  .hrc-grid__actions {
    display:none !important;
  }

  /* Filter-summary line is HIDDEN on screen (chips are the interactive version)
     and REVEALED in print — chips would print as pill shapes with a close
     button next to the value, giving a wrong impression of what is active. */
  .hrc-datagrid__print-summary {
    display:block !important;
    margin-block-end:var(--hrc-space-sm);
    color:#000; font-size:0.875rem;
  }

  .hrc-datagrid,
  .hrc-datagrid__scroll,
  .hrc-grid {
    border:0 !important; color:#000 !important; background:#fff !important;
    overflow:visible !important; inline-size:100% !important;
  }
  .hrc-grid td { border-color:#000 !important; color:#000 !important; background:transparent !important; }
  .hrc-grid th { border-block-end:2px solid #000 !important; background:transparent !important; color:#000 !important; }

  /* Repeat the header on every printed page. */
  .hrc-grid thead { display:table-header-group; }
  /* Never break a row across pages. */
  .hrc-grid tbody tr { page-break-inside:avoid; }
}

/* =============================================================================
   §18  FORM-EDIT primitives - sectioned edit form, sticky footer, help panel
   (packet P5.4, 2026-08-03). Ported from design/prototypes/harbor/form-edit.html
   with the shipped hrc- prefix. Every full-page edit form assembles from these
   plus the existing .hrc-form / field / control primitives. Semantic tokens
   only; DesignTokenTests stays green.
   ============================================================================= */

/* Numbered section badge - drops inline before a section title so a customer
   can see "1 of 4 sections" at a glance in a long form. Used inside Section's
   <Title> RenderFragment or any <h2> heading. Vertical-align tuning offsets
   the badge against the surrounding text's cap height. */
.hrc-section-num {
  inline-size:26px; block-size:26px; border-radius:8px;
  background:var(--hrc-accent-soft); color:var(--hrc-accent);
  font-weight:650; font-size:12px;
  display:inline-grid; place-items:center;
  vertical-align:-6px; margin-inline-end:10px;
}

/* Sticky form footer: bottom-anchored bar with dirty-status left + actions
   right. Stays visible while scrolling a long form. Never a modal - a page
   transition prompts via the standard Blazor navigation guard (later
   packet). Solid surface with a hairline top border + soft inset shadow so
   it reads anchored, not floating. */
.hrc-form-foot {
  position:sticky; inset-block-end:0; z-index:6;
  display:flex; align-items:center; gap:12px;
  padding:12px var(--hrc-density-pad);
  background:var(--hrc-surface);
  border-block-start:1px solid var(--hrc-border);
  box-shadow:0 -6px 18px rgba(20,27,45,.06);
}
[data-theme="dark"] .hrc-form-foot { box-shadow:0 -6px 18px rgba(0,0,0,.35); }

.hrc-form-foot-status {
  font-size:12.5px; color:var(--hrc-ink-subtle);
  display:inline-flex; align-items:center; gap:6px;
}
.hrc-form-foot-status svg { inline-size:14px; block-size:14px; }
/* Dirty variant: form-dirty.js unhides this and updates its text
   ("N unsaved changes"). Hidden until dirty>0 to avoid "0 unsaved changes"
   noise. */
.hrc-form-foot-status--dirty {
  color:var(--hrc-warn); font-weight:600;
}
.hrc-form-foot-status[hidden] { display:none; }

.hrc-form-foot-actions {
  margin-inline-start:auto;
  display:flex; gap:8px; flex-wrap:wrap;
}

/* Field-in-error state marker. Consumers set data-invalid="true" on the input
   (matches aria-invalid). Border + focus ring switch to --hrc-crit. The
   accompanying .hrc-field__error uses existing token vocabulary. */
.hrc-input[data-invalid="true"],
.hrc-select[data-invalid="true"] {
  border-color:var(--hrc-crit);
}
.hrc-input[data-invalid="true"]:focus-visible,
.hrc-select[data-invalid="true"]:focus-visible {
  outline-color:var(--hrc-crit); border-color:var(--hrc-crit);
}

/* Help side panel: contextual tips card next to the form. Flatter tinted
   accent look so it visually separates from the primary form sections.
   Reused inside .hrc-two-col aside slots. */
.hrc-help-panel {
  background:var(--hrc-accent-soft);
  border:1px solid color-mix(in srgb, var(--hrc-accent) 22%, transparent);
}
.hrc-help-panel .hrc-card__head {
  border-block-end-color:color-mix(in srgb, var(--hrc-accent) 18%, transparent);
}
.hrc-help-panel .hrc-card__title { color:var(--hrc-accent); font-size:13px; }
.hrc-help-list {
  display:flex; flex-direction:column; gap:14px;
  margin:0; padding:0; list-style:none;
}
.hrc-help-item {
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.5px; color:var(--hrc-ink-muted); line-height:1.55;
}
.hrc-help-item-icon {
  inline-size:24px; block-size:24px; border-radius:6px;
  display:grid; place-items:center; flex:none;
  background:var(--hrc-surface); color:var(--hrc-accent);
}
.hrc-help-item-icon svg { inline-size:13px; block-size:13px; }
.hrc-help-item b {
  color:var(--hrc-ink); font-weight:650;
  display:block; margin-block-end:2px;
}

/* Packet P6 (2026-08-04) - tiny utilities for the User Group + User Maintenance pages.
   Kept in harbor.css so the strict-CSP inline-style ban stays enforceable. */
.hrc-inline-form { display: inline; }
.hrc-pill--pushed-start { margin-inline-start: 0.5rem; }
.hrc-pill--pushed-end { margin-inline-end: 0.25rem; }