/* onboarding.css — setup on the product screens: the workbook veil, the
   initialize + test beats, the Review-column chips, the Policy-page surfaces
   and the sidebar lock. The checklist page itself is css/onboarding-board.css.
   Tokens only; the raw hex literals below predate tokens.css and stay as-is. */

.onb-relink { display: block; margin-top: var(--space-3); border: 0; background: none; padding: 0;
  cursor: pointer; font-family: inherit; font-size: var(--text-xs); color: inherit; opacity: .75;
  border-bottom: 1px dashed currentColor; }
.onb-relink:hover { opacity: 1; }

.onb-cn-spin { width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--color-border-strong); border-top-color: var(--color-brand-500);
  animation: onb-cn-spin .8s linear infinite; }
@keyframes onb-cn-spin { to { transform: rotate(360deg); } }
tr.onb-diff-hide > td { opacity: 0; }
tr.onb-row-type > td { animation: onb-cell-type .3s cubic-bezier(0.32,0.72,0,1) both; }
@keyframes onb-cell-type {
  from { opacity: 0; transform: translateX(-7px); }
  to   { opacity: 1; transform: none; } }
.onb-testprog { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
  min-width: 340px; padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-card); border: 1px solid var(--color-border);
  background: var(--color-surface-0); box-shadow: 0 4px 16px rgba(17,24,39,.13); }
.onb-testprog-t { font-size: var(--text-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; }
.onb-testprog-t.ok { color: var(--color-success); font-weight: var(--weight-medium); }
.onb-testprog-bar { width: 100%; height: 5px; border-radius: var(--radius-pill);
  background: var(--color-surface-2); overflow: hidden; }
.onb-testprog-bar > span { display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--color-brand-500); transition: width .1s linear; }

.onb-b { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control); background: var(--color-surface-0); font-family: inherit;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); cursor: pointer; }
.onb-b:hover { background: var(--color-surface-1); }
.onb-b.primary { background: var(--color-brand-500); border-color: var(--color-brand-500);
  color: var(--color-pure-white); }
.onb-b.primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.onb-b.primary:disabled { opacity: .4; cursor: not-allowed; }

.onb-veiled > *:not(.onb-veil) { display: none !important; }
.onb-veil { display: flex; align-items: center; justify-content: center; flex: 1;
  width: 100%; min-height: min(340px, 55vh); padding: var(--space-10) var(--space-8);
  background: var(--color-surface-0); transition: opacity var(--dur-med); }
.onb-veil-card { max-width: 380px; text-align: center; }
.onb-veil-ic { width: 48px; height: 48px; margin: 0 auto var(--space-5); border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-1); color: var(--color-text-subtle);
  box-shadow: inset 0 0 0 1px var(--color-border); }
.onb-veil-t { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.onb-veil-s { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed);
  margin-top: var(--space-3); }
.onb-veil-btn { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5);
  padding: var(--space-3) var(--space-6); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control); background: var(--color-surface-0); color: var(--color-text);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
.onb-veil-btn:hover { border-color: var(--color-brand-500); color: var(--color-brand-500); }

.onb-legend { position: sticky; bottom: var(--space-4); z-index: 5; margin: 0 auto;
  width: fit-content; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  background: var(--color-surface-0); box-shadow: 0 4px 16px rgba(17,24,39,.13); }
body.onb-setup #tableWrap,
body.onb-setup #policyPage,
body.onb-setup #journalsPage,
body.onb-setup #driShell .dri-body { position: relative; }
body.onb-setup #driShell .dri-body { min-height: 480px; }
body.onb-initing #tbody tr { opacity: 0; }
body.onb-initing #tbody tr.onb-cell-pop { opacity: 1; }
tr.onb-cell-pop > td { opacity: 0; transform-origin: 50% 0;
  animation: onb-pop .34s cubic-bezier(0.32,0.72,0,1) both;
  animation-delay: var(--onb-d, 0ms); }
@keyframes onb-pop {
  from { opacity: 0; transform: perspective(700px) rotateX(-58deg); }
  to   { opacity: 1; transform: none; } }
.onb-init-t { font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text); }

.onb-ghost { position: absolute; inset: 0; padding: 44px 24px; display: flex; flex-direction: column; gap: 14px;
  filter: blur(3px); opacity: .55; pointer-events: none; user-select: none; overflow: hidden; }
.onb-ghost-row { display: flex; gap: 22px; }
.onb-ghost-cell { display: inline-block; height: 10px; border-radius: 5px; background: var(--color-surface-2); }

/* Sidebar destinations locked for the customer until Mesh says the workspace is ready (lock-by-view, js/21 onbSyncSidebar) */
body.onb-setup:not(.mesh-internal) .sb-icon.onb-locked { opacity: .32; pointer-events: none; filter: grayscale(1); }
/* No Ask Mesh during customer setup (body.customer-setup, js/21 onbSyncSidebar): the customer only provides
   files; open-ended questions go to a person. Belongs beside the #sbChat role rules in css/base.css — that
   file is not onboarding-owner's; move this line there when it lands. */
body.customer-setup #sbChat { display: none !important; }
/* Setup complete (T12, js/22 suSyncComplete): the setup icon goes; base.css reveals #sbDocs under the same class */
body.setup-complete #sbOnboard { display: none !important; }
/* The setup door is a workspace mode, not a page of the working prototype
   (Tong, 09/14). `/` boots the working prototype (#179), so the icon was
   opening a dead "Setup isn't running" card in a workspace where setup is not
   the point. It appears once a setup mode is running; the mode itself is
   picked from the avatar popover. */
body:not(.onb-setup) #sbOnboard { display: none !important; }

/* ── Review chips on the product screens (setup only) ── */
.rv-k { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; background: #fef3c7; color: #b45309; padding: 1px 6px; border-radius: 999px; }
.rv-ok { appearance: none; border: 1px solid #d1d5db; background: #fff; color: #111827; font: inherit; font-size: 11px; font-weight: 600; line-height: 16px; padding: 2px 8px; border-radius: 6px; cursor: pointer; }
.rv-ok:hover { border-color: #345def; color: #345def; }
/* The Review column */
td.rv-td { vertical-align: top; }
.rv-cell { display: flex; align-items: center; }
.rv-acts { display: inline-flex; align-items: center; gap: 4px; }
.sch-th-review { width: 150px; }
.rv-k--edit { background: #dbeafe; color: #1d4ed8; }
.rv-k--off { background: #f4f4f5; color: #71717a; }
.rv-k.is-ok { background: #dcfce7; color: #15803d; display: inline-flex; align-items: center; gap: 4px; }
.rv-chip:not(:empty) { margin-left: 8px; vertical-align: middle; }
.sch-group-count + .rv-chip:not(:empty) { margin-left: 10px; }
.rv-cell:empty { display: none; }
.stg-row .rv-cell--hover { opacity: 0; }
.stg-row:hover .rv-cell--hover, .stg-row:focus-within .rv-cell--hover { opacity: 1; }
.stg-row--removed .stg-row-info { opacity: .55; }
.rv-x { appearance: none; border: 1px solid transparent; background: transparent; color: #6b7280; font: inherit; font-size: 11px; font-weight: 600; line-height: 16px; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.rv-x:hover { color: #b91c1c; background: #fef2f2; }
tr.sch-flag > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.stg-row-review { flex: 0 0 130px; align-self: center; }
#stgPaneBody .stg-row-info { flex: 1 1 200px; min-width: 200px; }
.rv-cell--hover { opacity: 0; transition: opacity 0.12s; }
tr:hover .rv-cell--hover, tr:focus-within .rv-cell--hover { opacity: 1; }
.stg-row-why { font-size: 12px; color: #6b7280; line-height: 1.5; margin-top: 4px; max-width: 520px; }
.onb-flash { animation: onbFlash 1.8s ease-out; }
@keyframes onbFlash { 0% { background: #fef3c7; } 100% { background: transparent; } }
tr.onb-flash > td { animation: onbFlashTd 1.8s ease-out; }
@keyframes onbFlashTd { 0% { background: #fef3c7; } 100% { background: transparent; } }

/* ── The coach's checklist for the step ── */
.onb-review { margin-top: var(--space-3); border-top: 1px solid var(--color-border-subtle, #e5e7eb); padding-top: var(--space-3); }
.onb-review-h { font-size: var(--text-xs2); font-weight: 600; color: var(--color-text-subtle); margin-bottom: 6px; }
.onb-review-it { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: var(--text-xs2); line-height: 1.4; }
.onb-review-dot { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #d1d5db; display: inline-flex; align-items: center; justify-content: center; }
.onb-review-it.is-ok .onb-review-dot { border-color: #15803d; background: #15803d; color: #fff; }
.onb-review-it.is-ok .onb-review-t { color: var(--color-text-subtle); }
.onb-review-t { flex: 1 1 auto; }
.onb-review-it .onb-relink { flex: 0 0 auto; }
.onb-review-foot { margin-top: 6px; }
.onb-b[disabled] { opacity: .5; cursor: default; }

/* ── The policy questions on the Policy page (surface, cards, controls, the rule that rewrites itself) ── */
.onb-opts { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.onb-opt { display: flex; align-items: center; gap: var(--space-4); width: 100%; cursor: pointer;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-control); background: var(--color-surface-0); font-family: inherit;
  font-size: var(--text-sm); color: var(--color-text-strong); text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast); }
.onb-opt:hover { border-color: var(--color-border-strong); background: var(--color-surface-1); }
.onb-opt.on { border-color: var(--color-brand-500); background: var(--bg-info);
  box-shadow: inset 0 0 0 1px var(--color-brand-500); font-weight: var(--weight-medium); }
.onb-opt-mark { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--color-border-strong); }
.onb-opt.on .onb-opt-mark { border-color: var(--color-brand-500); border-width: 4px; }
.onb-opt-box { flex-shrink: 0; width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--color-border-strong); display: inline-flex; align-items: center;
  justify-content: center; color: transparent; }
.onb-opt.check.on .onb-opt-box { background: var(--color-brand-500); border-color: var(--color-brand-500);
  color: var(--color-pure-white); }

.onb-amt { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
  padding: 0 var(--space-5); background: var(--color-surface-0); }
.onb-amt:focus-within { border-color: var(--color-brand-500); box-shadow: var(--focus-ring); }
.onb-amt-pre { font-size: var(--text-md); color: var(--color-text-subtle); }
.onb-amt-in { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-family: inherit;
  font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-strong);
  padding: var(--space-3) 0; font-variant-numeric: tabular-nums; }

.onb-wf-n { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px;
  font-weight: var(--weight-bold); background: var(--color-surface-2); color: var(--color-text-subtle); }
/* ── The question inside a policy layer card ────────────────────────────── */
.onb-pv-q { font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--color-text-strong); }
.onb-pv-ask { font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: var(--leading-relaxed); margin-top: var(--space-2); }
.onb-pv-lb .onb-opts { margin-top: var(--space-4); max-width: 560px; }
.onb-pv-lb .onb-amt { margin-top: var(--space-4); max-width: 280px; }
.onb-pv-lb .onb-b.primary { margin-top: var(--space-5); }
.onb-pv-rule { margin-top: var(--space-5); min-height: 22px; max-width: 68ch;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  background: var(--bg-success); color: #14532d; font-size: var(--text-sm);
  line-height: var(--leading-relaxed); }
.onb-pv-rule.hint { background: var(--color-surface-1); color: var(--color-text-subtle); }
.onb-pv-rule.flash { animation: onb-rule-flash .22s ease-out; }
@keyframes onb-rule-flash { from { opacity: .25; } to { opacity: 1; } }
.onb-dots { display: inline-flex; align-items: center; gap: 4px; height: 1em; }
.onb-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-success);
  animation: onb-dot-hop .9s ease-in-out infinite; }
.onb-dots i:nth-child(2) { animation-delay: .15s; }
.onb-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes onb-dot-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .onb-dots i { animation: none; } }
.onb-surface { position: absolute; inset: 0; z-index: 60; overflow: auto;
  background: var(--color-surface-0); padding: var(--space-8) var(--space-8) var(--space-10); }

/* the policy page during setup */
.onb-pv { max-width: 720px; margin: 0 auto; }
.onb-pv-head { margin-bottom: var(--space-6); }
.onb-pv-t { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-xl);
  font-weight: var(--weight-semibold); color: var(--color-text-strong); letter-spacing: -.01em; }
.onb-pv-s { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: var(--leading-relaxed); max-width: 58ch; }
.onb-pv-l { display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface-0); margin-bottom: var(--space-3); }
.onb-pv-l.set { border-color: var(--color-success); }
.onb-pv-lh { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.onb-pv-lh b { font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--color-text-strong); }
.onb-pv-lh em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-subtle); }
.onb-pv-lb { font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: var(--leading-relaxed); padding-left: calc(16px + var(--space-3)); }
.onb-pv-l.set .onb-pv-lb { color: var(--color-text); }
.onb-pv-foot { margin-top: var(--space-4); font-size: var(--text-xs2); color: var(--color-text-subtle);
  line-height: var(--leading-relaxed); }
.onb-q-opts .onb-opts { margin-top: var(--space-4); max-width: 560px; }
.onb-q-opts .onb-amt { margin-top: var(--space-4); max-width: 280px; }
.onb-pv-gen { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
.onb-pv-gen .onb-pv-foot { margin-top: 0; max-width: 48ch; }

/* the SOP cards' actions, and the confirm bar over the draft change request */
.onb-pv-acts { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.onb-b--file { position: relative; overflow: hidden; cursor: pointer; }
.onb-b--file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.onb-pv-lh .rv-k { margin-left: 2px; vertical-align: middle; }
.onb-cbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 61; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: 14px 24px; background: var(--color-surface-0); border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(0,0,0,.06); }
.onb-cbar-t { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; }
.onb-cbar-t b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }

/* Journal preferences → Journal templates, while the customer's journal task is open:
   the sample's column beside the template column it matches, and the lead above the card */
.su-jr-map { display: inline-flex; align-items: center; margin-left: var(--space-3); padding: 1px var(--space-3); border-radius: var(--radius-pill);
  background: var(--bg-success); color: var(--color-success); font-size: var(--text-xs2); font-weight: var(--weight-semibold); white-space: nowrap; vertical-align: middle; }
.su-jr-map--mesh { background: var(--color-surface-2); color: var(--color-text-muted); }
.su-jr-lead { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-5); border: 1px solid var(--bg-success-strong); border-radius: var(--radius-card);
  background: var(--bg-success); color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-normal); }
.su-jr-lead b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }

/* the test panel above the rule list */
.onb-tpanel { margin: 0 0 var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-0); }
.onb-tp-t { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.onb-tp-s { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); max-width: 62ch; }
.onb-tp-run { display: flex; align-items: flex-end; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.onb-tp-lbl { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs2); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); }
.onb-tp-lbl select { min-width: 180px; }
.onb-tp-nums { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.onb-tp-nums b { color: var(--color-text-strong); }
.onb-tp-nums .onb-relink { margin: 0; }
.onb-tp-none { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }

/* a suggestion drawn inside its rule card: a left accent while it is undecided,
   and the sticky count in the policy header ("3 suggestions · Next") */
.pol-rule.onb-sugcard--open { box-shadow: inset 3px 0 0 var(--color-warning); }
.pol-rule.onb-sugcard--open.selected { box-shadow: inset 3px 0 0 var(--color-warning), 0 0 0 3px var(--bg-warning-strong); }
.onb-sugpill { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-3); height: 26px;
  padding: 0 var(--space-1) 0 var(--space-4); border: 1px solid var(--bg-warning-strong); border-radius: var(--radius-pill);
  background: var(--bg-warning); color: var(--color-warning); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.onb-sugpill-t b { font-weight: var(--weight-bold); }
.onb-sugpill-btn { height: 20px; padding: 0 var(--space-3); border: 1px solid var(--color-warning); border-radius: var(--radius-pill);
  background: var(--color-surface-0); color: var(--color-warning); font-family: inherit; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); cursor: pointer; }
.onb-sugpill-btn:hover { background: var(--bg-warning-strong); }
.pol-chg-chip.is-sug { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.pol-chg-chip.is-kept { background: #f4f4f5; color: #71717a; border: 1px solid #e4e4e7; }
.pol-rule.onb-sugcard .pol-rule-body { flex-wrap: wrap; }
.onb-sugnote { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 10px; }
.onb-sugnote .pol-rd-note { flex: 1 1 auto; }
.onb-sugnote .rv-acts { flex: 0 0 auto; gap: 6px; }
.pol-rule.onb-flash { animation: onbFlash 1.8s ease-out; }

/* The question surface covers the whole policy page; when the source panel is
   open it yields the right half to it, so the answers and their evidence sit
   side by side. The panel is js/05's own (.pol-sop-panel, 50%). */
#policyPage.sop-open #onbPolicyQ { right: 50%; }

/* ── The read: what Northwind sent, and what it became ────────────────────
   The evidence half of "Mesh drafts, you confirm". Citations sit under an
   answer and on a rule card; the passages themselves take over the Policy
   page's own right-hand panel (#polSopScroll) while the policy is drafted. */
.onb-cites { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.onb-cite { display: block; width: 100%; text-align: left; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand-500); border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--color-surface-1); font-family: inherit; cursor: pointer; }
.onb-cite:hover { background: var(--color-surface-2); border-left-color: var(--color-brand-500); }
.onb-cite-ref { display: block; font-size: var(--text-xs2); font-weight: var(--weight-semibold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-brand-500); }
.onb-cite-q { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text);
  line-height: var(--leading-normal); font-style: italic; }

/* the panel itself */
.onb-srcpanel { padding: 0; }
.onb-src { padding: var(--space-8); }
.onb-src-bar { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.onb-src-hd { padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.onb-src-t { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.onb-src-s { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-normal); }
.onb-src-count { margin-top: var(--space-4); font-size: var(--text-xs2); font-weight: var(--weight-semibold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-subtle); }
.onb-pass { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-surface-2); }
.onb-pass:last-child { border-bottom: 0; }
.onb-pass-ref { font-size: var(--text-xs2); font-weight: var(--weight-semibold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-subtle); }
.onb-pass-t { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text); line-height: var(--leading-relaxed); }
.onb-pass.is-read .onb-pass-t { color: var(--color-text-strong); }
.onb-pass.is-open .onb-pass-t { color: var(--color-text-muted); }
.onb-pass-to { margin-top: var(--space-3); padding: 0; border: 0; background: none; font-family: inherit;
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-brand-500); cursor: pointer; }
.onb-pass-to:hover { text-decoration: underline; }
.onb-pass-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-warning); line-height: var(--leading-normal); }
.onb-pass.is-asked .onb-pass-note { color: var(--color-text-subtle); }
.onb-pass.onb-flash { animation: onbFlash 1.8s ease-out; }

/* a drafted rule, on the product's own card, saying where it came from */
.onb-rulesrc { margin: var(--space-3) 0 0; padding: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted);
  line-height: var(--leading-normal); }
.onb-rulesrc-w { color: var(--color-text-subtle); }
.onb-rulesrc-b { padding: 0 var(--space-2); border: 0; border-radius: var(--radius-control); background: var(--bg-info);
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-brand-500); cursor: pointer; }
.onb-rulesrc-b:hover { background: var(--color-surface-2); }