/* Built from design-systems/on-behalf/tokens.json. Do not edit here. */
.ob-kit {
  --ob-color-ink-950: #111317;
  --ob-color-ink-900: #1A1D22;
  --ob-color-ink-800: #24282E;
  --ob-color-ink-700: #363B43;
  --ob-color-ink-600: #4C525B;
  --ob-color-ink-500: #676E78;
  --ob-color-ink-400: #8D949E;
  --ob-color-ink-300: #B4BAC2;
  --ob-color-ink-200: #D7DBE0;
  --ob-color-ink-100: #ECEEF1;
  --ob-color-ink-50: #F6F7F9;
  --ob-color-white: #FFFFFF;
  --ob-color-own-600: #11744A;
  --ob-color-own-300: #5BD196;
  --ob-color-ask-600: #9C5700;
  --ob-color-ask-300: #FFB547;
  --ob-color-never-600: #C3232D;
  --ob-color-never-300: #FF8A90;
  --ob-color-focus-600: #1A5FD6;
  --ob-color-focus-300: #8DB6FF;
  --ob-font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ob-font-size-caption: 13px;
  --ob-font-size-footnote: 15px;
  --ob-font-size-body: 17px;
  --ob-font-size-title: 20px;
  --ob-font-size-large: 28px;
  --ob-font-weight-regular: 400;
  --ob-font-weight-medium: 500;
  --ob-font-weight-bold: 650;
  --ob-space-1: 4px;
  --ob-space-2: 8px;
  --ob-space-3: 12px;
  --ob-space-4: 16px;
  --ob-space-5: 20px;
  --ob-space-6: 24px;
  --ob-radius-card: 16px;
  --ob-radius-inner: 10px;
  --ob-radius-pill: 999px;
  --ob-size-target: 48px;
  --ob-size-mark: 20px;
  --ob-color-canvas: var(--ob-color-ink-50);
  --ob-color-surface: var(--ob-color-white);
  --ob-color-text: var(--ob-color-ink-900);
  --ob-color-text-muted: var(--ob-color-ink-600);
  --ob-color-line: var(--ob-color-ink-200);
  --ob-color-accent: var(--ob-color-ink-900);
  --ob-color-accent-text: var(--ob-color-white);
  --ob-color-focus: var(--ob-color-focus-600);
  --ob-answer-own: var(--ob-color-own-600);
  --ob-answer-ask: var(--ob-color-ask-600);
  --ob-answer-never: var(--ob-color-never-600);
  --ob-answer-ends: var(--ob-color-ink-700);
  --ob-answer-hard: var(--ob-color-never-600);
  --ob-shape-card: var(--ob-radius-card);
  --ob-font-host: var(--ob-font-family-system);
  --ob-component-card-bg: var(--ob-color-surface);
  --ob-component-card-radius: var(--ob-shape-card);
  --ob-component-card-padding: var(--ob-space-4);
  --ob-component-button-height: var(--ob-size-target);
  --ob-component-button-radius: var(--ob-radius-inner);
  --ob-component-button-primary-bg: var(--ob-color-accent);
  --ob-component-button-primary-text: var(--ob-color-accent-text);
  --ob-component-mark-size: var(--ob-size-mark);
  --ob-component-note-radius: 22px;
}
.ob-kit[data-theme="dark"] {
  --ob-color-canvas: var(--ob-color-ink-950);
  --ob-color-surface: var(--ob-color-ink-900);
  --ob-color-text: var(--ob-color-ink-50);
  --ob-color-text-muted: var(--ob-color-ink-300);
  --ob-color-line: var(--ob-color-ink-700);
  --ob-color-accent: var(--ob-color-ink-50);
  --ob-color-accent-text: var(--ob-color-ink-950);
  --ob-color-focus: var(--ob-color-focus-300);
  --ob-answer-own: var(--ob-color-own-300);
  --ob-answer-ask: var(--ob-color-ask-300);
  --ob-answer-never: var(--ob-color-never-300);
  --ob-answer-ends: var(--ob-color-ink-300);
  --ob-answer-hard: var(--ob-color-never-300);
}
@media (prefers-color-scheme: dark) {
.ob-kit:not([data-theme="light"]) {
  --ob-color-canvas: var(--ob-color-ink-950);
  --ob-color-surface: var(--ob-color-ink-900);
  --ob-color-text: var(--ob-color-ink-50);
  --ob-color-text-muted: var(--ob-color-ink-300);
  --ob-color-line: var(--ob-color-ink-700);
  --ob-color-accent: var(--ob-color-ink-50);
  --ob-color-accent-text: var(--ob-color-ink-950);
  --ob-color-focus: var(--ob-color-focus-300);
  --ob-answer-own: var(--ob-color-own-300);
  --ob-answer-ask: var(--ob-color-ask-300);
  --ob-answer-never: var(--ob-color-never-300);
  --ob-answer-ends: var(--ob-color-ink-300);
  --ob-answer-hard: var(--ob-color-never-300);
}
}
/* On Behalf kit components, built on tokens.json.
   The permission is shown inside other companies' apps, so:
   - host tokens (--ob-color-surface, -canvas, -text, -text-muted, -line, -accent, -accent-text, --ob-shape-card, --ob-font-host)
     may be set by the host app to match its own look;
   - answer tokens (--ob-answer-own, -ask, -never, -ends, -hard) are locked, and every answer always has its mark and its name,
     so the meaning never rests on colour and looks the same in every host.
   Every class starts with ob- so it never meets the site's own styles. */

.ob-kit { color: var(--ob-color-text); -webkit-font-smoothing: antialiased; }
.ob-kit :where(*, *::before, *::after) { box-sizing: border-box; }
.ob-kit :where(p, h2, h3, ul, ol, li) { margin: 0; padding: 0; }
.ob-kit :where(ul, ol) { list-style: none; }
.ob-kit :where(b, strong) { color: inherit; }

/* the four marks: a shape, a colour and always a word beside it */
.ob-mark { flex: none; display: inline-block; width: var(--ob-component-mark-size); height: var(--ob-component-mark-size); vertical-align: -4px; }
.ob-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ob-mark .in { stroke: var(--ob-color-surface); fill: none; }
.ob-mark.ob-a-own { color: var(--ob-answer-own); }
.ob-mark.ob-a-ask { color: var(--ob-answer-ask); }
.ob-mark.ob-a-never { color: var(--ob-answer-never); }
.ob-mark.ob-a-ends { color: var(--ob-answer-ends); }
.ob-mark.ob-sm { width: 16px; height: 16px; vertical-align: -3px; }
.ob-hard { display: inline-block; color: var(--ob-answer-hard); font-size: var(--ob-font-size-caption); font-weight: var(--ob-font-weight-medium); white-space: nowrap; }

/* the permission card: the task in the person's words, then four answers, then approve */
.ob-perm { font-family: var(--ob-font-host); background: var(--ob-component-card-bg); color: var(--ob-color-text); border-radius: var(--ob-component-card-radius);
  padding: var(--ob-component-card-padding); display: flex; flex-direction: column; gap: 10px; }
.ob-perm-k { font-size: var(--ob-font-size-caption); color: var(--ob-color-text-muted); font-weight: var(--ob-font-weight-medium); }
.ob-perm-h { font-size: var(--ob-font-size-title); font-weight: var(--ob-font-weight-bold); line-height: 1.2; margin-top: -6px; }
.ob-ans { display: grid; grid-template-columns: var(--ob-component-mark-size) minmax(0, 1fr); gap: 2px 10px; align-items: start; border-top: 1px solid var(--ob-color-line); padding-top: 10px; }
.ob-ans > .ob-mark { grid-row: 1 / span 2; margin-top: 1px; }
.ob-ans-name { font-size: var(--ob-font-size-footnote); font-weight: var(--ob-font-weight-bold); line-height: 1.3; }
.ob-ans ul { display: flex; flex-direction: column; gap: 3px; }
.ob-ans li { font-size: var(--ob-font-size-footnote); line-height: 1.35; }
.ob-ans li .ob-hard { margin-left: 6px; }
.ob-perm-foot { font-size: var(--ob-font-size-caption); color: var(--ob-color-text-muted); line-height: 1.35; }
.ob-btns { display: flex; gap: 8px; }
.ob-primary, .ob-secondary { display: inline-grid; place-items: center; min-height: var(--ob-component-button-height); border-radius: var(--ob-component-button-radius);
  font: var(--ob-font-weight-bold) var(--ob-font-size-body) / 1.2 var(--ob-font-host); padding: 0 18px; border: 0; }
.ob-primary { flex: 1; background: var(--ob-component-button-primary-bg); color: var(--ob-component-button-primary-text); }
.ob-secondary { background: transparent; color: var(--ob-color-text); box-shadow: inset 0 0 0 1.5px var(--ob-color-line); }

/* the ask, as a notification: answerable from the lock screen without opening anything */
.ob-note { font-family: var(--ob-font-family-system); background: var(--ob-color-surface); color: var(--ob-color-text); border-radius: var(--ob-component-note-radius);
  padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.ob-note-top { display: flex; align-items: center; gap: 8px; font-size: var(--ob-font-size-caption); color: var(--ob-color-text-muted); }
.ob-note-top b { color: var(--ob-color-text); font-weight: var(--ob-font-weight-bold); }
.ob-note-top span:last-child { margin-left: auto; }
.ob-note-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--ob-color-accent); flex: none; }
.ob-note-q { font-size: var(--ob-font-size-footnote); font-weight: var(--ob-font-weight-bold); line-height: 1.35; }
.ob-note-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--ob-font-size-caption); color: var(--ob-color-text-muted); }
.ob-note-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ob-note-btns > * { display: grid; border: 0; color: inherit; font-family: inherit; cursor: pointer; place-items: center; min-height: var(--ob-size-target); border-radius: 12px; background: var(--ob-color-canvas); font-size: var(--ob-font-size-footnote); font-weight: var(--ob-font-weight-bold); }
.ob-kit :focus-visible { outline: 3px solid var(--ob-color-focus); outline-offset: 2px; }
.ob-note-foot { font-size: var(--ob-font-size-caption); color: var(--ob-color-text-muted); }

/* what the other side sees: what the agent can agree on its own, and what needs the person */
.ob-cover { font-family: var(--ob-font-host); border: 1px solid var(--ob-color-line); border-radius: var(--ob-radius-inner); background: var(--ob-color-surface);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ob-cover-h { font-size: var(--ob-font-size-footnote); font-weight: var(--ob-font-weight-bold); }
.ob-cover li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--ob-font-size-caption); line-height: 1.35; color: var(--ob-color-text); }
.ob-cover li .ob-mark { margin-top: 0; vertical-align: 0; }

/* the record: what happened and which answer allowed it, the same list for both sides */
.ob-rec { font-family: var(--ob-font-host); }
.ob-rec li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 8px 0; border-top: 1px solid var(--ob-color-line); }
.ob-rec .tm { grid-column: 1 / -1; font-size: var(--ob-font-size-caption); color: var(--ob-color-text-muted); }
.ob-rec .tx { font-size: var(--ob-font-size-footnote); line-height: 1.35; }
.ob-rec .by { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ob-font-size-caption); color: var(--ob-color-text-muted); white-space: nowrap; align-self: start; padding-top: 1px; }

@media (forced-colors: active) {
  .ob-mark { forced-color-adjust: none; color: CanvasText; }
  .ob-mark .in { stroke: Canvas; }
}

/* ------------------------------------------------------------------------------------------------
   Drawn for the case study only, not part of the kit: phone frames and a made-up host app around the kit.
   .obf-phone shrinks a 390 by 780 screen to fit a column, the same way the Kerbside figures do. */
.obf-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 28px; }
.obf-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 281px; max-width: 100%; }
.obf-phone { width: 281px; padding: 7px; border-radius: 40px; background: var(--ink, #14202E); }
.obf-app { position: relative; display: flex; flex-direction: column; width: 390px; height: 780px; zoom: .6846; border-radius: 48px; overflow: hidden;
  background: var(--ob-color-canvas); font-family: var(--ob-font-host); }
.obf-cap { font-size: 0.875rem; line-height: 1.45; color: var(--muted); text-align: center; margin: 0; }
.obf-cap b { color: var(--ink); }
.obf-status { flex: none; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 28px; font: var(--ob-font-weight-bold) 15px var(--ob-font-family-system); }
.obf-status i { width: 46px; height: 12px; background: linear-gradient(90deg, currentColor 0 22px, transparent 22px 26px, currentColor 26px 46px); border-radius: 3px; opacity: .85; }
.obf-body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.obf-homebar { flex: none; height: 22px; display: grid; place-items: center; }
.obf-homebar::before { content: ""; width: 134px; height: 5px; border-radius: 3px; background: currentColor; opacity: .85; }
.obf-mark { position: absolute; z-index: 4; width: 24px; height: 24px; border-radius: 50%; background: #C8102E; color: #FFFFFF; font: 700 13px/24px var(--ob-font-family-system); text-align: center; zoom: 1.4; }

/* a made-up marketplace app */
.obh-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; font-size: var(--ob-font-size-body); font-weight: var(--ob-font-weight-bold); }
.obh-bar .bk { font-size: 26px; font-weight: 400; line-height: 1; }
.obh-item { display: flex; gap: 14px; padding: 4px 16px 16px; }
.obh-pic { flex: none; width: 112px; height: 84px; border-radius: 12px; background: var(--ob-color-surface); display: grid; place-items: center; }
.obh-keys { width: 84px; height: 34px; border-radius: 6px; background: var(--ob-color-text); padding: 4px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.obh-keys i { background: var(--ob-color-surface); border-radius: 1.5px; opacity: .9; }
.obh-item h3 { font-size: var(--ob-font-size-body); font-weight: var(--ob-font-weight-bold); }
.obh-item p { font-size: var(--ob-font-size-footnote); color: var(--ob-color-text-muted); margin-top: 2px; }
.obh-item .pr { font-size: var(--ob-font-size-title); color: var(--ob-color-text); font-weight: var(--ob-font-weight-bold); margin-top: 6px; }
.obh-sheet { margin-top: auto; background: var(--ob-color-surface); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .12); padding: 8px 0 0; }
.obh-sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--ob-color-line); margin: 0 auto 2px; }
.obh-scrim { position: absolute; inset: 0; background: rgba(17, 19, 23, .35); }
.obh-lock { background: linear-gradient(170deg, #26303D, #121417 70%); color: #F6F7F9; }
.obh-lock .tm { text-align: center; font: 300 76px/1 var(--ob-font-family-system); letter-spacing: -.02em; margin-top: 28px; }
.obh-lock .dy { text-align: center; font: 500 17px var(--ob-font-family-system); margin: 8px 0 auto; }
.obh-lock .ob-note { margin: 0 10px 18px; }
.obh-chat { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.obh-b { max-width: 80%; padding: 9px 12px; border-radius: 18px; font-size: var(--ob-font-size-footnote); line-height: 1.35; background: var(--ob-color-surface); }
.obh-b.me { align-self: flex-end; background: var(--ob-color-accent); color: var(--ob-color-accent-text); }
.obh-b small { display: block; font-size: var(--ob-font-size-caption); color: var(--ob-color-text-muted); margin-bottom: 2px; }
.obh-input { margin: 8px 16px 10px; min-height: 44px; border-radius: 22px; border: 1px solid var(--ob-color-line); background: var(--ob-color-surface); padding: 0 16px; display: flex; align-items: center; color: var(--ob-color-text-muted); font-size: var(--ob-font-size-footnote); }
.obh-page { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.obh-page .ob-perm-k { margin-bottom: 2px; }
.obh-sum { font-size: var(--ob-font-size-footnote); color: var(--ob-color-text); border-top: 1px solid var(--ob-color-line); padding-top: 10px; }

/* the design system figure */
.obs-marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); gap: 10px; }
.obs-m { border: 1px solid var(--rule); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; line-height: 1.35; color: var(--body); }
.obs-m .sw { display: flex; gap: 6px; }
.obs-m .sw span { flex: 1; display: grid; place-items: center; height: 44px; border-radius: 6px; }
.obs-m b { color: var(--ink); font-size: 0.9375rem; }
.obs-m .ob-mark { width: 24px; height: 24px; }
.obs-hosts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 40.0625em) { .obs-hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obs-host { padding: 14px; border-radius: 14px; background: var(--ob-color-canvas); }
.obs-host > p { font: 500 0.8125rem/1.3 var(--sans, sans-serif); color: var(--ob-color-text-muted); margin: 0 0 8px; }

.obf-row { content-visibility: auto; contain-intrinsic-size: auto 640px; }