/* 2026-09-14 (Jefe): these referenced design tokens that are defined
   nowhere in the product, so the hardcoded fallback always won and the
   colour could never follow the theme. Some fallbacks were light and some
   were dark, so each was wrong in one mode and right in the other by
   accident. Mapped to the real tokens in base.css. */
/* The free trial funnel.
   Jefe, 2026-09-11: "i want it to look exactly like the htmls."

   This stylesheet IS the preview. The .ob block below is lifted verbatim
   from preview/register.html, personalize.html, team.html and setup.html;
   the .ob-plan block below it is the confirm composition from
   preview/checkout.html with the September palette already applied.

   Two rules hold it apart from the rest of the platform on purpose:

   * No dark mode. These pages are the marketing surface, not the app,
     and the homepage they continue is light only. A funnel that flips
     palette halfway through reads as two different companies.
   * No workspace chrome. base.css and workspace.css are not loaded here
     at all, so nothing in the app shell can reach in and restyle a page
     a prospect sees before they have an account. */

/* Round 126: the tokens themselves. The 2026-09-14 mapping pointed every
   colour here at base.css, which this document never loads (on purpose, see
   above), so each var() without a fallback resolved to nothing: the primary
   button on Register, "Continue with Google", was white text on no
   background, invisible, and the page had no way into the funnel. The
   funnel is light only, so the light values are stated here, once. */
body.ob-body {
  --bg: #F5F7FA; --surface: #FFFFFF; --accent: #3F83E8; --pos: #177056;
  --neg: #B33D4E; --warn: #965B13; --text: #17283B; --muted: #5D6E82;
  --border: #DCE4ED; --border2: #C6D2E1; --inset: #EDF3FB;
  --rule: #ECF1F7; --node: #F4F7FB; --bhover: #A8C2E8;
}

body.ob-body {
  margin: 0;
  background: var(--bg);
  /* Round 243: no web font is fetched; Inter only if installed, else the system stack. */
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ob {
  --ob-accent: var(--accent);
  max-width: 1200px;
  margin: auto;
  min-height: 85vh;
  padding: 28px 24px;
  color: var(--text, #18293b);
}
/* The preview carries a{color:var(--accent)} at body level. base.css has no
   global anchor colour and round 30's nav links went unreadable because
   of it, so this stylesheet states it rather than leaving every link to
   the browser's default blue. */
.ob a { color: var(--ob-accent); }
.ob header { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.ob header > a { font-size: 22px; font-weight: 750; text-decoration: none; color: inherit; }
.ob header > a span { font-weight: 400; }
.ob ol { display: flex; gap: 18px; list-style: none; padding: 0; font-size: 13px; }
.ob li { display: flex; align-items: center; gap: 7px; color: var(--muted, #64748b); }
.ob li span {
  border: 1px solid var(--border2); border-radius: 50%;
  width: 24px; height: 24px; display: grid; place-items: center;
}
.ob li.current { color: var(--ob-accent); font-weight: 700; }
.ob li.current span { background: var(--ob-accent); color: white; border-color: var(--ob-accent); }
.ob li.done span { color: var(--pos); border-color: var(--pos); }
.ob main { max-width: 650px; margin: 72px auto 40px; }
.ob h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; letter-spacing: -1.2px; margin: 16px 0; }
.ob-sub { font-size: 18px; line-height: 1.6; color: var(--muted, #64748b); margin-bottom: 32px; }
.ob-kicker { color: var(--ob-accent); font-size: 13px; font-weight: 700; }
.ob fieldset { border: 0; margin: 25px 0; padding: 0; }
.ob legend, .ob form > label { font-weight: 600; font-size: 15px; display: block; margin-bottom: 12px; }
.ob-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ob-options label { position: relative; cursor: pointer; }
.ob-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob-options span { display: block; padding: 13px 18px; border: 1px solid var(--border, #dce3ed); border-radius: 10px; }
.ob-options input:checked + span { border-color: var(--ob-accent); background: color-mix(in srgb, var(--ob-accent) 9%, transparent); color: var(--ob-accent); }
.ob-options input:focus-visible + span { outline: 3px solid var(--ob-accent); outline-offset: 3px; }
.ob input:not([type=hidden]):not([type=radio]), .ob textarea {
  display: block; box-sizing: border-box; width: 100%; font: inherit;
  padding: 15px; margin: 12px 0 24px; border-radius: 10px;
  border: 1px solid var(--border, #dce3ed); background: var(--surface); color: inherit;
}
.ob-primary {
  display: block; width: 100%; box-sizing: border-box; padding: 16px 22px;
  background: var(--ob-accent); color: #fff !important; border: 0; border-radius: 10px;
  font: inherit; font-weight: 600; text-decoration: none; text-align: center;
  cursor: pointer; margin: 25px 0 16px;
}
.ob-secondary { display: block; margin: 16px auto; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ob-note, .ob footer { font-size: 13px; color: var(--muted, #64748b); line-height: 1.6; }
.ob-callout {
  padding: 20px; border: 1px solid var(--border, #dce3ed); border-radius: 12px;
  margin: 28px 0; line-height: 1.6; background: #3f83e80a;
}
.ob footer { text-align: center; }
.ob-client {
  display: flex; justify-content: space-between; gap: 15px; padding: 20px;
  border: 1px solid var(--border, #dce3ed); border-radius: 10px; margin: 15px 0; text-decoration: none;
}
.ob-client span { font-size: 13px; }
.ob-err { color: var(--neg); font-size: 14px; margin: 0 0 4px; font-weight: 600; }
.ob button:focus-visible, .ob a:focus-visible { outline: 3px solid var(--ob-accent); outline-offset: 3px; }
@media (max-width: 760px) {
  .ob header { display: block; }
  .ob ol { gap: 10px; flex-wrap: wrap; margin-top: 24px; }
  .ob li { font-size: 11px; }
  .ob main { margin-top: 42px; }
  .ob { padding: 18px 8px; }
}

/* The confirm composition, from preview/checkout.html. Wider than the
   650px column the other four steps use, because the plan and the
   payment panel sit side by side. */
.ob.ob-wide main { max-width: 1110px; }
.ob-intro { text-align: center; margin-bottom: 42px; }
.ob-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.ob-plan, .ob-assurance { background: var(--surface); border: 1px solid var(--border); border-radius: 27px; padding: 26px 24px; }
.ob-plan h2 { color: var(--muted); font-size: 19px; font-weight: 500; margin: 5px 0 28px; }
.ob-seats { font-size: 16px; margin: 0 0 17px; }
.ob-feature { display: flex; align-items: center; gap: 13px; min-height: 48px; font-size: 19px; }
.ob-feature .ob-icon {
  width: 33px; height: 33px; border-radius: 7px; display: grid; place-items: center;
  font-size: 20px; background: var(--inset); color: var(--accent); border: 1px solid var(--border2);
}
.ob-feature .ob-value { margin-left: auto; color: var(--muted); font-size: 14px; text-align: right; }
.ob-assurance { margin-top: 20px; padding: 24px; background: var(--inset); }
.ob-assurance h3 { font-size: 18px; margin: 0 0 12px; font-weight: 500; }
.ob-assurance p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.ob-payment { border-radius: 27px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 24px 22px 25px; }
.ob-price { font-size: 40px; font-weight: 600; margin: 0 0 6px; letter-spacing: -1px; }
.ob-price small { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.ob-lines { list-style: none; margin: 26px 0 0; padding: 0; }
.ob-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.ob-lines li b { font-weight: 600; }
.ob-lines li:last-child { border-bottom: 0; }
.ob-due { display: flex; justify-content: space-between; gap: 14px; font-size: 20px; font-weight: 600; padding: 18px 0 4px; }
.ob-secure { font-size: 12px; text-align: center; color: var(--muted); margin: 22px 0 18px; }
.ob-fine { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.6; margin: 14px 0 0; }
.ob-bottom { text-align: center; color: var(--muted); margin-top: 20px; font-size: 12px; }
.ob-bottom a { color: var(--accent); }
@media (max-width: 850px) {
  .ob-columns { grid-template-columns: 1fr; max-width: 530px; margin: auto; }
  .ob-feature { font-size: 17px; }
}

/* Step four, part one: the plan grid, from preview/confirm.html. */
.ob-billing {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--node); border-radius: 13px; max-width: 360px;
  margin: 0 auto 35px;
}
.ob-billing a {
  display: block; padding: 14px 16px; border-radius: 11px;
  border: 1px solid transparent; color: var(--muted); text-decoration: none;
  line-height: 1.4;
}
.ob-billing a b { display: block; font-size: 17px; font-weight: 600; color: var(--text); }
.ob-billing a span { display: block; font-size: 13px; margin-top: 6px; }
.ob-billing a.ob-bill-on {
  background: var(--surface); border-color: var(--bhover); box-shadow: 0 2px 8px #3f83e812;
}
.ob-payment .ob-billing { max-width: none; margin: 0 0 28px; }

.ob-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.ob-plan-grid .ob-plan { padding: 28px 24px; }
.ob-plan-pick { border-color: var(--accent); box-shadow: 0 6px 24px #3f83e81f; }
.ob-desc { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 4px; }
.ob-pick { color: var(--accent); font-size: 13px; font-weight: 600; margin: 10px 0 0; line-height: 1.4; }
.ob-save { color: #168269; font-size: 14px; margin: 0; }
.ob-plan-grid .ob-price { font-size: 40px; font-weight: 600; margin: 26px 0 6px; }
.ob-choose {
  display: block; padding: 14px; text-align: center; background: var(--accent);
  color: #fff !important; text-decoration: none; border-radius: 9px;
  font-weight: 600; margin: 26px 0;
}
.ob-features { border-top: 1px solid var(--border); padding-top: 16px; font-size: 14px; line-height: 1.7; }
.ob-features p { margin: 0; }
.ob-change {
  display: block; width: 100%; box-sizing: border-box; margin-top: 22px;
  border: 0; border-radius: 12px; background: var(--inset); color: var(--accent);
  padding: 14px; font-size: 16px; text-align: center; text-decoration: none;
}
.ob-change:hover { background: var(--inset); }
@media (max-width: 850px) {
  .ob-plan-grid { grid-template-columns: 1fr; max-width: 530px; margin: auto; }
}

/* Round 126: the sign in page (Jefe: "should look similar to the image",
   Foreplay's login) and the connections landing that ends the funnel. */
body.au-body { min-height: 100vh; display: flex; }
.au {
  --ob-accent: var(--accent);
  width: 100%; max-width: 440px; margin: auto; padding: 40px 20px 32px;
  box-sizing: border-box; color: var(--text);
}
.au a { color: var(--accent); }
.au-brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 22px; font-weight: 750; color: var(--text) !important; text-decoration: none; margin-bottom: 26px;
}
.au-brand span { font-weight: 400; }
.au-brand svg { width: 30px; height: 30px; }
.au-brand img { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; }
.au-initial {
  width: 30px; height: 30px; border-radius: 8px; background: #1F2A44; color: #fff; display: grid;
  place-items: center; font-size: 16px; font-weight: 700;
}
.au-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 30px 28px 24px; box-shadow: 0 10px 34px -22px rgba(23, 40, 59, .35);
}
.au-card h1 { font-size: 24px; letter-spacing: -.4px; margin: 0 0 6px; text-align: center; }
.au-card .au-lead { color: var(--muted); font-size: 15px; line-height: 1.55; text-align: center; margin: 0 0 22px; }
.au-form label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 16px; }
.au-form input[type=email], .au-form input[type=password], .au-form input[type=text] {
  display: block; box-sizing: border-box; width: 100%; margin-top: 7px; padding: 13px 14px;
  font: inherit; font-weight: 400; color: var(--text); background: var(--surface);
  border: 1px solid var(--border2); border-radius: 10px;
}
.au-form input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 33%, transparent); border-color: var(--accent); }
.au-submit {
  display: block; width: 100%; padding: 14px 20px; margin: 6px 0 0; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff !important; font: inherit; font-weight: 650; cursor: pointer;
  text-align: center; text-decoration: none; box-sizing: border-box;
}
.au-submit:focus-visible, .au-google:focus-visible, .au a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.au-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; margin: 16px 0 0; color: var(--muted); }
.au-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 20px 0; }
.au-or::before, .au-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.au-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100%;
  padding: 13px 18px; border: 1px solid var(--border2); border-radius: 10px; background: var(--surface);
  color: var(--text) !important; font-weight: 600; text-decoration: none;
}
.au-google svg { width: 18px; height: 18px; flex: none; }
.au-terms { font-size: 12.5px; color: var(--muted); line-height: 1.55; text-align: center; margin: 18px 0 0; }
.au-msg { border-radius: 10px; padding: 11px 13px; font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.au-msg.au-bad { background: #b33d4e12; border: 1px solid #b33d4e40; color: var(--neg); }
.au-msg.au-ok { background: #17705612; border: 1px solid #17705640; color: var(--pos); }
.au-msg.au-info { background: var(--inset); border: 1px solid var(--border); color: var(--text); }
.au-aside { font-size: 13px; color: var(--muted); text-align: center; margin: 18px 0 0; line-height: 1.55; }
.au-link { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.au-link summary { cursor: pointer; text-align: center; }
.au-link form { display: flex; gap: 8px; margin-top: 10px; }
.au-link input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border2); border-radius: 8px; }
.au-link button { padding: 10px 14px; border: 1px solid var(--border2); background: var(--surface); border-radius: 8px; font: inherit; cursor: pointer; }
@media (max-width: 480px) { .au-card { padding: 24px 18px 20px; } }

/* Register: the email form under Google. */
.ob-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 8px 0 18px; }
.ob-or::before, .ob-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.ob-email label { font-weight: 600; font-size: 15px; display: block; }
.ob-email .ob-primary { margin-top: 4px; background: var(--text); }

/* The connections landing: every platform, and the clients it made. */
.ob-conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 26px 0 30px; }
.ob-conn {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface); min-width: 0;
}
.ob-conn-head { display: flex; align-items: center; gap: 12px; }
.ob-conn-tile {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: #fff; font-weight: 700; font-size: 14px;
}
.ob-conn-tile img { width: 40px; height: 40px; border-radius: 10px; }
.ob-conn h2 { font-size: 16px; margin: 0; }
.ob-conn p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.ob-conn form { margin: auto 0 0; }
.ob-conn .ob-go {
  display: block; width: 100%; box-sizing: border-box; padding: 11px 14px; border: 0; border-radius: 9px;
  background: var(--accent); color: #fff !important; font: inherit; font-weight: 600; cursor: pointer;
  text-align: center; text-decoration: none;
}
.ob-conn .ob-go.ob-quiet { background: var(--inset); color: var(--accent) !important; }
.ob-conn .ob-state { font-size: 12.5px; font-weight: 600; color: var(--pos); }
.ob-conn .ob-state.ob-none { color: var(--muted); font-weight: 500; }
.ob-clients { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 24px; }
.ob-clients th, .ob-clients td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ob-clients th { font-size: 12px; color: var(--muted); font-weight: 600; }
.ob-clients td small { display: block; color: var(--muted); margin-top: 3px; }
.ob-wait { color: var(--warn); }
.ob-run { color: var(--accent); }
.ob-done { color: var(--pos); }
.ob-scroll { overflow-x: auto; }
.ob form > label.ob-choice, .ob-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 14px;
  border: 1px solid var(--border); border-radius: 12px; margin: 0 0 12px; background: var(--surface);
  font-weight: 400; font-size: 15px; color: var(--text);
}
.ob .ob-choice input[type=checkbox] { display: inline-block; margin: 3px 0 0; padding: 0; width: 18px; height: 18px; }
.ob-choice .ob-choice-body b { display: block; font-weight: 650; }
.ob-choice .ob-choice-body small { color: var(--muted); display: block; margin-top: 2px; }
.ob .ob-choice select, .ob .ob-choice input[type=text] {
  display: inline-block; width: auto; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface); color: var(--text); margin: 8px 8px 0 0; max-width: 100%;
}
.ob-choice-off { opacity: .6; }

/* Round 127: the landing's review panel, and the combined screen that
   matches every account into clients by website. */
.ob-seen { color: var(--pos); }
.ob-conn .ob-state.ob-found { color: var(--accent); }
.ob-review {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; margin: 22px 0 6px; border: 1px solid var(--bhover); border-radius: 14px;
  background: var(--inset);
}
.ob-review p { margin: 0; font-size: 15px; line-height: 1.5; }
.ob-review .ob-kicker { margin-bottom: 4px; }
.ob-review .ob-primary { margin: 0; width: auto; flex: none; }
.ob-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.mt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.mt-chip {
  display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: 13px; color: var(--muted);
}
.mt-chip-on { border-color: var(--bhover); color: var(--text); background: var(--inset); }
.mt-inline { display: inline; margin: 0; }
.mt-inline .ob-secondary { margin: 0; }
.mt-groups { display: grid; gap: 16px; margin: 18px 0 20px; }
.mt-group {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px 18px;
  min-width: 0;
}
.mt-group header { display: grid; gap: 4px; margin-bottom: 10px; }
.mt-group h2 { font-size: 18px; margin: 0; }
.mt-kind { margin: 0; font-size: 12px; font-weight: 700; color: var(--accent); }
.mt-stuck .mt-kind { color: var(--warn); }
.mt-why { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ob .mt-name input[type=text] {
  font: inherit; font-size: 17px; font-weight: 650; padding: 8px 10px; border: 1px solid var(--border2);
  border-radius: 8px; width: 100%; max-width: 420px; box-sizing: border-box; background: var(--surface);
  color: var(--text); margin: 0;
}
.mt-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mt-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* ".ob li" and ".ob li span" style the setup rail's steps (trial.py) and
   reach every list item in the funnel; these rules are one class stronger so
   an account row is a row, its tile a tile and its label plain text. */
.ob .mt-acct {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 340px); align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--node);
  color: var(--text); font-size: 15px;
}
.ob .mt-acct span.mt-tile { width: 34px; height: 34px; border: 0; border-radius: 9px; font-size: 12px; }
.ob .mt-acct .mt-tile img { width: 34px; height: 34px; border-radius: 9px; }
.ob .mt-to span { display: block; width: auto; height: auto; border: 0; border-radius: 0; }
.mt-body { min-width: 0; }
.mt-body b { display: block; font-weight: 650; overflow-wrap: anywhere; }
.mt-body small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.mt-body .mt-on { color: var(--pos); font-weight: 600; }
.mt-to { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; margin: 0; }
.ob .mt-to select {
  font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface); color: var(--text); width: 100%; min-width: 0; box-sizing: border-box; margin: 0;
}
.mt-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.mt-bar .ob-primary { margin: 0; width: auto; }
.mt-bar .ob-note { margin: 0; }
@media (max-width: 640px) {
  .ob .mt-acct { grid-template-columns: auto minmax(0, 1fr); }
  .mt-to { grid-column: 1 / -1; }
  .ob-review .ob-primary { width: 100%; }
}
.ob-status .ob-secondary, .mt-inline .ob-secondary {
  display: inline-block; margin: 0; padding: 7px 12px; border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface); color: var(--accent); font-weight: 600; font-size: 13.5px;
}
.ob-status .ob-secondary:disabled { opacity: .6; cursor: wait; }

/* Round 303: the Custom connectors card on the Connections page. */
.ob-cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-cc-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 14px; }
.ob-cc-list li small { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.ob-cc-list b { overflow-wrap: anywhere; font-weight: 600; }
.ob-cc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ob-conn .ob-cc-new { display: grid; gap: 10px; margin: 4px 0 0; }
.ob-cc-new label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.ob-cc-new input[type=text], .ob-cc-new select {
  font: inherit; font-size: 14px; font-weight: 400; padding: 9px 10px; border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; min-width: 0;
}
.ob-cc-new fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-cc-new legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.ob-cc-new fieldset label { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.ob-cc-new input[type=radio] { width: 16px; height: 16px; margin: 0; flex: none; }
.ob .ob-cc-list .ob-cc-dot { width: 10px; height: 10px; min-width: 0; padding: 0; margin: 0; align-self: center; }
.ob .ob-cc-new input[type=text], .ob .ob-cc-new select { margin: 0; height: auto; display: block; }

/* Round 304: one custom connector, its mapping step and its loads. */
.ob-cc-list a { color: inherit; text-decoration: none; }
.ob-cc-list a:hover b, .ob-cc-list a:focus-visible b { text-decoration: underline; }
.ob-cc-page { display: grid; gap: 16px; max-width: 1080px; }
.ob-cc-page h1 { display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; margin: 0; }
.ob-cc-page h2 { font-size: 17px; margin: 0 0 8px; }
.ob-cc-page h3 { font-size: 15px; margin: 8px 0 4px; }
.ob-cc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ob-cc-page table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ob-cc-page th, .ob-cc-page td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border2); vertical-align: top; }
.ob-cc-page th { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ob-cc-cols td:first-child { min-width: 160px; overflow-wrap: anywhere; }
.ob-cc-cols td small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ob-cc-cols select, .ob-cc-cols input[type=text] { font: inherit; padding: 6px 8px; border: 1px solid var(--border2); border-radius: 6px; background: var(--surface); color: inherit; max-width: 100%; }
.ob-cc-cols td:nth-child(4) select { display: block; margin-bottom: 4px; }
.ob-cc-why { color: var(--muted); font-size: 12.5px; min-width: 180px; }
.ob-cc-form { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border2); border-radius: 10px; }
.ob-cc-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.ob-cc-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-cc-form fieldset label, .ob-cc-now { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ob-cc-form input[type=url], .ob-cc-form > label input[type=text] { font: inherit; padding: 8px 10px; border: 1px solid var(--border2); border-radius: 6px; max-width: 420px; }
.ob-cc-form .ob-go { justify-self: start; }
.ob-cc-result { padding: 14px 16px; border-radius: 10px; background: var(--inset); }
.ob-cc-held ol { margin: 4px 0 0; padding-left: 20px; font-size: 13px; }
.ob-hint { color: var(--muted); font-size: 12.5px; margin: 0; }
@media (max-width: 600px) {
  .ob-cc-page th, .ob-cc-page td { padding: 6px 6px; }
  .ob-cc-form { padding: 12px; }
}
.ob-cc-page .ob-go {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 18px;
  border: 0; border-radius: 8px; background: var(--accent); color: #fff !important; font: inherit;
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ob .ob-cc-held ol { display: block; list-style: decimal; padding-left: 20px; margin: 4px 0 0; gap: 0; }
.ob .ob-cc-held li { display: list-item; font-size: 13px; color: inherit; }
/* The metric choices matter only on a metric row. */
.ob-cc-cols tr:not(:has(option[value='metric']:checked)) td:nth-child(4) select { visibility: hidden; }
@media (max-width: 600px) {
  /* Each column as a small card on a phone, so the reason stays in view. */
  .ob-cc-cols thead { display: none; }
  .ob-cc-cols tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--border2); }
  .ob-cc-cols td { display: block; border: 0; padding: 0; min-width: 0; }
  .ob-cc-cols td:first-child, .ob-cc-cols td.ob-cc-why { grid-column: 1 / -1; min-width: 0; }
  .ob-cc-cols td:nth-child(4) { display: flex; gap: 6px; grid-column: 1 / -1; }
  .ob-cc-cols td:nth-child(4) select { margin: 0; }
  .ob-cc-cols tr:not(:has(option[value='metric']:checked)) td:nth-child(4) { display: none; }
  .ob-cc-cols select, .ob-cc-cols input[type=text] { width: 100%; box-sizing: border-box; }
}

/* Round 305: account names and their clients. */
.ob-cc-acc td:first-child { overflow-wrap: anywhere; min-width: 140px; }
.ob-cc-acc select { font: inherit; padding: 6px 8px; border: 1px solid var(--border2); border-radius: 6px; background: var(--surface); color: inherit; max-width: 100%; }
@media (max-width: 600px) {
  .ob-cc-acc thead { display: none; }
  .ob-cc-acc tr { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--border2); }
  .ob-cc-acc td { display: block; border: 0; padding: 0; min-width: 0; }
  .ob-cc-acc select { width: 100%; box-sizing: border-box; }
}