/* ldu/pages-experts.css: the experts pages in the LDU look (slice 4).

   Marketplace (the list), an expert's profile with its seat and Engage cards, My Profile and its
   onboarding offers and prompt, Shortlisted, Favorites and Subscriptions. main's own markup, restyled: the page sections
   carry an extra `ldu-page` class token, and every rule below keys on it together with the page's own class
   (.main--pad, .mk, .pf, .marks) or on the page's data-testid, so the Leads, Projects and Agreement pages that share names
   like .spend__h and .eng__form are untouched. Shortlisted, Favorites and Subscriptions are `.page.ldu-page`, so the page
   frame, buttons, cards, empty state and framed table of ldu/pages-work.css (slice 3) already apply; this file only adds
   what is theirs (the marks buttons, the seat chips).

   Nothing is removed or renamed and the visual order is the DOM order. Colours are all var() of fraction-ds tokens; hover
   moves colour, a border step or a wash in 150ms and never lifts or casts a shadow. Spacing the LDU scale holds back
   (--s3, --s5, --s6) is written as px. */

/* ── the blocks under the page header ───────────────────────────
   The title is the one page header (ldu/page-header.css). The .main--pad blocks under it keep their own wrapper but sit
   24px apart instead of 64, and an empty one (the digital-twin line of someone with no agent) takes no room. */
.main--pad.ldu-page {
  box-sizing: border-box;
  container: xp / inline-size;
  padding: 24px var(--pad-main, 32px) 0;
}
.main--pad.ldu-page:last-child { padding-bottom: var(--pad-main, 32px); }
.main--pad.ldu-page:not(:has(*)) { display: none; }
.main--pad.ldu-page > * { min-width: 0; }
@media (max-width: 720px) {
  .main--pad.ldu-page { padding: 16px var(--pad-main, 24px) 0; }
  .main--pad.ldu-page:last-child { padding-bottom: var(--pad-main, 24px); }
}
/* the way back is the DS ghost button (shared/_back_link); it lines up with the text under it */
.main--pad.ldu-page:has(> .backlink) { padding-top: 24px; }
/* cards on these pages stack their content 8px apart; the card itself is the DS .card */
:is(.page-header, .main--pad.ldu-page) .card { gap: 8px; }
:is(.page-header, .main--pad.ldu-page) .card :is(h2, h3, p) { margin: 0; }
.main--pad.ldu-page .muted { color: var(--ink-2); }
.main--pad.ldu-page .small { font-size: var(--fs-ui); }

/* ── Shortlist and Favorite (the marketplace rows, a profile's head, Shortlisted and Favorites) ───────────────
   An outline control each; the saved one is the DS .btn--on (accent glyph and border, no lilac fill). */
.ldu-page .marks__buttons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* the buttons sit above a row that is one big link (Shortlisted, Favorites, the marketplace rows) */
:is(.ldu-page, .page-header) .marks__buttons { position: relative; }

/* ── a person's page: hero, stats, sections, the side ───────────── */
.main--pad.ldu-page .pf { max-width: none; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: 16px; }
.main--pad.ldu-page .pf__main, .main--pad.ldu-page .pf__side, .main--pad.ldu-page .pf__pane { gap: 16px; }
.main--pad.ldu-page .pf__pane { margin-top: 16px; }
@container xp (max-width: 820px) {
  .main--pad.ldu-page .pf { grid-template-columns: minmax(0, 1fr); }
}
.main--pad.ldu-page .pf .pf__hero { padding: 0; overflow: hidden; gap: 0; }
.pf__cover { height: 112px; border-bottom: 1px solid var(--line); background: var(--ldu-recess); }
.pf__herobody { padding: 0 24px; }
.pf__herohead { flex-wrap: wrap; gap: 12px 16px; margin-top: -48px; }
.pf__avatar .avatar { border: 3px solid var(--bg-2); font-size: 30px; }
.pf__actions { gap: 8px; padding-bottom: 4px; }
.pf__name { margin: 12px 0 0; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.02em; }
.pf__headline { margin: 4px 0 0; font-size: var(--fs-body); color: var(--ink-2); }
.pf__meta { gap: 8px 12px; margin: 12px 0 0; font-size: var(--fs-ui); color: var(--ink-2); }
.pf__twin::before { background: var(--ink-4); }
.pf__stats { margin: 24px 0 0; }
.pf__stats div { padding: 16px 24px; }
.main--pad.ldu-page .pf__sec { padding: 20px 24px; gap: 12px; }
.pf__sech { flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-h3); line-height: 1.4; letter-spacing: -0.01em; }
.pf__sech span { flex-basis: 100%; font-size: var(--fs-ui); color: var(--ink-2); }
.pf__empty { font-size: var(--fs-ui); color: var(--ink-2); }
.pf__svcs { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px; }
.pf__svc { gap: 8px; padding: 16px; }
.pf__svc h3 { font-family: var(--sans); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; color: var(--ink); }
.pf__svc p { color: var(--ink-2); }
.pf__price span { color: var(--ink-2); }
.pf__row { gap: 16px; padding: 12px 0; }
.pf__row b { font-weight: 600; }
.pf__row div span { color: var(--ink-2); }
.pf__row em { color: var(--ink-2); }
.pf__mark { width: 40px; height: 40px; border: 0; background: var(--ldu-wash); color: var(--ink-2); }
.pf__chips { gap: 8px; }
.pf__tiles { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 16px; }
.pf__rate { color: var(--ink-2); }
.pf__rate b { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.pf .pf__side .btn { margin-top: 4px; }
/* tabs: the current one lilac with its bar, every tab washes under the pointer */
.pf__tabbar { margin-top: 0; }
@media (max-width: 720px) {
  .pf__herobody { padding: 0 16px; }
  .pf__stats div { padding: 12px 16px; }
  .main--pad.ldu-page .pf__sec { padding: 16px; }
}

/* My Profile: what is not set up yet, as a slim card above the page with its one action on the right */
.main--pad.ldu-page .pf__offers { max-width: none; gap: 16px; }
.main--pad.ldu-page .pf__offer { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 20px 24px; gap: 16px 24px; }
.pf__offer > div { flex: 1 1 20rem; min-width: 0; }
.pf__offer h2 { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.pf__offer p { max-width: 75ch; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-2); }

/* My Profile: the photo and password sections */
.pf .profile { gap: 16px; }
.pf .profile__who { gap: 16px; }
.pf .profile__names > strong { font-size: var(--fs-body); font-weight: 600; }
.pf .profile__email { font-size: var(--fs-meta); color: var(--ink-2); }
.pf .profile__form { gap: 12px; }
.pf .profile__choose { cursor: pointer; }
.pf .pairing__hint { font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-2); }
.pf .profile__notice { font-size: var(--fs-meta); color: color-mix(in oklab, var(--warn) 70%, var(--ink)); }
.pf .profile__notice--ok { color: color-mix(in oklab, var(--ok) 70%, var(--ink)); }
.pf .profile__notice:empty { display: none; }
.pf .pf__password { gap: 8px; max-width: 24rem; }
.pf .pf__password .btn { justify-self: start; margin-top: 8px; }

/* the digital-twin line under a name */
.main--pad.ldu-page > .twin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: var(--fs-ui); color: var(--ink-2); }
.main--pad.ldu-page > .twin .mono { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink); overflow-wrap: anywhere; }

/* ── Shortlisted, Favorites: the row's actions sit above the stretched name link ──────────────────────────────── */
.page.ldu-page[data-testid="expert-marks"] .marks__row .avatar { width: 40px; height: 40px; }
@media (max-width: 640px) {
  .page.ldu-page[data-testid="expert-marks"] .marks__row { flex-wrap: wrap; }
  .page.ldu-page[data-testid="expert-marks"] .marks__name { flex: 1 1 calc(100% - 56px); }
  .page.ldu-page[data-testid="expert-marks"] .marks__buttons { margin-left: 56px; }
  .page.ldu-page[data-testid="expert-marks"] .marks__row:has(a)::after { display: none; }
}

[data-testid="subscriptions-seats"] td:last-child { text-align: right; }
[data-testid="subscriptions-seats"] td:last-child form { display: inline-block; margin: 0; }
[data-testid="subscriptions-page"] > h2.spend__h { margin: 0 0 -20px; font-size: var(--fs-h2); line-height: 1.4; letter-spacing: -0.01em; }
[data-testid="subscriptions-ended"] { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
[data-testid="subscriptions-ended"] > li { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); font-size: var(--fs-body); }
[data-testid="subscriptions-ended"] small { margin-left: 8px; font-size: var(--fs-ui); color: var(--ink-2); }

/* ── an expert's page: the trust panel and the seat meter ────────
   Facts as a two-column list (label, then the plain-words answer); a gap reads quieter than a fact. Offerings are a short list,
   price in the display face. The seat meter is a row: overlapped faces, a +N circle, then "9/10 filled" over "1 seat available". */
.ldu-page .trust { display: grid; gap: 16px; }
.ldu-page .trust > .spend__h { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; color: var(--ink); }
.ldu-page .trust__list { display: grid; gap: 0; margin: 0; padding: 0; }
.ldu-page .trust__list > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.ldu-page .trust__list > div:first-child { border-top: 0; padding-top: 0; }
.ldu-page .trust__list dt { margin: 0; font-size: var(--fs-meta); font-weight: 500; letter-spacing: .04em; color: var(--ink-2); }
.ldu-page .trust__list dd { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.ldu-page .trust__list dd.muted { color: var(--ink-3); }
.ldu-page .trust__sub { margin: 8px 0 0; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.ldu-page .trust__offers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ldu-page .trust__offers > li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--ldu-r-lg, 10px); font-size: var(--fs-ui); line-height: 1.5; color: var(--ink); }
.ldu-page .trust__price { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ldu-page .trust > p.small { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 560px) { .ldu-page .trust__list > div { grid-template-columns: minmax(0, 1fr); } }

.ldu-page .seatmeter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ldu-page .seatmeter__faces { display: inline-flex; align-items: center; }
.ldu-page .seatmeter__faces > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }
.ldu-page .seatmeter__faces > :first-child { margin-left: 0; }
.ldu-page .seatmeter__more { display: inline-grid; place-items: center; background: var(--ldu-raise, var(--bg-2)); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ldu-page .seatmeter__text { display: grid; gap: 0; line-height: 1.4; }
.ldu-page .seatmeter__text > strong { font-size: var(--fs-ui); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ldu-page .seatmeter__text > .small { font-size: var(--fs-meta); color: var(--ink-2); }

/* ── what the person's own AI suggested for their profile: a review card above their page ──────────────────────
   One card, a heading, a quiet line, one row per change (label, then the proposed value), Approve as the one solid button. */
.ldu-page .suggest { display: grid; gap: 12px; }
.ldu-page .suggest > .spend__h { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; color: var(--ink); }
.ldu-page .suggest > p.muted { margin: 0; font-size: var(--fs-ui); color: var(--ink-2); }
.ldu-page .suggest__list { gap: 0; margin: 0; }
.ldu-page .suggest__list > li { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-ui); line-height: 1.5; }
.ldu-page .suggest__list > li:first-child { border-top: 0; }
.ldu-page .suggest__list > li > strong { font-size: var(--fs-meta); font-weight: 500; letter-spacing: .04em; color: var(--ink-2); }
.ldu-page .suggest__list > li > span { color: var(--ink); overflow-wrap: anywhere; }
.ldu-page .suggest__actions { flex-wrap: wrap; }
.ldu-page .suggest__actions .eng__form { margin: 0; }
@media (max-width: 560px) { .ldu-page .suggest__list > li { grid-template-columns: minmax(0, 1fr); } }

/* ── My Profile for an expert: the checklist of what is done and what is missing, and the "Preview as a client" banner ──
   Done rows read quiet with a green mark, open rows carry their plain-words hint; the banner is a slim accent-edged card. */
.ldu-page .checklist { display: grid; gap: 12px; }
.ldu-page .checklist > .spend__h { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; color: var(--ink); }
.ldu-page .checklist > p { margin: 0; }
.ldu-page .checklist__list { display: grid; margin: 0; padding: 0; list-style: none; }
.ldu-page .checklist__list > li { display: grid; grid-template-columns: 20px minmax(0, 11rem) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-ui); line-height: 1.5; }
.ldu-page .checklist__list > li:first-child { border-top: 0; }
.ldu-page .checklist__mark { display: inline-flex; align-self: center; color: var(--ink-3); }
.ldu-page .checklist__list > li[data-testid="check-done"] .checklist__mark { color: var(--ok); }
.ldu-page .checklist__list > li[data-testid="check-done"] > strong { font-weight: 500; color: var(--ink-2); }
.ldu-page .checklist__list > li > .muted { color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .ldu-page .checklist__list > li { grid-template-columns: 20px minmax(0, 1fr); }
  .ldu-page .checklist__list > li > .muted { grid-column: 2; }
}
.ldu-page .preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ldu-page .preview > p { margin: 0; font-size: var(--fs-ui); color: var(--ink); }
.ldu-page .preview__body { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; display: grid; gap: 16px; }

/* ── Find a professional: the filter bar and the expert tiles ─────────────────────────────────────────────────────
   Bar: search, one dropdown per filter (the accent marks one that narrows the list), Search. Under 720px the dropdowns give way to a
   Filters button and a sheet. Tile, in reading order: who (photo, name, role, badges), what they do, what it costs, three numbers, one
   action with the two marks beside it. Photo or initials come from avatar_for; with no photo the initials circle shows. */
.main--pad.ldu-page.xg { gap: 16px; }
.xg__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xg__selects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.main--pad.ldu-page .xg__select { flex: none; width: 9.25rem; max-width: 100%; text-overflow: ellipsis; }
.xg__open { display: none; }
@container xp (max-width: 780px) {
  .xg__go { order: 1; }
  .xg__selects { order: 2; flex: 1 0 100%; }
}
@media (max-width: 767px) {
  .xg__search { flex-basis: 100%; }
  .xg__selects { display: none; }
  .xg__open { display: inline-flex; }
  .xg__open, .xg__go { flex: 1 1 0; order: 0; justify-content: center; }
}

.xg__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 16px; }
.main--pad.ldu-page .xt { min-height: 0; gap: 14px; padding: 20px; transition: border-color var(--dur); }
.main--pad.ldu-page .marks__corner { margin-left: 0; gap: 8px; }

/* ── Saved experts: Shortlisted and Favorites as two tabs of one page (LDU tab style: a hairline under the row, the current tab lilac with its bar) ── */
.page.ldu-page[data-testid="expert-marks"] > .muted:first-of-type { margin-top: -4px; }
.marks__lede { margin: 0; }

/* ── an expert's page, seen by a client: the action card is the right column (sticky), trust and the profile the left; a phone stacks it, action first ── */
.xp { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 16px 24px; align-items: start; }
.xp__main { display: grid; gap: 16px; min-width: 0; grid-column: 1; grid-row: 1; }
.xp__side { display: grid; gap: 16px; grid-column: 2; grid-row: 1; position: sticky; top: 16px; min-width: 0; }
.xp__main > * { min-width: 0; }
.xp__main > [data-testid="twin-line"]:not(:has(*)) { display: none; }
.xp .pf-embedded { min-width: 0; }
.xp .pf--solo { grid-template-columns: minmax(0, 1fr); }
.xp__price { display: grid; gap: 2px; }
.xp__from b { font-family: var(--display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.xp__side .card > h2.spend__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; }
.xp__side .card .btn { align-self: flex-start; }
.xp__side .engage__form { display: grid; gap: 8px; margin-top: 4px; }
.xp__side .engage__form .btn--primary { justify-self: stretch; margin-top: 8px; }
.xp__side .seat .btn--primary { width: 100%; }
@media (max-width: 960px) {
  .xp { grid-template-columns: minmax(0, 1fr); }
  .xp__main, .xp__side { grid-column: 1; grid-row: auto; position: static; }
}
/* the profile's hero first (who), then trust, then the tabs (about, credentials, track record): the wrappers drop out so these sort together */
.xp .pf-embedded, .xp .pf--solo, .xp .pf__main { display: contents; }
.xp__main .pf__hero { order: 0; }
.xp__main > [data-testid="trust-panel"], .xp__main > [data-testid="twin-line"] { order: 1; }
.xp__main .tabs-wrap { order: 2; }
.xp .pf__actions { display: none; }   /* the action card at the right is the one place to engage */
.xp .pf__stats { display: none; }   /* placeholders ("-"): trust above holds the real facts */

/* ── the tile, minimal: photo with a verified badge on its corner, name, one line, from-price, one action ── */
.main--pad.ldu-page .xt { gap: 16px; padding: 20px; }
.xt .avatar--lg { width: 64px; height: 64px; font-size: 20px; }   /* the tile's photo: between the DS --md and --lg */
.xt__who { display: grid; gap: 2px; align-content: start; justify-items: start; min-width: 0; }
.xt__name { font-family: var(--sans); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.xt__sub { color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.4; }
.xt__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.xt__avatar { position: relative; flex: none; }
.xt__verified { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); color: var(--accent); }
.xt__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.main--pad.ldu-page .xt__price { display: block; margin: 0; padding: 0; border: 0; }
.xt__actions { display: flex; align-items: center; gap: 8px; }
.xg__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.xt__foot { flex-wrap: wrap; }
.xt__actions { flex: 1 1 auto; justify-content: flex-end; }
.xt__actions > .btn--primary { flex: 1 1 auto; justify-content: center; }
@media (max-width: 480px) { .xt__foot { flex-direction: column; align-items: stretch; } .xt__actions { justify-content: stretch; } }
.trust__roles { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.suggest__roles { margin: 4px 0 0; padding-left: 18px; }

/* the approve card's nudge on an offering whose name is broad (OfferingGuide); it never blocks Approve */
.ldu-page .suggest__nudge { grid-column: 2; display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.5; }

/* the profile checklist as one card: title, score and chevron on a button; the list drops down under it */
.ldu-page .checklist__toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ldu-page .checklist__toggle .spend__h { margin: 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); white-space: nowrap; }
.ldu-page .checklist__toggle:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); border-radius: 8px; }
.ldu-page .checklist__conf { margin: 0; }
.ldu-page .checklist__chevron { display: inline-flex; color: var(--ink-2); transition: transform var(--dur); }
.ldu-page .checklist__chevron.is-open { transform: rotate(180deg); }
.ldu-page .checklist__body { display: grid; gap: 12px; }
.ldu-page .checklist__body > p { margin: 0; }
@media (max-width: 640px) { .ldu-page .checklist__toggle { grid-template-columns: minmax(0, 1fr) auto; } .ldu-page .checklist__conf { grid-column: 1 / -1; grid-row: 2; } }

/* the profile cover: its background image (Change background) fills it; the owner's button sits in its corner */
.ldu-page .pf__cover { position: relative; background-size: cover; background-position: center; }
.ldu-page .pf__coverbtn { position: absolute; top: 12px; right: 12px; background: color-mix(in srgb, var(--bg-2) 85%, transparent); }
.pf__coverform { display: grid; gap: 10px; justify-items: start; }
.pf__coverform p { margin: 0; }

/* the pricing card: hourly rate with Edit (your own), then each offering's fixed price */
.ldu-page .pf__ratehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ldu-page .pf__ratehead .pf__rate { margin: 0; }
.ldu-page .pf__prices { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ldu-page .pf__prices li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-ui); }
.ldu-page .pf__prices b { white-space: nowrap; }
.ldu-page .pf__seats { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ldu-page .pf__seats b { font-family: var(--display); font-size: 28px; color: var(--ink); }
.ldu-page .pf__seats span { color: var(--ink-2); font-size: var(--fs-ui); }

/* your own photo is a button: hovering (or focusing) it shows Change photo over it */
.ldu-page .pf__avatar--edit { position: relative; padding: 0; border: 0; background: none; border-radius: 999px; cursor: pointer; }
.ldu-page .pf__avatarhint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px;
  background: color-mix(in srgb, var(--board) 62%, transparent); color: var(--ink); font-size: var(--fs-meta); font-weight: 500; opacity: 0; transition: opacity var(--dur); }
.ldu-page .pf__avatar--edit:hover .pf__avatarhint, .ldu-page .pf__avatar--edit:focus-visible .pf__avatarhint { opacity: 1; }
.ldu-page .pf__avatar--edit:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
/* Change background shows only when the cover is hovered or the button is focused */
.ldu-page .pf__coverbtn { opacity: 0; transition: opacity var(--dur); }
.ldu-page .pf__cover:hover .pf__coverbtn, .ldu-page .pf__coverbtn:focus-visible { opacity: 1; }
@media (hover: none) { .ldu-page .pf__coverbtn { opacity: 1; } .ldu-page .pf__avatarhint { opacity: 0; } }

/* Offerings and pricing (Expert mode > Profile): each offering a card with both prices and its tiers; the form lays tiers out as rows */
.page.ldu-page.offers { display: grid; gap: 16px; max-width: 880px; }
.offer { display: grid; gap: 14px; padding: 20px 24px; }
.offer__head { display: flex; justify-content: space-between; gap: 16px; }
.offer__head h2 { margin: 0 0 4px; font-size: var(--fs-h3); }
.offer__head p { margin: 0; }
.offer__actions { display: flex; gap: 6px; align-items: flex-start; }
.offer__actions form { display: inline; }
.offer__prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.offer__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.offer__tier { display: grid; gap: 4px; }
.offer__tierprice { font-weight: 600; color: var(--ink); }
.offerform { display: grid; gap: 14px; }
.offerform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.offerform__tiers { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.offerform__tiers legend { padding: 0 6px; font-weight: 600; }
.offerform__tierhead, .offerform__tier { display: grid; grid-template-columns: 6rem 7rem minmax(0, 1fr) 5rem; gap: 8px; align-items: center; }
.offerform__tierhead span { color: var(--ink-2); font-size: var(--fs-meta); }
.offerform__actions { display: flex; gap: 8px; }
@media (max-width: 640px) { .offerform__row, .offer__prices { grid-template-columns: minmax(0, 1fr); } .offerform__tierhead { display: none; } .offerform__tier { grid-template-columns: 1fr 1fr; } }

/* Digital twin (Expert mode): the calibration and playbooks sketch */
.page.ldu-page.twin { display: grid; gap: 16px; max-width: 980px; margin: 0; }   /* margin: the digital-twin line's .twin (comms/nav.css) shares the name */
.twin__head h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.twin__head p { margin: 0; }
.page.ldu-page.twin .card { gap: 12px; }
.page.ldu-page.twin .card > h2, .twin__playbook h2 { margin: 0; font-size: var(--fs-h3); }
.twin__levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.twin__level { display: grid; gap: 4px; }
.twin__level input { display: none; }
.twin__sec { display: grid; gap: 10px; }
.twin__intents { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.twin__intent { display: grid; gap: 8px; padding: 14px 16px; }
.twin__intent header { display: flex; justify-content: space-between; gap: 8px; }
.twin__intent[data-verdict="wrong"] { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.twin__intent[data-verdict="unsure"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.twin__conf { color: var(--ink-2); font-size: var(--fs-meta); white-space: nowrap; }
.twin__conf.is-low { color: var(--warn); }
.twin__example { margin: 0; color: var(--ink); font-style: italic; }
.twin__intent p { margin: 0; }
.twin__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.twin__bench { display: flex; gap: 8px; }
.twin__bench .input { flex: 1; }
.twin__guards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.twin__guards h3 { margin: 0 0 6px; color: var(--ink-2); }
.twin__guards ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.twin__playbooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.twin__playbook { display: grid; gap: 12px; padding: 20px 24px; }
.twin__playbook header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.twin__playbook header p { margin: 4px 0 0; }
.twin__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.twin__meta { display: grid; gap: 8px; margin: 0; }
.twin__meta dt { color: var(--ink-2); font-size: var(--fs-meta); }
.twin__meta dd { margin: 2px 0 0; }
.earn__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; }
/* setting up the twin: the empty-state card on Calibration and the steps page */
.twin__setupsteps { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.twinsetup__step h2 { display: flex; align-items: center; gap: 10px; }
.twinsetup__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.twinsetup__script { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.twinsetup__script li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.twinsetup__script p { margin: 4px 0 0; font-size: 1.05rem; line-height: 1.6; }
.twinsetup__script li[data-kind="yours"] { border-color: var(--accent); }
.twinsetup__rec { display: grid; gap: 8px; }
.twinsetup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.twinsetup__row audio { height: 36px; }
.twinsetup__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: twin-rec 1.2s ease-in-out infinite; }
@keyframes twin-rec { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .twinsetup__dot { animation: none; } }
.twinsetup__style { display: grid; gap: 10px; }
.twinsetup__style > p { margin: 0; }
.twinsetup__phrases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.twinsetup__phrase { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.twinsetup__phrase[data-done="true"] { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.twinsetup__line { display: grid; gap: 2px; margin: 0; }
.twinsetup__reword { display: flex; gap: 8px; align-items: flex-end; }
.twinsetup__reword .input { flex: 1; }
.twinsetup__finish { display: flex; justify-content: flex-end; }

/* workflow cards: one offering's delivery, left to right like a flow (Zeplin-style), joined by a line; colour by kind */
.wflow__board { display: grid; gap: 10px; }
.wflow__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wflow__head h2 { margin: 0; font-size: var(--fs-h3); }
.wflow__track { list-style: none; margin: 0; padding: 4px 2px 12px; display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x proximity; }
.wflow__card { position: relative; flex: 0 0 240px; display: grid; align-content: start; gap: 6px; padding: 12px 14px; scroll-snap-align: start; border-top: 3px solid var(--line); }
.wflow__card + .wflow__card::before { content: ""; position: absolute; left: -29px; top: 28px; width: 28px; height: 2px; background: var(--line); }
.wflow__card[data-kind="input"] { border-top-color: var(--accent); }
.wflow__card[data-kind="decision"] { border-top-color: var(--warn); }
.wflow__card[data-kind="output"] { border-top-color: var(--ok); }
.wflow__card[data-kind="handover"] { border-top-color: var(--danger); }
.wflow__card[data-status="proposed"] { border-style: dashed; border-top-style: solid; }
.wflow__card header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.wflow__kind { color: var(--ink-2); font-size: var(--fs-meta); font-weight: 500; }
.wflow__title { line-height: 1.35; }
.wflow__card p { margin: 0; }
.wflow__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.wflow__edit form { display: grid; gap: 6px; margin-top: 6px; }
.wflow__edit > summary { list-style: none; }
.wflow__edit > summary::-webkit-details-marker { display: none; }
.vorbpage__workflow { width: min(100%, 1100px); margin: 16px auto 120px; padding: 0 16px; }

/* graduation: an offering's playbook graduates after 10 successful sessions; the strip is how much you steered */
.twin__rule { margin: -4px 0 0; }
.twin__grads { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.twin__grad { display: grid; gap: 10px; padding: 14px 16px; }
.twin__grad header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.twin__grad header p { margin: 2px 0 0; }
.twin__grad[data-graduated="true"] { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.twin__steer p { margin: 6px 0 0; }
.twin__steerbar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--line); }
.twin__steer--none { background: var(--ok); }
.twin__steer--light { background: var(--warn); }
.twin__steer--heavy { background: var(--danger); }
.twin__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
/* sessions: one row each (who, how, what it read, steering, outcome, counts), opened for the log */
.twin__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.twin__sessions { display: grid; gap: 8px; }
.twin__session { padding: 0; }
.twin__session summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto 20px; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.twin__session summary::-webkit-details-marker { display: none; }
.twin__session[open] summary { border-bottom: 1px solid var(--line); }
.twin__who { display: grid; gap: 2px; min-width: 0; }
.twin__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twin__how, .twin__read { display: flex; align-items: center; gap: 6px; min-width: 0; }
.twin__counts { color: var(--ok); }
.twin__log { display: grid; gap: 8px; padding: 12px 16px 16px; }
.twin__log > p { margin: 0; }
.twin__log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.twin__entry { display: grid; grid-template-columns: 56px 90px minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-radius: 8px; }
.twin__entry--intent { background: var(--ldu-wash); }
.twin__entry--steer { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.twin__entry--outcome { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.twin__by { font-weight: 600; }
@media (max-width: 860px) {
  .twin__session summary { grid-template-columns: minmax(0, 1fr) auto; }
  .twin__read { grid-column: 1 / -1; }
  .twin__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twin__entry { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 720px) { .twin__levels, .twin__guards { grid-template-columns: minmax(0, 1fr); } .twin__playbooks { grid-template-columns: minmax(0, 1fr); } }

/* Your AIs: the sessions your phone can talk to, then how to connect one */
.page.ldu-page.myaispage { display: grid; gap: 16px; max-width: 860px; }
.myais { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.myais__row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 16px; }
.myais__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-3); }
.myais__dot.is-on { background: var(--ok); }
.myais__who { display: grid; min-width: 0; }
.myais__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myais__connect { display: grid; gap: 12px; padding: 20px 24px; }
.myais__connect h2 { margin: 0; font-size: var(--fs-h3); }
@media (max-width: 640px) { .myais__row { grid-template-columns: 10px minmax(0, 1fr); } .myais__row .chip, .myais__row form { grid-column: 2; justify-self: start; } }

/* My Agents (Sam, 19 Oct): cards of your AI sessions, and one agent's page (voice dots left, tabs right). */
.page.ldu-page.agentspage { display: grid; gap: 16px; }
.agents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.agent-ico { flex: none; display: inline-block; vertical-align: -3px; }
.agents__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; padding: 16px 20px; }
.agents__link { position: absolute; inset: 0; border-radius: inherit; }
.agents__link:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.agents__id { display: grid; grid-template-columns: 44px minmax(0, auto) auto; column-gap: 12px; align-items: center; justify-content: start; min-width: 0; }
.agents__avatar { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.agents__avatar .modelicon { width: 24px; height: 24px; }
.agents__logo { display: grid; place-items: center; }
.agents__name { display: grid; min-width: 0; }
.agents__name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents__state { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.agents__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); }
.agents__dot.is-on { background: var(--ok); }
.agents__facts { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(auto-fit, minmax(104px, 1fr)); gap: 10px 20px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); min-width: 0; }
.agents__facts > div { display: grid; gap: 2px; min-width: 0; }
.agents__facts dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-small, 12px); }
.agents__facts dd { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; font-size: var(--fs-ui, 14px); }
.agents__actions { grid-column: 2; grid-row: 1; position: relative; z-index: 1; display: flex; gap: 8px; align-items: center; }
.agents__actions .btn { display: inline-flex; align-items: center; }
.agents__card--new { display: block; border-style: dashed; padding: 0; }
.agents__newrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.agents__newtext { display: grid; gap: 2px; }
.agents__plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px dashed var(--line-3); color: var(--muted); }
.agents__register { max-width: 860px; width: calc(100% - 32px); padding: 20px 24px; gap: 16px 24px; grid-template-columns: minmax(0, 1fr) 240px; }
.agents__register[open] { display: grid; }
.agents__register:not([open]) { display: none; }
.agents__register h2 { margin: 0; font-size: var(--fs-h3); }
.agents__registerfoot { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.agents__registersteps { display: grid; gap: 12px; align-content: start; min-width: 0; }
/* the first step of Add an agent: terminal or API key, then that path's own content */
.agents__choice { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.agents__choicecard { display: grid; gap: 6px; text-align: left; cursor: pointer; }
.agents__choicecard:hover, .agents__choicecard:focus-visible { border-color: var(--accent); }
.agents__keys, .agents__terminal { display: grid; gap: 10px; min-width: 0; }
.agents__keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.agents__keyrow .input { flex: 1 1 160px; min-width: 0; }
/* the paste form: Provider, Platform and Key on one row, Save key on the inputs' baseline; the row wraps cleanly on a phone */
.agents__addform { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) auto; gap: 8px; align-items: end; min-width: 0; }
.agents__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--fs-ui); color: var(--ink-2); }
.agents__field .input { width: 100%; min-width: 0; height: 2.5rem; box-sizing: border-box; }
.agents__field--key { grid-column: span 2; }
@media (max-width: 640px) { .agents__addform { grid-template-columns: 1fr; } .agents__field--key { grid-column: auto; } }
/* 'Add a new key' is the last row of the list, styled like the key rows */
.agents__addrow { width: 100%; justify-content: flex-start; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.agents__registerqr { margin: 0; display: grid; place-items: center; padding: 16px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-2); min-height: 260px; text-align: center; }
.agents__qrbox { display: grid; gap: 10px; justify-items: center; }
.agents__qrbox img { display: block; width: 200px; height: 200px; }
.agents__qrbox figcaption { display: grid; gap: 4px; justify-items: center; font-size: var(--fs-small, 12px); }
.agents__qrwait { display: grid; gap: 6px; justify-items: center; }
@media (max-width: 720px) { .agents__register { grid-template-columns: minmax(0, 1fr); } }

.page.ldu-page.agentshow { display: grid; gap: 12px; }
.agentshow__grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.agentshow__voice { position: relative; display: grid; gap: 10px; padding: 20px; overflow: hidden; }
.agentshow__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agentshow__name { margin: 0; font-size: var(--fs-h3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentshow__voice > p { margin: 0; }
.agentshow__stage { display: grid; place-items: center; width: 100%; min-height: 160px; overflow: hidden; }
.agentshow__stage .gridviz { gap: 7px; }
.agentshow__stage .gridviz__cell { width: 7px; height: 7px; }
.agentshow__status { text-align: center; }
.agentshow__controls { display: flex; justify-content: center; gap: 10px; }
.agentshow__tabs { display: grid; grid-template-rows: auto minmax(0, 1fr); height: clamp(520px, calc(100vh - 150px), 960px); padding: 0; overflow: hidden; }
.agentshow__tabs .tabbar { padding: 0 12px; }
.agentshow__panel { display: grid; align-content: start; gap: 12px; padding: 16px; min-height: 0; }
.agentshow__panel[hidden] { display: none; }
.agentshow__chat { grid-template-rows: minmax(0, 1fr) auto auto; padding: 0; height: 100%; min-height: 0; align-content: stretch; }
.agentshow__chat .transcript-frame { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.agentshow__chat .transcript-frame > .transcript { flex: 1 1 auto; height: auto; max-height: none; min-height: 0; overflow-y: auto; margin: 10px; }
.agentshow__chat .composer { padding: 10px 12px; border-top: 1px solid var(--line); }
.agentshow__rooms { padding: 0 16px 12px; }
.agentshow__rooms h3, .agentshow__a2a h3 { margin: 0 0 6px; }
.agentshow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.agentshow__facts { display: grid; gap: 6px; margin: 0; }
.agentshow__facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.agentshow__facts dt { color: var(--muted); }
.agentshow__facts dd { margin: 0; overflow-wrap: anywhere; }
.agentshow__a2a { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.agentshow__a2a p { margin: 0; }
.agentshow__a2aform { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.agentshow__a2aform .field { display: grid; gap: 4px; }
.agentshow__problem { margin: 0 0 6px; }
@media (max-width: 860px) { .agentshow__grid { grid-template-columns: minmax(0, 1fr); } .agentshow__tabs { min-height: 0; } }
.agents__waiting { display: flex; align-items: center; gap: 8px; margin: 0; }
.agents__dot--wait { background: var(--accent); animation: agents-pulse 1.2s ease-in-out infinite; }
@keyframes agents-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .agents__dot--wait { animation: none; } }
.agentshow__qr { width: 100%; }
.agentshow__crumbs { display: flex; gap: 6px; color: var(--muted); }
.agentshow__crumbs a { color: inherit; }
.agents__registersteps .cmdbox { min-width: 0; max-width: 100%; }
.agents__registersteps code { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.agents__registersteps ol { min-width: 0; }
.agents__removeform, .agents__clientform { position: relative; z-index: 1; }
@media (max-width: 560px) { .agents__card { grid-template-columns: minmax(0, 1fr); } .agents__id { grid-template-columns: 44px minmax(0, 1fr); } .agents__state { grid-column: 2; } .agents__actions { grid-column: 1; grid-row: 3; } .agents__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agents__newrow { grid-template-columns: 44px minmax(0, 1fr); } .agents__newrow > .btn { display: none; } }
.agentshow__facts dt { display: flex; align-items: center; gap: 6px; }
.agentshow__a2a h3 { display: flex; align-items: center; gap: 8px; }

/* a command to copy (onboarding, Your AIs, My Agents, the voice page): a tight DS card with the code, a line over it and its Copy button */
.cmdbox { gap: 8px; align-items: flex-start; }
.cmdbox small { display: block; font-size: var(--fs-meta); color: var(--ink-2); }
.cmdbox code { display: block; max-width: 100%; min-width: 0; font-family: var(--mono); font-size: var(--fs-ui); line-height: 1.5; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }

/* the onboarding role cards ("I am a ...", with AI or by hand): DS link cards; the page only lays them out */
.ob__choice { gap: 12px; align-items: flex-start; min-height: 220px; text-align: left; }
.ob__choice > span:not([class]) { color: var(--ink-2); line-height: 1.5; }
.ob__choice.ob__card--square { align-items: center; text-align: center; }

/* the confidence line on a DS progress bar (the score a profile or a reading needs) */
.ldu-progress:has(> .conf__line) { position: relative; }
.agentshow__call { display: grid; gap: 6px; justify-items: center; text-align: center; }
.agentshow__call .btn { min-width: 140px; justify-content: center; }