/* First-use guidance shares the portal's theme without changing workspace chrome. */
:is(.ob-guide, .ob-start-card, .partner-join, .pj-note) {
  --ob-text: var(--theme-text, #eeeae1);
  --ob-muted: var(--theme-muted, #a5ad9b);
  --ob-line: var(--theme-line, #3a4432);
  --ob-surface: var(--theme-surface, #1c2118);
  --ob-raised: var(--theme-sage, #22281c);
  --ob-accent: var(--theme-accent, #e6bd62);
  --ob-soft: var(--theme-gold-soft, #302c1d);
  --ob-selected: var(--theme-sage-text, #d0d9bd);
  color: var(--ob-text);
}
#modal:has(.ob-guide) { width: min(760px, calc(100vw - 32px)); }
#modal .ob-guide { min-width: 0; }
#modal .ob-guide .modal-head { align-items: flex-start; padding: 24px 28px; }
#modal .ob-guide .modal-head .ob-heading { flex: 1; min-width: 0; }
/* Guide headers use text actions, so they must not inherit icon-button dimensions. */
#modal .ob-guide .modal-head > .btn,
#modal:has(#onboarding-preview-scope) .modal-head > .btn {
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
}
#modal .ob-guide .modal-body { display: grid; gap: 24px; padding: 24px 28px; }
.ob-guide :is(h2, h3, p), .ob-start-card :is(h2, p), .partner-join :is(dt, dd) { overflow-wrap: anywhere; }
.ob-kicker { margin: 0 0 8px; color: var(--ob-accent); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; line-height: 1.5; text-transform: uppercase; }
#modal .ob-guide .ob-heading h2 { margin: 0; font-size: clamp(22px, 3vw, 26px); font-weight: 550; letter-spacing: -.6px; line-height: 1.3; }
.ob-heading > p:not(.ob-kicker) { max-width: 600px; margin: 10px 0 0; color: var(--ob-muted); font-size: 13px; line-height: 1.75; }
.ob-progress:where(ol), .ob-progress > ol, .pj-steps:where(ol), .pj-steps > ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: onboarding-step;
}
.ob-progress:where(ol), .ob-progress > ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ob-progress:where(ol) > li, .ob-progress > ol > li, .pj-steps:where(ol) > li, .pj-steps > ol > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ob-line);
  border-radius: 8px;
  background: var(--ob-raised);
  color: var(--ob-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
  counter-increment: onboarding-step;
}
.ob-progress:where(ol) > li::before, .ob-progress > ol > li::before { content: counter(onboarding-step); }
.ob-progress:where(ol) > li::before, .ob-progress > ol > li::before, .pj-step-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ob-line);
  border-radius: 50%;
  color: var(--ob-muted);
  background: var(--ob-surface);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
:is(.ob-progress, .pj-steps) li:is(.is-current, [aria-current="step"]) { border-color: var(--ob-accent); background: var(--ob-soft); color: var(--ob-text); }
.ob-progress li:is(.is-current, [aria-current="step"])::before, .pj-steps li:is(.is-current, [aria-current="step"]) .pj-step-number { background: var(--gold); border-color: var(--gold); color: #302912; }
:is(.ob-progress, .pj-steps) li.is-complete { color: var(--ob-selected); }
.ob-progress li.is-complete::before { content: '✓'; color: var(--ob-selected); }
.pj-steps li.is-complete .pj-step-number { color: var(--ob-selected); font-size: 0; }
.pj-steps li.is-complete .pj-step-number::before { content: '✓'; font-size: 11px; }
.ob-panel { display: grid; gap: 16px; min-width: 0; }
.ob-panel h3 { margin: 0; font-size: 18px; font-weight: 550; letter-spacing: -.2px; line-height: 1.4; }
.ob-panel > p { margin: 0; color: var(--ob-muted); font-size: 13px; line-height: 1.75; }
.ob-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-scope:where(dl), .ob-scope > dl, .pj-scope:where(dl), .pj-scope > dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--ob-line);
  border-radius: 9px;
  background: var(--ob-raised);
}
:is(.ob-scope, .pj-scope) :is(dl > div, dd) { min-width: 0; }
:is(.ob-scope, .pj-scope) dt { margin: 0 0 5px; color: var(--ob-muted); font-size: 11px; line-height: 1.5; }
:is(.ob-scope, .pj-scope) dd { margin: 0; color: var(--ob-text); font-size: 13px; font-weight: 550; line-height: 1.6; overflow-wrap: anywhere; }
.ob-capabilities { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ob-capabilities > li { min-width: 0; padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: 8px; background: var(--ob-raised); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.ob-capabilities strong { display: block; font-size: 13px; font-weight: 550; }
.ob-capabilities p { margin: 5px 0 0; color: var(--ob-muted); font-size: 12px; line-height: 1.75; }
.ob-tip, .pj-note { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--ob-line); border-left: 3px solid var(--ob-accent); border-radius: 8px; background: var(--ob-soft); color: var(--ob-text); font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.ob-tip p, .pj-note p { margin: 0; color: inherit; font-size: 12px; }
.ob-tip strong, .pj-note strong { font-weight: 550; }
.ob-panel > .ob-tip { color: var(--ob-text); font-size: 12px; }
.pj-note p + p { margin-top: 8px; }
.ob-guide .ob-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 18px 28px;
  border-top: 1px solid var(--ob-line);
  background: var(--ob-surface);
}
.ob-footer > :is(p, span) { min-width: 0; margin: 0; color: var(--ob-muted); font-size: 11px; line-height: 1.6; }
.ob-footer > .ob-step-count { margin-inline-end: auto; }
#modal .ob-guide .btn { min-height: 44px; max-width: 100%; font-size: 12px; font-weight: 550; line-height: 1.5; white-space: normal; }
.ob-guide :is(button, a):focus-visible, .ob-start-card :is(button, a):focus-visible, .ob-help-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ob-start-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--ob-line); border-radius: 10px; background: var(--ob-raised); }
.ob-start-card > div { flex: 1; min-width: 0; }
.ob-start-card h2 { margin: 0 0 5px; font-size: 15px; font-weight: 550; line-height: 1.4; }
.ob-start-card p { margin: 0; color: var(--ob-muted); font-size: 12px; line-height: 1.7; }
.ob-start-card .btn { flex-shrink: 0; max-width: 100%; }
.ob-help-button, .dam-shell .dam-topbar-actions > .ob-help-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--dam-muted, var(--muted)); }
.ob-help-button svg { display: block; width: 20px; height: 20px; }
.ob-help-button:hover, .dam-shell .dam-topbar-actions > .ob-help-button:hover { color: var(--theme-accent, var(--gold)); border-color: var(--theme-accent, var(--gold)); }
.partner-join .pj-steps { margin: 22px 0; }
.partner-join .pj-scope { margin: 20px 0; }
.partner-join .pj-scope:where(dl) { margin: 20px 0; }
.partner-join .field { display: grid; gap: 8px; margin: 18px 0; color: var(--ob-muted); font-size: 12px; line-height: 1.6; }
.partner-join .field :is(input, textarea) { width: 100%; min-width: 0; max-width: 100%; }
.partner-join .pj-note + .btn { margin-top: 18px; }
@media (max-width: 600px) {
  #modal .ob-guide .modal-head { padding: 20px; gap: 12px; }
  #modal .ob-guide .modal-body { gap: 20px; padding: 20px; }
  .ob-guide .ob-footer { padding: 16px 20px; }
  .ob-progress:where(ol), .ob-progress > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-progress:where(ol) > li, .ob-progress > ol > li { flex-direction: row; align-items: center; min-height: 58px; padding: 10px; }
  .ob-progress:where(ol) > li::before, .ob-progress > ol > li::before { flex: 0 0 26px; }
  .ob-start-card { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
  .ob-start-card .btn { width: 100%; }
}
@media (max-width: 420px) {
  .ob-progress:where(ol), .ob-progress > ol, .pj-steps:where(ol), .pj-steps > ol { gap: 7px; }
  .ob-progress:where(ol) > li, .ob-progress > ol > li, .pj-steps:where(ol) > li, .pj-steps > ol > li { gap: 7px; padding: 9px; font-size: 11px; }
  .ob-scope:where(dl), .ob-scope > dl, .pj-scope:where(dl), .pj-scope > dl { grid-template-columns: minmax(0, 1fr); padding: 15px; gap: 12px; }
  .ob-guide .ob-footer > .btn { flex: 1 1 110px; }
  .ob-footer > :is(p, span) { flex-basis: 100%; }
  .partner-join { padding: 24px; }
}