/* "My ring" relationship-strength meter on the profile card. Five
   8x8 squares hairlined in --border, filled with brand halo colors
   when the tier is reached. Sits below profile-meta. The eyebrow
   ("YOUR RING") uses the existing .t-tag class for letter-spacing. */
.my-ring {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-13);
}
.my-ring-eyebrow { white-space: nowrap; }
.my-ring-segs {
  display: inline-flex;
  gap: 3px;
}
.my-ring .ring-seg {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.my-ring .ring-seg.on {
  border-color: transparent;
}
.my-ring-label { color: var(--text); }
.my-ring-label .muted { color: var(--text-dim); }
.my-ring.my-ring-compact {
  margin-top: 0;
  margin-bottom: 8px;
  padding-top: 6px;
  padding-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-sm);
}
.my-ring.my-ring-compact .ring-seg {
  width: 8px;
  height: 8px;
}

/* Inspector chip lists (multi-email, multi-affiliation). Each row is
   one EmailAddress or PersonOrganizationLink rendered as a hairline
   chip with kind/years/remove. The whole structure is meant to fit
   in the 360px inspector pane — long org names and emails wrap. */
.inspector-chip-list {
  list-style: none;
  margin: 4px 0 6px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Inline (row-flow) chip list for compact tag groups like
   ``Your relationship`` where each chip is small enough to flow
   horizontally without wrapping. The vertical-list variant above is
   used when each chip carries metadata and needs its own line. */
.inspector-chip-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.inspector-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  font-size: var(--fs-13);
}
.inspector-chip-value {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.inspector-chip-kind,
.inspector-chip-years {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tag);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}
.inspector-chip-primary {
  font-size: var(--fs-xs);
  color: var(--accent-text);
  background: var(--accent);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
}
.inspector-chip-action {
  font-size: var(--fs-xs);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.inspector-chip-action:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
.inspector-chip-remove {
  font-size: var(--fs-md);
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1;
}
.inspector-chip-remove:hover { color: var(--danger); }
.inspector-add-button {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  padding: 2px 8px;
}
.secondary-action.small {
  padding: 2px 8px;
  font-size: var(--fs-xs);
}

/* Inspector "Your relationship" inline editor — sits between the ring
   meter and the kv list. Eyebrow label above a full-width select so
   the taxonomy is visually distinct from read-only kv pairs below. */
.inspector-relationship-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.inspector-relationship-row select {
  width: 100%;
}
.inspector-rel-label {
  display: block;
}

/* Home dashboard tier-distribution grid. Six tiles in a row above
   the Recent/Featured Contacts list. Each tile is an anchor into the
   People list filtered by ring tier. Hairline border, no shadow,
   matches the count cards next to it. */
.ring-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}
.ring-tier-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
}
.ring-tier-tile:hover {
  background: var(--panel-2);
  text-decoration: none;
}
.ring-tier-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.ring-tier-count {
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--text);
  text-align: left;
  min-width: 2ch;
}
.ring-tier-label {
  font-size: var(--fs-13);
  color: var(--text-dim);
}

/* Lucide-style stroke icons (1.5px stroke, square caps/joins) inlined
   inside select buttons. Inherits color via currentColor — the icon
   tracks the button's text color through hover/focus/disabled. */
.lucide-icon {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
  flex-shrink: 0;
}
/* In flex contexts (nav items, buttons with display:flex), vertical-align
   is ignored — explicit alignment ensures the icon sits on the text
   baseline rather than the line-box centerline. */
.lucide-icon { align-self: center; }

/* Resize-handle grip hint: two centered vertical bars on the handle
   itself, drawn with currentColor so they pick up the accent on
   hover/focus where the handle background flips to var(--accent). */
.resize-handle::before {
  content: "";
  display: block;
  width: 2px;
  height: 24px;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background:
    linear-gradient(currentColor, currentColor) 0 0/2px 24px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 0/2px 24px no-repeat;
  width: 6px;
  color: var(--border);
  opacity: 0.6;
}
.resize-handle:hover::before,
.resize-handle:focus-visible::before,
.resize-handle.dragging::before {
  color: var(--accent-text);
  opacity: 1;
}

/* Semantic typography classes (additive scaffolding). Existing views use
   their own selectors; new surfaces should compose typography by class. */
.h-page  { margin: 0 0 4px 0; font-size: var(--fs-h1);   font-weight: 600; line-height: var(--lh-tight); color: var(--text); }
.h-name  { margin: 0 0 4px 0; font-size: var(--fs-name); font-weight: 600; line-height: var(--lh-tight); color: var(--text); }
.h-hero  { margin: 0;          font-size: var(--fs-hero); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--text); }
.t-sub   { font-size: var(--fs-13); color: var(--text-dim); }
.t-body  { font-size: var(--fs-13); line-height: var(--lh-base); color: var(--text); }
.t-eyebrow { font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-dim); }
.t-tag     { font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-tag);     text-transform: uppercase; color: var(--text-dim); }
.t-mono    { font-family: var(--font-mono); font-size: var(--fs-13); }
.t-numeric { font-variant-numeric: tabular-nums; text-align: right; }

/* Settings page controls (theme toggle, phase indicator) */
.settings-control-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
}
.settings-control-row .label { color: var(--text-dim); flex: 0 0 180px; }
.settings-phase-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-dim);
}
.context-zone-head {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
}
.context-zone-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.context-zone-sub {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-dim);
}
.context-section {
  padding: 10px 0 0;
}
.context-section-label {
  margin: 0;
  padding: 0 12px 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.context-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.context-link {
  display: block;
  padding: 6px 12px;
  border-left: 3px solid transparent;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.context-link:hover {
  background: var(--panel);
  text-decoration: none;
}
.context-link.active {
  border-left-color: var(--accent);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}

.nav-zone .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 12px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--text);
}
.nav-zone .brand:hover {
  text-decoration: none;
  background: var(--panel-2);
}
.nav-zone .brand-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  /* Inline-style the SVG variables so the mark adapts to the dark nav. */
  --brand-frame: var(--brand-ink);
  --brand-bg: var(--brand-navy);
}
.nav-zone .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.nav-zone .brand-word {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.nav-zone .brand-tag {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav-zone ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  width: 58px;
}

.nav-zone li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 1px auto;
  padding: 0;
  color: var(--text);
  border-radius: var(--r-lg);
  border-left: 0;
  position: relative;
  text-decoration: none;
}
.nav-zone li a:hover {
  text-decoration: none;
  background: var(--panel-2);
}
.nav-zone li a.active {
  background: var(--brand-navy);
  color: var(--brand-ink);
}

/* Rail icons */
.nav-zone ul.has-icons li a {
  justify-content: center;
  gap: 0;
}
.nav-zone ul.has-icons .nav-icon {
  color: inherit;
  flex: 0 0 auto;
}

/* Floating label tooltips — appear to the right of the icon on hover/focus */
.nav-label {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--brand-navy);
  color: var(--brand-ink);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  z-index: 100;
  transition: opacity 0.12s;
}
.nav-zone li a:hover .nav-label,
.nav-zone li a:focus-visible .nav-label {
  opacity: 1;
}

.nav-zone li a.disabled-link {
  color: var(--text-dim);
  cursor: not-allowed;
}

.badge-disabled {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text-dim);
}

.nav-foot {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* In the narrow rail, health/runtime pills overflow the column.
   Hide them visually but keep in DOM so JS checks still work. */
#health-indicator,
#runtime-surface-marker {
  display: none;
}

.health-pill {
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  color: var(--text-dim);
}
.health-pill.ok { color: var(--good); }
.health-pill.degraded { color: var(--warn); }
.health-pill.down { color: var(--danger); }

.work-zone {
  grid-area: main;
  padding: 16px 20px;
  min-width: 0;
  overflow-y: auto;
  overflow-x: auto;
}
/* Hide the programmatic-focus ring when the skip link lands here, but
   keep it for keyboard users that Tab into the region directly. */
.work-zone:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -40px;
  z-index: 1000;
  padding: 6px 10px;
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}

/* Visually-hidden table caption for screen-reader context.
   Keeps tabular layout unchanged for sighted users while letting
   AT users hear "<N> inferred signals projected from this artifact"
   when entering the table. */
.sr-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.work-zone h1 {
  margin: 0 0 4px 0;
  font-size: 20px;
}
.work-zone .sub {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 16px;
}

.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;
}

.inspector-empty {
  color: var(--text-dim);
  font-size: 13px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
table thead th {
  font-weight: 500;
  color: var(--text-dim);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 3;
}

tr.row {
  cursor: pointer;
}
tr.row:hover {
  background: var(--panel-2);
}
tr.row.selected {
  background: var(--accent-dim);
}

.lifecycle-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.lifecycle-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
}
.lifecycle-badge[data-state="raw_evidence"]::before { background: var(--raw); }
.lifecycle-badge[data-state="candidate"]::before { background: var(--candidate); }
.lifecycle-badge[data-state="reviewed"]::before { background: var(--reviewed); }
.lifecycle-badge[data-state="accepted"]::before { background: var(--accepted); }
.lifecycle-badge[data-state="rejected"]::before { background: var(--rejected); }
.lifecycle-badge[data-state="superseded"]::before { background: var(--superseded); }
.lifecycle-badge[data-state="suppressed"]::before { background: var(--suppressed); }
.lifecycle-badge.unknown {
  border-color: var(--danger);
  color: var(--danger);
}
.lifecycle-badge.unknown::before {
  background: var(--danger);
}

tr.row:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.score-component-bar .fill.negative {
  background: var(--danger);
}
.score-component-bar[data-direction="negative"] {
  color: var(--danger);
}
.direction-marker {
  display: inline-block;
  font-size: 10px;
  margin-left: 2px;
}

/* Action buttons */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.primary-action,
.secondary-action {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.primary-action {
  background: var(--accent-dim);
  color: var(--text);
  border-color: var(--accent);
}
.primary-action:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-text);
}
.secondary-action {
  background: var(--panel-2);
  color: var(--text);
}
.secondary-action:hover:not(:disabled) {
  background: var(--panel);
}
.primary-action:disabled,
.secondary-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Destructive variant: paints the button in --danger so the action is
   visually distinct from a regular primary submit. Used by the Delete
   buttons in the delete/suppress confirmation dialogs. */
.primary-action.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.primary-action.danger:hover:not(:disabled) {
  filter: brightness(1.1);
}
.secondary-action.danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* Warning paragraph used in destructive-action dialogs to make the
   reversible/irreversible contrast unmistakable. */
.warning-text {
  border-left: 3px solid var(--danger);
  padding: 6px 10px;
  background: rgba(193, 57, 43, 0.06);
  font-size: 12px;
}

/* Toast host */
#toast-host {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  max-width: 380px;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  box-shadow: var(--sh-toast);
}
.toast-success {
  border-left-color: var(--good);
}
.toast-failure {
  border-left-color: var(--danger);
  background: var(--error-bg);
  color: var(--error-text);
}
.toast-info {
  border-left-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text);
}
.toast-message {
  flex: 1;
}
.toast-undo {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.toast-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}

/* Review queue cards */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.review-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
}
.review-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.follow-up-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.follow-up-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}

.follow-up-required {
  border-color: var(--danger);
  color: var(--danger);
}

.follow-up-open {
  border-color: var(--accent);
  color: var(--accent);
}

.follow-up-complete {
  border-color: var(--good);
  color: var(--good);
}

.follow-up-schedule-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.follow-up-schedule-btn:hover {
  border-color: var(--accent);
}

/* Page header action row (Add Person, Import, Add Organization, etc.).
   Sits between the page subtitle and the filter toolbar so primary CTAs
   are obvious without crowding the search bar. */
.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.toolbar input[type="search"],
.toolbar input[type="text"],
.toolbar select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-size: 13px;
  max-width: 100%;
}
/* Inline-label wrapper for toolbar selects whose default value isn't
   self-explanatory (e.g. the sort dropdown showing "most interactions").
   The text sits to the left of the select with a small gap, dim color,
   so the dropdown's purpose is obvious without making the toolbar look
   form-heavy. */
.toolbar-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: var(--fs-13);
}

.toolbar label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.toolbar .hidden-note {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-dim);
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
  color: var(--text-dim);
}
.empty-state h3 {
  margin: 0 0 8px 0;
  color: var(--text);
}
.empty-state code {
  background: var(--panel-2);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 12px;
}

.error-state {
  border: 1px solid var(--danger);
  background: var(--error-bg);
  border-radius: var(--r-lg);
  padding: 16px;
  color: var(--error-text);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
}
.card .num {
  font-size: 22px;
  font-weight: 600;
}
.card .label {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Closeout A — profile card visual hierarchy.
   Surfaces the three pieces of information the original spec asks for
   in deliberate descending priority: Name (largest), Org, Contact info,
   above the tab bar. Stays visible across all tab selections. */
.profile-card {
  margin: 0 0 12px 0;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.profile-card .profile-name {
  margin: 0 0 4px 0;
  font-size: 22px;
  line-height: 1.15;
}
.profile-card .profile-org {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}
.profile-card .profile-org.muted {
  color: var(--text-dim);
  font-style: italic;
}
.profile-card .profile-contact {
  font-size: 13px;
  margin-bottom: 6px;
}
.profile-card .profile-contact.muted {
  color: var(--text-dim);
  font-style: italic;
}
.profile-card .profile-email + .profile-email {
  margin-left: 0;
}
.profile-card .profile-meta {
  margin-bottom: 0;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  row-gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.tabs button {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 13px;
}
.tabs button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.review-surface-nav {
  margin: 8px 0 14px;
}

.review-surface-tabs {
  margin-bottom: 0;
}

.review-surface-tabs a {
  display: inline-block;
  color: var(--text-dim);
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-size: 13px;
}

.review-surface-tabs a:hover {
  color: var(--text);
  text-decoration: none;
}

.review-surface-tabs a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.review-surface-tabs a.active,
.review-surface-tabs a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 12px;
  font-size: 13px;
}
.kv dt {
  color: var(--text-dim);
}

.tag-chip {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 11px;
  margin-right: 4px;
}

.disabled-action {
  display: inline-block;
  padding: 6px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  background: transparent;
  font-size: 12px;
  cursor: not-allowed;
}
.disabled-action::after {
  content: " (UX-2: CLI only)";
  color: var(--warn);
  font-size: 10px;
}

.body-mode {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 11px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.score-component-bar {
  display: grid;
  grid-template-columns: 130px 1fr 60px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 4px;
}
.score-component-bar .bar {
  height: 6px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
}
.score-component-bar .fill {
  height: 100%;
  background: var(--accent);
}

.muted {
  color: var(--text-dim);
}

.numeric { font-variant-numeric: tabular-nums; text-align: right; }

/* Export panel (UX-3) */
.export-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  margin: 4px 0 12px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  font-size: 12px;
}
.export-panel strong {
  margin-right: 4px;
  color: var(--text-dim);
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag-chip.sensitive {
  border-color: var(--warn);
  color: var(--warn);
}
#manifest-dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  min-width: 360px;
  max-width: 600px;
}
#manifest-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.manifest-body h3 {
  margin: 0 0 8px 0;
}

dialog.modal-card {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 0;
  max-width: 520px;
  width: min(520px, calc(100vw - 32px));
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--sh-modal);
}
dialog.modal-card::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.modal-card form {
  padding: 20px;
}
.modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.modal-header h2 {
  margin: 0;
}
/* UX-HS-20260802-004: bulk-delete confirm dialog — scrollable list of the
   actually-targeted entry names, capped at a display count with a "+N
   more" suffix so a large selection doesn't blow out the dialog height. */
.bulk-delete-targets-list {
  max-height: 160px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  list-style: none;
  font-size: 13px;
}
.bulk-delete-targets-list li {
  padding: 2px 0;
}
.bulk-delete-targets-more {
  margin-top: 4px;
}
.stack {
  display: grid;
  gap: 14px;
}
.stack label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.stack .name-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stack input,
.stack textarea {
  width: 100%;
}
/* Add Contact modal: relationship matching grid. The container is
   scoped (`.relationship-option-grid`) so this layout does not leak
   into unrelated checkbox groups. Each row is one click target. */
.stack .relationship-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
}
.stack .relationship-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}
/* Defeat the broad `.stack input { width: 100% }` rule above so the
   checkbox stays its natural size and the label text sits flush
   against it. Without this, the checkbox stretches across the
   column and visually detaches from its label. */
.stack .relationship-option > input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
.stack .relationship-option .relationship-option-label {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 540px) {
  .stack .relationship-option-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.form-error {
  border: 1px solid var(--danger);
  background: var(--error-bg);
  color: var(--error-text);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
}
.icon-button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.icon-button:hover {
  color: var(--text);
}

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



/* Graph projection (UX-3.5) */
.graph-host {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  margin-top: 8px;
  min-height: 540px;
  overflow: hidden;
}
.graph-svg {
  width: 100%;
  height: 540px;
  display: block;
}
.graph-edge {
  stroke-width: 1.4;
  cursor: pointer;
}
.graph-edge.edge-claim {
  stroke: var(--accent);
}
.graph-edge.edge-coappearance {
  stroke: var(--text-dim);
  stroke-dasharray: 4 3;
}
.graph-edge.edge-affiliated_with {
  stroke: var(--candidate);
  stroke-width: 1;
}
.graph-edge.edge-sub_organization {
  stroke: var(--brand-2);
  stroke-width: 1.1;
}
.graph-edge:hover,
.graph-edge:focus-visible {
  stroke-width: 3;
  outline: none;
}
.graph-node {
  cursor: pointer;
}
.graph-node circle {
  stroke: var(--bg);
  stroke-width: 1.5;
}
.graph-node.node-person circle {
  fill: var(--accent);
}
.graph-node.node-organization circle {
  fill: var(--candidate);
}
.graph-node.node-superseded circle,
.graph-node.node-suppressed circle {
  fill: var(--suppressed);
}
.graph-node text {
  fill: var(--text);
  font-size: 11px;
  pointer-events: none;
}
.graph-node:focus-visible circle {
  stroke: var(--accent);
  stroke-width: 3;
}
.graph-legend {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  font-size: 12px;
}
.graph-legend ul {
  list-style: none;
  margin: 4px 0 12px 0;
  padding: 0;
}
.graph-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.graph-legend .swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.graph-legend .swatch.edge {
  width: 22px;
  height: 4px;
  border-radius: 2px;
}
.graph-legend .swatch.node-person { background: var(--accent); }
.graph-legend .swatch.node-organization { background: var(--candidate); }
.graph-legend .swatch.edge-claim { background: var(--accent); }
.graph-legend .swatch.edge-coappearance {
  background: var(--text-dim);
  background-image: repeating-linear-gradient(90deg, var(--text-dim) 0 4px, transparent 4px 7px);
}
.graph-legend .swatch.edge-affiliated_with { background: var(--candidate); }
.graph-legend .swatch.edge-sub_organization { background: var(--brand-2); }

.home-card-email {
  display: flex;
  gap: 4px;
  min-width: 0;
}

.home-card-email-label {
  flex: 0 0 auto;
}

.home-card-email-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* UX-4 deployment banners */
.deployment-banner {
  background: var(--error-bg);
  border-bottom: 1px solid var(--danger);
  color: var(--error-text);
  padding: 6px 12px;
  font-size: 12px;
  text-align: center;
}
.warning-banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  color: var(--warn-text);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 12px;
}

/* Home brand hero (UX-4 brand integration) */
.home-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-cyan);
  border-radius: var(--r-lg);
}
.home-hero-mark {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
}
.home-hero-text { display: flex; flex-direction: column; min-width: 0; }
.home-hero-title {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.home-hero-tag {
  margin: 2px 0 6px 0;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brand-cyan);
}

/* Home hero + 2x2 inventory metric grid. Hero left, four count cards
   arranged 2x2 on the right. Stacks below ~720px so narrow screens
   keep both readable. */
.home-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 18px;
  align-items: stretch;
}
.home-hero-row .home-hero { margin-bottom: 0; }
.home-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.home-hero-metrics .card {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Person-card action row: interaction entry lives in the person context.
   Keeps the "Log interaction" and "Inspect" buttons aligned on the card. */
.home-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .home-hero-row { grid-template-columns: minmax(0, 1fr); }
}

/* Shared person identity-summary card. Used at the top of the
   inspector AND the top of the profile route so both surfaces render
   the same dossier (name → title/org → primary email/phone → status +
   tags → provenance / last-updated). The `.id-summary[data-variant]`
   attribute lets the two contexts tune spacing/typography without
   duplicating layout logic. */
.id-summary {
  margin: 0 0 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.id-summary[data-variant="profile-card"] {
  padding: 14px 16px;
  margin-bottom: 8px;
  gap: 8px;
  border-radius: var(--r-lg);
}
.id-summary-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.id-summary-name {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}
.id-summary[data-variant="profile-card"] .id-summary-name {
  font-size: 22px;
}
.id-summary-org-row {
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.id-summary[data-variant="profile-card"] .id-summary-org-row {
  font-size: 15px;
}
.id-summary-org-sep {
  color: var(--text-dim);
}
.id-summary-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 13px;
}
.id-summary-contact-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.id-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
}
.id-summary-value {
  word-break: break-word;
  min-width: 0;
}
a.id-summary-value {
  color: var(--accent);
  text-decoration: none;
}
a.id-summary-value:hover {
  text-decoration: underline;
}
.id-summary-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.id-summary-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
}
.id-summary-meta-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.id-summary-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* Graph page — skill / expertise tag add toolbar. Sits between the
   export panel and the graph host. Disabled until a person node is
   selected; status text on the right explains why. */
.graph-skill-add {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.graph-skill-add-input {
  min-width: 240px;
  flex: 1 1 240px;
}
.graph-skill-add-status {
  flex: 1 1 220px;
  font-size: 12px;
}

.topbar-button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.topbar-button:hover:not(:disabled) {
  background: var(--accent-dim);
}
.topbar-button[aria-pressed="true"] {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent-text, var(--text));
}
.topbar-button.primary {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.topbar-button.primary:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-text);
}
.add-menu {
  position: absolute;
  z-index: 950;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-pop);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.add-menu[hidden] { display: none; }
.add-menu button {
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.add-menu button:hover { background: var(--accent-dim); }

/* Sidebar Add Entry — pops upward since it sits at the bottom of the nav. */
.nav-add {
  position: relative;
  margin-bottom: 8px;
}
.nav-add > .topbar-button {
  width: 42px;
  min-width: 0;
  padding: 6px;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}
.nav-add .add-menu {
  bottom: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 188px;
}
.search-popover {
  position: absolute;
  z-index: 900;
  top: 100%;
  left: 12px;
  right: 12px;
  max-width: 720px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-cyan);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--sh-search);
  max-height: 60vh;
  overflow-y: auto;
}
.search-popover[hidden] { display: none; }
.search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.search-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.search-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.search-chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
}
.search-group {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.search-group:last-child { border-bottom: none; }
.search-group-head {
  padding: 4px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.search-group-suppressed {
  background: rgba(106, 111, 122, 0.06);
}
.search-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--text);
}
.search-hit:hover, .search-hit:focus-visible {
  background: var(--panel-2);
  text-decoration: none;
}
.search-hit.suppressed {
  opacity: 0.7;
}
.search-hit-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  width: 80px;
  flex: 0 0 80px;
}
.search-hit-label { flex: 1; }
.search-empty { padding: 12px; }

/* Bulk bar (UX-6). WFG-HS-20260711-002: this rule and the later "Slice D"
   `.bulk-bar` rule below both defined the same class with different
   colors/radius/margin — the later rule silently won the cascade for every
   `.bulk-bar` on the page (people/organizations/imports-duplicates/match-
   candidates/relationships-tab), not just the review/provenance panels it
   was meant for. `font-size: 13px` is the one property only this rule set;
   folded into the surviving rule below so there is exactly one `.bulk-bar`
   declaration and no dead, silently-overridden CSS. */

/* Saved filters (UX-6 +) */
.saved-filter-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
  margin: 4px 0 12px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  font-size: 12px;
}
.saved-filter-panel strong {
  color: var(--text-dim);
  margin-right: 4px;
}

.graph-root-results {
  width: min(100%, 24rem);
  min-width: min(20rem, 100%);
  max-width: 100%;
}

@media (max-width: 640px) {
  .topbar-brand .brand-tag {
    display: none;
  }

  .work-zone,
  .inspector-zone {
    padding: 12px;
  }

  .search-popover {
    left: 8px;
    right: 8px;
  }

  .graph-root-results {
    min-width: 0;
  }
}
.saved-filter-select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: 12px;
  min-width: 200px;
}

/* CRM profile tab (Phase A) */
.profile-section {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
}
.profile-section h3,
.profile-section h4 {
  margin-top: 0;
  margin-bottom: 8px;
}
/* Collapsible repeating-section card. The <details>/<summary> pair is
   the host for any repeating profile card built by renderRepeatingSection
   (and the Publications module). Empty sections default to collapsed
   so the profile page is not dominated by blank cards; sections with
   data open by default. Scoped to .profile-section so the rules do not
   bleed into other <details> usages (e.g. raw-bibtex disclosure). */
.profile-section > .profile-section-details {
  margin: 0;
}
.profile-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 4px 0;
  font-weight: 600;
  font-size: 15px;
}
/* Hide the default disclosure triangle so the +Add control on the right
   can do the affordance work. Keep keyboard focus visible. */
.profile-section-summary::-webkit-details-marker { display: none; }
.profile-section-summary::marker { content: ""; }
.profile-section-title { flex: 1 1 auto; }
.profile-section-add {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.profile-section-add:focus-visible {
  outline: 2px solid var(--accent, #4a90e2);
  outline-offset: 1px;
}
.profile-section-details[open] > .profile-section-summary {
  margin-bottom: 6px;
}
.profile-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.profile-field {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.profile-field-label {
  color: var(--text-dim);
}
.profile-field input[type="text"],
.profile-field input[type="date"],
.profile-field select,
.profile-field textarea {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font: inherit;
  width: 100%;
}
.profile-flags-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  font-size: 12px;
}
/* Profile-form sub-section grouping: Identity & primary contact /
   Personal facts / Notes & tags. Reset fieldset's default browser
   chrome (3-D border, italic legend) so the grouping reads as a
   modern panel header, not a 1995 form. */
.profile-form-section {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin: 0;
  padding: 10px 12px;
  background: var(--panel-2);
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.profile-form-section + .profile-form-section {
  margin-top: 8px;
}
.profile-form-section-legend {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0 6px;
}
.profile-form-actions {
  margin-top: 10px;
}
.profile-unified-save {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--panel);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 10px;
}
.profile-repeat-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-repeat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-2);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.profile-repeat-cell {
  margin-right: 8px;
}
.profile-repeat-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.profile-repeat-add input[type="text"],
.profile-repeat-add input[type="date"],
.profile-repeat-add select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 6px;
  font-size: 12px;
}
.profile-notification-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.provenance-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
}
.provenance-chip[data-source="ai_suggestion"] {
  border-color: var(--brand-purple);
  color: var(--brand-purple);
}
.provenance-chip[data-source="import"] {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}
.provenance-chip[data-source="external_lookup"] {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan);
}
.ai-suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Generic status chips for ledger-style status cells.
 * Reuse the existing accent palette via the legacy variable names. */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.85em;
  border: 1px solid var(--border, #d0d4dc);
  background: var(--bg-elev, #f6f7fa);
}
.home-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.chip-myrel {
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--border);
}
.chip-ok { background: #e6f4ea; border-color: #b6dfc1; }
.chip-warn { background: #fff4d6; border-color: #e8c97a; }
.chip-err { background: #fde7e7; border-color: #e9b1b1; }
.chip-muted { color: #555; }
.small { font-size: 0.85em; }

/* Slice D — bulk action bar shown above review/provenance lists when
   one or more rows are checked. Sticky-ish but lightweight: appears
   inline at the top of the section so the count is visible without
   scrolling. This is the single `.bulk-bar` rule shared by every bulk
   toolbar on the page (see the WFG-HS-20260711-002 note above). */
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0 12px 0;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
}
.bulk-bar[hidden] {
  display: none;
}
.bulk-bar .bulk-count {
  font-weight: 600;
  margin-right: 6px;
}
.review-card-select {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

/* Resizable tables — opt-in via `.resizable-table`. Only tables that
   carry the class get fixed layout + truncation; ad-hoc tables in the
   app continue to auto-size. */
.resizable-table {
  table-layout: fixed;
  width: 100%;
}
.resizable-table th,
.resizable-table td {
  overflow: hidden;
}
.resizable-table thead th {
  position: sticky;
  top: 0;
  user-select: none;
}
.resizable-table .col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
  background: transparent;
  border-right: 1px solid transparent;
}
.resizable-table .col-resize-handle:hover,
.resizable-table .col-resize-handle:focus-visible {
  background: var(--accent-dim, rgba(120, 144, 200, 0.18));
  border-right-color: var(--accent, #4c70a0);
  outline: none;
}
.resizable-table .col-resize-handle.dragging {
  background: var(--accent, #4c70a0);
  border-right-color: var(--accent, #4c70a0);
}
.cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.people-table .person-name-trigger {
  display: block;
  width: 100%;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.people-table .person-name-trigger-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.people-table .person-name-trigger:hover .person-name-trigger-text {
  text-decoration: underline;
}
.people-table .person-name-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.people-table .status-cell {
  width: 22px;
  text-align: center;
  opacity: 0.85;
}
.people-table .network-action-cell {
  width: 28px;
  text-align: center;
}
.people-table .status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.people-table .status-dot-accepted {
  background: var(--accepted);
  border-color: var(--accepted);
}
.people-table .status-dot-candidate {
  background: transparent;
  border-color: var(--candidate);
}
.people-table .status-dot-unknown {
  width: 7px;
  height: 7px;
  background: transparent;
  border-color: var(--text-dim);
}
/* UX-HS-20260802-002: distinct dot color per remaining lifecycle state so
   suppressed/rejected/superseded/etc. read differently from each other and
   from the true "unknown" fallback above. */
.people-table .status-dot-reviewed {
  background: var(--reviewed);
  border-color: var(--reviewed);
}
.people-table .status-dot-rejected {
  background: var(--rejected);
  border-color: var(--rejected);
}
.people-table .status-dot-superseded {
  background: var(--superseded);
  border-color: var(--superseded);
}
.people-table .status-dot-suppressed {
  background: var(--suppressed);
  border-color: var(--suppressed);
}
.people-table .status-dot-raw_evidence {
  background: transparent;
  border-color: var(--raw);
}
.people-table .status-dot-polluted_quarantined {
  background: var(--danger);
  border-color: var(--danger);
}
.people-table .quick-interaction-cell {
  white-space: nowrap;
}
.people-quick-actions {
  display: inline-flex;
  gap: 2px;
}
.people-quick-action-btn {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.people-quick-action-btn:hover {
  background: var(--panel-2);
}
body.is-col-resizing {
  cursor: col-resize;
  user-select: none;
}
body.is-col-resizing * {
  cursor: col-resize !important;
}
.table-controls {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0;
}

/* Reduced-motion anchor. The SPA has no transitions today, so this
   block is intentionally empty — it exists as a documented insertion
   point for future motion work so animations that get added later
   are obliged to honor `prefers-reduced-motion` here, not buried
   alongside their feature definition. */
@media (prefers-reduced-motion: reduce) {
  /* intentionally empty — see comment above */
}

.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;
}
.topbar-select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
}
.topbar-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.inline-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.search-results-section {
  margin-top: 16px;
}

dialog.graph-modal {
  max-width: min(980px, calc(100vw - 32px));
  width: min(980px, calc(100vw - 32px));
}
.org-graph-modal-host {
  min-height: 360px;
}

/* --- Schedule dialog (Gate 6) --------------------------------------- */
dialog.schedule-dialog {
  max-width: 460px;
  width: min(460px, calc(100vw - 32px));
}
.schedule-form {
  gap: 12px;
}
.schedule-month-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.schedule-month-label {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  text-align: center;
}
.schedule-month-nav {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 6px);
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
}
.schedule-month-nav:hover {
  background: var(--hover, rgba(0, 0, 0, 0.05));
}
.schedule-calendar {
  display: grid;
  gap: 4px;
}
.schedule-cal-header,
.schedule-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.schedule-cal-weekday {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--muted, #6b7280);
  padding: 4px 0;
}
.schedule-cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  min-height: 32px;
}
.schedule-cal-cell.blank {
  background: transparent;
}
.schedule-cal-day {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-md, 6px);
  cursor: pointer;
  color: var(--text);
  padding: 0;
}
.schedule-cal-day:hover {
  background: var(--hover, rgba(0, 0, 0, 0.05));
  border-color: var(--border);
}
.schedule-cal-day.is-today {
  font-weight: 700;
  border-color: var(--border);
}
.schedule-cal-day.is-past {
  color: var(--muted, #9ca3af);
}
.schedule-cal-day.is-selected,
.schedule-cal-day.is-selected:hover {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
  font-weight: 600;
}
.schedule-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.schedule-time-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.schedule-time-input {
  font-size: 13px;
  padding: 4px 8px;
}
.schedule-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.schedule-preset {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--panel, #fff);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
}
.schedule-preset:hover {
  background: var(--hover, rgba(0, 0, 0, 0.05));
}
.schedule-summary {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  background: var(--surface-elevated, rgba(0, 0, 0, 0.03));
  border-radius: var(--r-md, 6px);
  text-align: center;
}
.schedule-note-input {
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  resize: vertical;
}
.schedule-note-label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Affiliation edit dialog (Gate 8) ------------------------------- */
dialog.affiliation-dialog {
  max-width: 520px;
  width: min(520px, calc(100vw - 32px));
}
.affiliation-summary {
  font-size: 13px;
  padding: 6px 10px;
  background: var(--surface-elevated, rgba(0, 0, 0, 0.03));
  border-radius: var(--r-md, 6px);
}
.affiliation-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 6px);
  padding: 4px;
}
.affiliation-result-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md, 6px);
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.affiliation-result-row:hover {
  background: var(--hover, rgba(0, 0, 0, 0.05));
}
.affiliation-result-row.is-selected,
.affiliation-result-row.is-selected:hover {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}
.org-people-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.org-people-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.org-people-row .secondary-action.small {
  margin-left: auto;
  font-size: 12px;
  padding: 3px 10px;
}

/* --- Relationship-claim score edit (Inspector) --------------------- */
.claim-score-edit {
  background: transparent;
  border: none;
  color: var(--accent, #2563eb);
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
  padding: 0 2px;
}
.claim-score-edit:hover {
  color: var(--accent-strong, #1d4ed8);
}
.score-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.score-input-row input[type="number"] {
  width: 80px;
}
.score-input-row input[type="range"] {
  flex: 1;
}

/* --- Task card readability (Gate 14) ------------------------------- */
.task-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 6px);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--panel, transparent);
}
.task-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.task-title {
  font-size: 14px;
}
.task-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.task-status-active {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}
.task-status-deferred {
  background: var(--surface-elevated, rgba(0, 0, 0, 0.05));
}
.task-status-follow_up_started,
.task-status-intro_made {
  background: var(--brand-green, #16a34a);
  color: #fff;
  border-color: var(--brand-green, #16a34a);
}
.task-status-disregarded,
.task-status-deleted {
  color: var(--muted, #6b7280);
}
.task-meta {
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin-top: 6px;
}
.task-kind {
  font-weight: 600;
  color: var(--text);
}
.task-due-rel {
  font-style: italic;
}
.task-due-rel.is-overdue {
  color: var(--brand-red, #dc2626);
  font-weight: 600;
}
.task-note {
  margin: 8px 0 4px 0;
  padding: 6px 10px;
  background: var(--surface-elevated, rgba(0, 0, 0, 0.03));
  border-radius: var(--r-md, 6px);
  font-size: 13px;
}
.task-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Skills page right-side inspector. Mounted by skills/skillInspector.js
   when a skill row is selected. Scoped to .skill-inspector so the rules
   never leak into other inspector surfaces. */
.skill-inspector { display: flex; flex-direction: column; gap: 12px; }
.skill-inspector-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.skill-inspector-name { margin: 0 0 4px 0; font-size: 18px; }
.skill-inspector-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.skill-inspector-body { display: flex; flex-direction: column; gap: 12px; }
.skill-inspector-section h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.skill-inspector-linked-list,
.skill-inspector-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skill-inspector-linked-item {
  padding: 4px 6px;
  border-radius: var(--r-sm);
  background: var(--panel-2, var(--panel));
}
.skill-inspector-search-row { margin-bottom: 6px; }
.skill-inspector-search { width: 100%; }
.skill-inspector-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel-2, var(--panel));
}
.skill-inspector-result-text { min-width: 0; flex: 1 1 auto; }
.skill-inspector-result-name { font-weight: 500; }
.skill-inspector-result-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-inspector-add[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Person profile Publications section. Mounted by
   static/people/personPublications.js when viewPerson(...) builds the
   profile panel. Scoped to .person-publications so the rules cannot
   bleed into other sections. */
.person-publications-list { margin-bottom: 12px; }
.person-publications-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.person-publications-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.person-publications-title { line-height: 1.35; }
.person-publications-add-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.person-publications-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
}
.person-publications-textarea {
  width: 100%;
  min-height: 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  resize: vertical;
}
.person-publications-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.person-publications-add[disabled],
.person-publications-clear[disabled] {
  opacity: 0.6;
  cursor: default;
}
.person-publications-error { white-space: normal; }
.person-publications-warnings { white-space: normal; }
.person-publications-raw {
  margin-top: 4px;
  font-size: 12px;
}
.person-publications-raw-pre {
  margin: 4px 0 0 0;
  padding: 6px 8px;
  background: rgba(127, 127, 127, 0.08);
  white-space: pre-wrap;
  overflow-x: auto;
}
.person-publications-item-actions {
  margin-top: 4px;
}
.person-publications-unlink {
  font-size: 12px;
}
.person-publications-coauthors { margin-top: 4px; }
.person-publications-coauthors-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.person-publications-coauthor-picks {
  list-style: none;
  padding-left: 18px;
  margin: 2px 0 0 0;
}
.person-publications-coauthor-pick label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* IEEE / provider search subsection inside the Publications card.
   Mounted by static/people/personPublicationSearch.js. Scoped to
   .publication-search-* so the rules never bleed into other inspector
   surfaces. */
.publication-search-host {
  margin: 12px 0;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}
.publication-search-status {
  font-size: 13px;
  margin-bottom: 6px;
}
.publication-search-query-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.publication-search-query-input { flex: 1 1 200px; min-width: 160px; }
.publication-search-from-date { flex: 0 0 130px; }
.publication-search-label { font-size: 13px; color: var(--text-dim); }
.publication-search-submit[disabled] { opacity: 0.6; cursor: default; }
.publication-search-error { margin: 4px 0; }
.publication-search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.publication-search-candidate {
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  padding: 6px 8px;
}
.publication-search-candidate-title { line-height: 1.3; }
.publication-search-candidate-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.publication-search-verify[disabled],
.publication-search-ignore[disabled],
.publication-search-reject[disabled] {
  opacity: 0.6;
  cursor: default;
}
.publication-search-coauthors {
  margin: 6px 0 0 0;
  font-size: 13px;
}
.publication-search-coauthors-summary {
  cursor: pointer;
  list-style: none;
}
.publication-search-coauthors-summary::-webkit-details-marker { display: none; }
.publication-search-coauthors-summary::marker { content: ""; }
.publication-search-coauthors-summary::before {
  content: "▸ ";
  font-size: 11px;
  color: var(--text-dim);
}
.publication-search-coauthors[open] > .publication-search-coauthors-summary::before {
  content: "▾ ";
}
.publication-search-coauthors-body { margin-top: 4px; }
.publication-search-coauthors-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.publication-search-coauthor-picks {
  list-style: none;
  padding-left: 18px;
  margin: 2px 0 0 0;
}
.publication-search-coauthor-pick label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* Capabilities — replaces the legacy Skills/Expertise/Other UI.
   Library page (.capability-*) and per-person panel
   (.person-capabilities-*). All selectors are scoped so the rules
   do not bleed into other surfaces. */
.capability-toolbar { gap: 8px; flex-wrap: wrap; }
.capability-add-toolbar { gap: 6px; flex-wrap: wrap; }
.capability-add-name { min-width: 200px; }
.capability-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.capability-table th,
.capability-table td { padding: 6px 8px; text-align: left; vertical-align: top; }
.capability-table th { border-bottom: 1px solid var(--border); font-weight: 600; }
.capability-table tbody tr + tr td { border-top: 1px solid var(--border); }
.capability-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.capability-facet-select { min-width: 160px; }

.person-capabilities-list { margin-bottom: 8px; }
.person-capabilities-facet { margin-bottom: 10px; }
.person-capabilities-facet-label {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.person-capabilities-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.person-capabilities-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}
.person-capabilities-item[data-review-status="suggested"] .person-capabilities-name,
.person-capabilities-item[data-review-status="needs_review"] .person-capabilities-name {
  font-style: italic;
}
.person-capabilities-item-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.person-capabilities-name { font-weight: 500; }
.person-capabilities-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.person-capabilities-status-badge[data-status="needs_review"] {
  background: rgba(204, 132, 0, 0.18);
  color: var(--text);
}
.person-capabilities-actions {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}
.person-capabilities-accept,
.person-capabilities-reject,
.person-capabilities-remove {
  font-size: 12px;
}
.person-capabilities-add { margin-top: 8px; }
.person-capabilities-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.person-capabilities-add-name { flex: 1 1 200px; min-width: 160px; }
.person-capabilities-add-facet { flex: 0 0 auto; }
.person-capabilities-add-submit[disabled] { opacity: 0.6; cursor: default; }

/* =====================================================================
 * Ledger-paper theme (2026-05 Hub-and-Spoken Workspace reference).
 *
 * Alternate theme — warm paper surface, navy ink, evidence-first ledger
 * typography. Activated by `:root[data-theme="ledger-paper"]`. The
 * default light theme and the existing dark theme are unchanged. See
 * docs/ux/hub-and-spoken-workspace-2026-05/theme-token-extraction.md
 * for the prototype → repo token map.
 * ===================================================================== */
:root[data-theme="ledger-paper"] {
  color-scheme: light;

  --bg: #f6f4ec;
  --panel: #ffffff;
  --panel-2: #efece2;
  --border: #e5e1d2;
  --text: #14213d;
  --text-dim: #4a5169;

  --accent: #0a1f4b;
  --accent-dim: #e8ecf7;
  --accent-text: #f6f4ec;

  --warn: #e09023;
  --danger: #b03a2e;
  --good: #2da882;

  --suppressed: #707283;
  --raw: #a5a795;
  --candidate: #e09023;
  --reviewed: #2ab8d0;
  --accepted: #2da882;
  --rejected: #b03a2e;
  --superseded: #8c5cea;

  --error-bg: #f6e7e3;
  --error-text: #5a1d14;
  --warn-bg: #faecd0;
  --warn-text: #5a3a05;

  /* Ledger-paper exclusive tokens (consumed by graph-analysis & any
     surface that opts in). Other themes can read them via fallback if
     they ever choose to. */
  --ledger-surface-2: #faf8f1;
  --ledger-surface-3: #f1eee2;
  --ledger-line-2: #d4cfbb;
  --ledger-line-strong: #b8b29a;
  --ledger-ink-3: #767a8a;
  --ledger-ink-4: #a5a795;
}

/* Provenance origin tokens — used by the Graph Analysis inspector and
   any future evidence/origin ribbon. Defined for every theme so the
   inspector renders correctly outside ledger-paper too. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"],
:root[data-theme="ledger-paper"] {
  --origin-import: var(--brand-cyan);
  --origin-manual: var(--text-dim);
  --origin-system: var(--brand-navy);
  --origin-ai: var(--brand-purple);
}

/* =====================================================================
 * Graph Analysis (#/graph-analysis) scaffold.
 *
 * Repo-native module; visually informed by the Hub-and-Spoken Workspace
 * prototype's GraphView (see docs/ux/hub-and-spoken-workspace-2026-05/).
 * Uses theme tokens so it adapts to light / dark / ledger-paper.
 * ===================================================================== */
.ga-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.ga-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ga-page h1 {
  margin: 0;
  font-size: var(--fs-h1);
  letter-spacing: -0.005em;
}
.ga-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-md);
}
.ga-toolbar .ga-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ga-toolbar select {
  font: inherit;
  padding: 3px 6px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.ga-toolbar .ga-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  cursor: pointer;
}
.ga-toolbar .ga-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.ga-toolbar .ga-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ga-toolbar .ga-chip .ga-count {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.7;
}
.ga-toolbar .ga-layout-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ga-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.ga-metric {
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-md);
}
.ga-metric .ga-metric-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ga-metric .ga-metric-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  color: var(--text);
  margin-top: 2px;
}

.ga-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}
@media (max-width: 960px) {
  .ga-grid { grid-template-columns: minmax(0, 1fr); }
}
.ga-canvas-host {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  position: relative;
  min-height: 480px;
}
.ga-canvas-svg-host svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
}
.ga-edge-family-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 0;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.ga-legend-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  max-width: min(560px, calc(100% - 24px));
}
.ga-legend-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--text);
  padding: 4px 8px;
  cursor: pointer;
}
.ga-legend-body {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  background: var(--panel);
}
.ga-fallback-list-host {
  margin-top: 8px;
}
.ga-legend-mask-hint {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--warn, var(--text-dim));
  padding-top: 4px;
}
.ga-legend-mask-hint:empty {
  display: none;
}

/* Read-only color legend (separate from the toggleable filter chips).
   Always full opacity so the family→color mapping stays readable when
   a chip is filtered off. */
.ga-legend-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ga-color-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 6px;
  border-bottom: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}
.ga-edge-count {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-dim);
}
.ga-color-legend .ga-legend-label {
  color: var(--text-dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: center;
}
.ga-color-legend .ga-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 1;
}
.ga-color-legend .ga-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.ga-color-legend .ga-legend-item-label {
  color: var(--text);
  font-size: 11px;
}

/* "Show all" clears family masking + frequent-only in one click. Style
   it as a subtle accent action so it stands apart from the toggle
   chips' aria-pressed states. */
.ga-legend .ga-chip-show-all {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  text-decoration: none;
  opacity: 1;
}
.ga-legend .ga-chip-show-all:hover {
  filter: brightness(1.05);
}
.ga-legend .ga-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
  border: 1px solid var(--border);
}
.ga-legend .ga-swatch-frequent {
  background: transparent;
  border-color: var(--text-dim);
  background-image: repeating-linear-gradient(
    135deg,
    var(--text-dim) 0 2px,
    transparent 2px 4px
  );
}
.ga-legend .ga-legend-label {
  align-self: center;
  color: var(--text-dim);
  font-size: 10.5px;
}
.ga-legend .ga-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  cursor: pointer;
}
.ga-legend .ga-chip[aria-pressed="false"] {
  opacity: 0.55;
  text-decoration: line-through;
}
.ga-legend .ga-chip[aria-pressed="true"] {
  opacity: 1;
  color: var(--text);
  border-color: var(--border);
}
.ga-legend .ga-chip[data-frequent-only][aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Node and edge primitives in the SVG. Stroke is set inline for status
   tokens; the class is here for hit-testing in tests and for hover. */
.ga-svg .ga-edge { transition: opacity 120ms ease; cursor: pointer; }
.ga-svg .ga-edge:hover { opacity: 1 !important; }
.ga-svg .ga-node { cursor: pointer; }
.ga-svg .ga-node-ring { fill: var(--panel); }
.ga-svg .ga-node-label {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--text-dim);
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.ga-svg .ga-node-label.ga-hub { font-weight: 600; font-size: 12px; fill: var(--text); }
.ga-svg .ga-node.ga-selected .ga-node-ring,
.ga-svg .ga-edge.ga-selected { stroke-width: 4 !important; }
.ga-svg .ga-attention-halo {
  fill: none;
  stroke: var(--warn);
  stroke-width: 2;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}

/* Inspector */
.ga-inspector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.ga-inspector h3 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
}
.ga-inspector .ga-inspector-section {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.ga-inspector .ga-inspector-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.ga-inspector .ga-row { display: flex; gap: 8px; align-items: center; }
.ga-inspector .ga-meta-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ga-inspector .ga-not-wired {
  font-size: 11.5px;
  color: var(--warn-text);
  background: var(--warn-bg);
  padding: 6px 8px;
  border-radius: var(--r-sm);
}
.ga-inspector .ga-action-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ga-inspector .ga-action-row button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Status chip — reuses the canonical status tokens. Status name is
   spelled out in the chip text, so color is never the only signal. */
.ga-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.ga-status-chip .ga-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.ga-status-chip.ga-status-raw_evidence { color: var(--raw); border-color: var(--raw); }
.ga-status-chip.ga-status-candidate    { color: var(--candidate); border-color: var(--candidate); }
.ga-status-chip.ga-status-reviewed     { color: var(--reviewed); border-color: var(--reviewed); }
.ga-status-chip.ga-status-accepted     { color: var(--accepted); border-color: var(--accepted); }
.ga-status-chip.ga-status-rejected     { color: var(--rejected); border-color: var(--rejected); }
.ga-status-chip.ga-status-suppressed   { color: var(--suppressed); border-color: var(--suppressed); }
.ga-status-chip.ga-status-superseded   { color: var(--superseded); border-color: var(--superseded); }
.ga-status-chip.ga-status-unsupported  { color: var(--text-dim); border-color: var(--border); }
.ga-status-chip.ga-status-unknown      { color: var(--text-dim); border-color: var(--border); }

/* Findings list */
.ga-findings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.ga-finding {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
.ga-finding:hover { border-color: var(--accent); }
.ga-finding .ga-finding-severity {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.ga-finding .ga-finding-severity.ga-sev-info    { background: var(--accent-dim); color: var(--accent); }
.ga-finding .ga-finding-severity.ga-sev-review  { background: var(--warn-bg); color: var(--warn-text); }
.ga-finding .ga-finding-severity.ga-sev-warning { background: var(--error-bg); color: var(--error-text); }
.ga-finding .ga-finding-title { font-weight: 500; }
.ga-finding .ga-finding-body { color: var(--text-dim); font-size: 12.5px; }

/* Confidence / strength meter — simple bar; reuses existing tokens. */
.ga-meter {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--panel-2);
  overflow: hidden;
}
.ga-meter > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* =====================================================================
 * Ledger grammar — eyebrow, section heading, status / origin /
 * confidence chips. Promoted from the 2026-05 graph-analysis slice so
 * Workspace Home (and future ports of the Claude design) can share one
 * chip vocabulary. See:
 *   docs/ux/hub-and-spoken-workspace-2026-05/parity-audit-slice-ab.md
 * Rule: color is never the only signal. Every chip carries its label
 * text + an aria-label.
 * ===================================================================== */

.ledger-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}
.ledger-section-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}
.ledger-section-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ledger-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
  white-space: nowrap;
  line-height: 1.4;
}
.ledger-chip.ledger-chip-sm {
  font-size: 10px;
  padding: 1px 6px;
}
.ledger-chip .ledger-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Status — full canonical vocabulary. Color tokens come from the theme. */
.ledger-chip-status-raw_evidence { color: var(--raw); border-color: var(--raw); }
.ledger-chip-status-candidate    { color: var(--candidate); border-color: var(--candidate); }
.ledger-chip-status-reviewed     { color: var(--reviewed); border-color: var(--reviewed); }
.ledger-chip-status-accepted     { color: var(--accepted); border-color: var(--accepted); }
.ledger-chip-status-rejected     { color: var(--rejected); border-color: var(--rejected); }
.ledger-chip-status-suppressed   { color: var(--suppressed); border-color: var(--suppressed); }
.ledger-chip-status-superseded   { color: var(--superseded); border-color: var(--superseded); }
.ledger-chip-status-unsupported  { color: var(--text-dim); border-color: var(--border); }
.ledger-chip-status-unknown      { color: var(--text-dim); border-color: var(--border); }

/* Origin */
.ledger-chip-origin-manual   { color: var(--text-dim); border-color: var(--border); }
.ledger-chip-origin-ai       { color: var(--brand-purple); border-color: var(--brand-purple); }
.ledger-chip-origin-import   { color: var(--brand-cyan); border-color: var(--brand-cyan); }
.ledger-chip-origin-external { color: var(--reviewed); border-color: var(--reviewed); }
.ledger-chip-origin-system   { color: var(--brand-navy); border-color: var(--brand-navy); }

/* Confidence */
.ledger-chip-confidence {
  gap: 6px;
  padding: 2px 10px;
}
.ledger-chip-confidence-high { color: var(--accepted); border-color: var(--accepted); }
.ledger-chip-confidence-mid  { color: var(--warn); border-color: var(--warn); }
.ledger-chip-confidence-low  { color: var(--rejected); border-color: var(--rejected); }
.ledger-chip-confidence-unknown { color: var(--text-dim); border-color: var(--border); }
.ledger-chip-confidence .ledger-chip-num { color: inherit; }
.ledger-chip-confidence .ledger-chip-meter {
  display: inline-block;
  width: 36px;
  height: 4px;
  background: var(--panel-2);
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
}
.ledger-chip-confidence .ledger-chip-meter > span {
  display: block;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
}

/* =====================================================================
 * Workspace Home — command-center layout (Slice B parity).
 * Adds a denser, ledger-flavored grouping of the home page. The
 * existing brand hero is preserved at the top; new panels render
 * below. The whole block reads from live backend endpoints. The
 * `pinned-people` panel is explicitly scaffolded because the backend
 * has no pin mechanism — labelled visibly so it can't be mistaken for
 * real data.
 * ===================================================================== */

.ws-page-title {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: var(--lh-tight);
}

.home-legacy-details {
  margin: 0;
}
.home-legacy-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 0;
  list-style: none;
  user-select: none;
}
.home-legacy-summary::-webkit-details-marker { display: none; }
.home-legacy-summary::before {
  content: "▶";
  font-size: 9px;
  transition: transform 0.15s;
  display: inline-block;
}
.home-legacy-details[open] > .home-legacy-summary::before {
  transform: rotate(90deg);
}
.home-legacy-summary:hover { color: var(--text); }

.workspace-home {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.workspace-home .ws-eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.workspace-home .ws-eyebrow-row .ledger-eyebrow {
  font-size: 11px;
}
.workspace-home .ws-updated {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.workspace-home .ws-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px;
}
@media (max-width: 920px) {
  .workspace-home .ws-metrics { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
.workspace-home .ws-metric {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.workspace-home .ws-metric:hover {
  border-color: var(--ledger-line-strong, var(--text-dim));
}
.workspace-home .ws-metric .ws-metric-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}
.workspace-home .ws-metric .ws-metric-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
}
.workspace-home .ws-metric .ws-metric-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.workspace-home .ws-metric.ws-metric-warn .ws-metric-num { color: var(--warn); }
.workspace-home .ws-metric.ws-metric-good .ws-metric-num { color: var(--good); }
.workspace-home .ws-metric[aria-disabled="true"] {
  opacity: 0.7;
  cursor: not-allowed;
}

.workspace-home .ws-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px) {
  .workspace-home .ws-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .workspace-home .ws-grid { grid-template-columns: 1fr; }
}
.workspace-home .ws-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.workspace-home .ws-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.workspace-home .ws-panel-head h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.workspace-home .ws-panel-head .ws-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.workspace-home .ws-panel-empty {
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 8px 0;
}

.workspace-home .ws-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.workspace-home .ws-row:first-of-type { border-top: 0; }
.workspace-home .ws-row:hover { background: var(--panel-2); }
.workspace-home .ws-row .ws-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.workspace-home .ws-row .ws-row-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-home .ws-row .ws-row-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-home .ws-row .ws-row-chips {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workspace-home .ws-scaffold-note {
  font-size: 11.5px;
  color: var(--warn-text);
  background: var(--warn-bg);
  padding: 6px 8px;
  border-radius: var(--r-sm);
}

/* Slice C — Person profile + People list ledger grammar */
.person-ledger-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
.person-ledger-row .ledger-eyebrow {
  font-size: 11px;
}
/* Slice D — Review + Imports ledger grammar */
/* Job-status chips reuse the ledger-chip shell. Job status is a distinct
   domain from the canonical claim lifecycle, so it gets its own color
   variants rather than being aliased to accepted/rejected/candidate. */
.ledger-chip-job-succeeded       { color: var(--accepted); border-color: var(--accepted); }
.ledger-chip-job-succeeded .ledger-chip-dot { background: var(--accepted); }
.ledger-chip-job-failed          { color: var(--rejected); border-color: var(--rejected); }
.ledger-chip-job-failed .ledger-chip-dot    { background: var(--rejected); }
.ledger-chip-job-partial_failure { color: var(--candidate); border-color: var(--candidate); }
.ledger-chip-job-partial_failure .ledger-chip-dot { background: var(--candidate); }
.ledger-chip-job-pending         { color: var(--text-dim); border-color: var(--border); }
.ledger-chip-job-pending .ledger-chip-dot   { background: var(--text-dim); }
.ledger-chip-job-unknown         { color: var(--text-dim); border-color: var(--border); }
.ledger-chip-job-unknown .ledger-chip-dot   { background: var(--text-dim); }

/* Slice E — Graph parity hardening */
/* Tag chips are NOT statuses; they get a distinct, neutral visual so a
   tag cannot be mistaken for a canonical-lifecycle value. */
.ga-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-dim);
  background: transparent;
}

/* =====================================================================
   Blockers / Data-quality scan view (#/blockers)
   Slice introduced to surface `/api/data-quality-scan` findings.
   All selectors are namespaced to `.blockers-` so this view cannot
   leak into other surfaces.
   ===================================================================== */
.blockers-view { display: flex; flex-direction: column; gap: 16px; }
.blockers-head h1 { margin: 0; }
.blockers-lede { margin: 4px 0 0 0; }
.blockers-loading { padding: 12px 0; }
.blockers-error { margin-top: 8px; }

.blockers-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  align-items: center;
  justify-content: space-between;
}
.blockers-status { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.blockers-status-label { font-size: 11px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.08em; }
.blockers-status-value { font-weight: 600; font-size: 16px; }
.blockers-status[data-status="ok"] .blockers-status-value { color: var(--accepted); }
.blockers-status[data-status="warning"] .blockers-status-value { color: var(--candidate); }
.blockers-status[data-status="blocked"] .blockers-status-value { color: var(--rejected); }
.blockers-status[data-status="error"] .blockers-status-value { color: var(--rejected); }
.blockers-status-time { font-size: 11px; }

.blockers-metrics { display: flex; gap: 10px; flex-wrap: wrap; }
.blockers-metric {
  min-width: 96px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-2);
  display: flex; flex-direction: column; gap: 2px;
}
.blockers-metric-label { font-size: 11px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.06em; }
.blockers-metric-num { font-size: 20px; font-weight: 600; }
.blockers-metric-blocker .blockers-metric-num { color: var(--rejected); }
.blockers-metric-warning .blockers-metric-num { color: var(--candidate); }
.blockers-metric-accepted .blockers-metric-num { color: var(--text-dim); }

.blockers-section {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.blockers-section-head h2 { margin: 0; font-size: 16px; }
.blockers-section-sub { margin: 2px 0 0 0; font-size: 12.5px; }
.blockers-section-empty { font-size: 13px; margin: 0; }
.blockers-section-blocker { border-left: 3px solid var(--rejected); }
.blockers-section-warning { border-left: 3px solid var(--candidate); }
.blockers-section-info { border-left: 3px solid var(--accent); }
.blockers-section-accepted { border-left: 3px solid var(--border); }

.blockers-scan { display: flex; flex-direction: column; gap: 6px; }
.blockers-scan-title { margin: 6px 0 4px 0; font-size: 13px; }
.blockers-scan-count { font-weight: 400; }

.blockers-finding-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.blockers-finding {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.blockers-finding-row { display: flex; gap: 8px; align-items: flex-start; }
.blockers-finding-severity {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.blockers-sev-blocker { background: var(--error-bg); color: var(--error-text); }
.blockers-sev-warning { background: var(--warn-bg); color: var(--warn-text); }
.blockers-sev-info { background: var(--accent-dim); color: var(--accent); }
.blockers-finding-main { flex: 1; min-width: 0; }
.blockers-finding-message { font-weight: 500; word-break: break-word; }
.blockers-finding-entity { font-family: var(--font-mono); font-size: 11.5px; }
.blockers-finding-raw summary { font-size: 11.5px; color: var(--text-dim); cursor: pointer; }
.blockers-finding-pre {
  margin: 4px 0 0 0;
  padding: 6px 8px;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  max-height: 240px;
  overflow: auto;
  white-space: pre;
}

/* ---- Smart Business Card review screen (SBC-IMPORT-05) -------------- */
.sbc-batch-list { list-style: none; padding: 0; margin: 8px 0; }
.sbc-batch-list li { padding: 4px 0; }
.sbc-candidates { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.sbc-candidate {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  padding: 12px 14px;
  background: var(--panel);
}
.sbc-candidate-rejected { opacity: 0.72; }
.sbc-candidate-accepted { border-color: var(--accent, #5a7); }
.sbc-candidate-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.sbc-candidate-name { font-size: 15px; }
.sbc-accept-reject { margin-left: auto; display: flex; gap: 6px; }
.sbc-subhead {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 10px 0 4px;
}
.sbc-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.sbc-edit-field { display: flex; flex-direction: column; gap: 2px; }
.sbc-edit-field input { width: 100%; }
.sbc-edit-error { color: var(--error-text); font-size: 12px; margin: 6px 0; }
.sbc-fields dt { color: var(--text-dim); }
.sbc-cp {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
}
.sbc-cp-disabled { opacity: 0.55; }
.sbc-cp-value { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
.sbc-cp-tag { font-size: 11px; }
.sbc-note { margin: 2px 0; }
.sbc-note-add { display: flex; gap: 6px; margin-top: 4px; }
.sbc-note-add input { flex: 1; }
.sbc-warnings { margin-top: 8px; }
.sbc-warning {
  border: 1px dashed var(--border);
  border-radius: var(--r-sm, 4px);
  padding: 6px 8px;
  margin: 4px 0;
}
.sbc-warning-unresolved { border-color: var(--warn-text, #c80); }
.sbc-warning-stale { border-color: var(--error-text, #c33); }
.sbc-warning-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sbc-warning-msg { margin: 3px 0; }
.sbc-warning-values, .sbc-warning-hint { font-size: 11.5px; }
.sbc-warning-state { margin: 4px 0; }
.sbc-stale-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--error-text);
  letter-spacing: 0.08em;
}
.sbc-resolution-controls {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px;
}
.sbc-resolution-note { flex: 1; min-width: 120px; }
.sbc-diagnostics { margin-top: 20px; }