/* Xorion v5, public marketing pages (pricing, how-it-works, bot). Load after bridge.css. */
/* Public pages (pricing, how-it-works, bot). Mock-ups stay monochrome: state reads as filled, outline or dashed,
   never green or amber. One lavender mark per page, the hero highlight, as an underline. */
main { --pub-muted: color-mix(in srgb, var(--xo-fg) 15%, var(--xo-fg-muted)); }
/* The muted grey is 4.06:1 on the surface-2 grey; text on those surfaces uses the darker step (4.5:1 or better). */
main .xo-section-sunk, main .xo-vis, main .xo-statuscard-foot, main .xo-stack-total, main .xo-summary-save,
main .xo-compare thead th, main .xo-compare tr.xo-compare-group th, main .xo-inline-code, main .xo-who { --xo-fg-muted: var(--pub-muted); --ink-muted: var(--pub-muted); }

main .xo-hl { background: none; padding: 0; margin: 0; color: inherit; }
main .xo-hero .xo-hl { text-decoration: underline; text-decoration-color: var(--xo-accent-mark); text-decoration-thickness: 3px; text-underline-offset: 0.16em; text-decoration-skip-ink: none; }

main .xo-vis-chip-done { background: var(--xo-fg); color: var(--xo-bg); border-color: var(--xo-fg); }
main .xo-vis-chip-review { color: var(--xo-fg); }
main .xo-vis-chip-blocked { color: var(--xo-fg); border-style: dashed; }
main .xo-vis-chip-muted { color: var(--xo-fg-muted); }
main .xo-status-done { background: var(--xo-fg); color: var(--xo-bg); border-color: var(--xo-fg); }
main .xo-status-review { color: var(--xo-fg); }
main .xo-status-blocked { color: var(--xo-fg); border-style: dashed; }
main .xo-status-queued { color: var(--xo-fg); }
main .xo-status, main .xo-vis-chip, main .xo-who { border-width: 1px; }
main .xo-progress > span { background: var(--xo-fg); }
main .xo-progress { background: var(--xo-border-control); height: 6px; }
main .xo-statuscard .xo-progress, main .xo-vis .xo-progress { background: var(--xo-surface-2); border: 1px solid var(--xo-border-control); box-sizing: content-box; }
main .xo-vis-row-done, main .xo-vis-row-blocked { border-left-color: var(--xo-border); }
main .xo-vis-photo { background: var(--xo-surface); border: 1px solid var(--xo-border-control); }
main .xo-vis-ring { background: var(--xo-surface-2); border: 1px solid var(--xo-border-control); }
main .xo-list-no li::before, main .xo-list-yes li::before { color: var(--xo-fg); }
main .xo-sample { height: auto; min-height: 22px; padding: 4px 10px; line-height: 16px; white-space: normal; border-radius: var(--xo-radius-md); }

/* Code blocks: surface-2 with a hairline in both themes (the primary fill is a near-white slab in dark). Long lines scroll, they do not break mid-domain. */
main .xo-code { background: var(--xo-surface-2); color: var(--xo-fg); border: 1px solid var(--xo-border-control); white-space: pre; word-break: normal; overflow-x: auto; }

/* Timeline owner pill: filled for You, outline for Us, ink on both. */
main .xo-tl-who .xo-who { color: var(--xo-fg); border-color: var(--xo-fg); background: transparent; }
main .xo-tl-who .xo-who-you { background: var(--xo-fg); color: var(--xo-bg); }

/* Bot page spacing. */
.xo-m-0 { margin: 0; }

/* Tags and chips stay readable at 12px. */
main .xo-vis-chip { font-size: 12px; height: 20px; }
/* The scroll edge of a code block clears the same padding as the start. */
main .xo-code { padding-right: var(--xo-space-3); }
/* Hairlines on a surface-2 band: the default 1px border colour is the band's own grey. */
main .xo-section-sunk .xo-faq, main .xo-section-sunk .xo-faq details, main .xo-section-sunk .xo-rule { border-color: var(--xo-border-control); }

/* Phone: the user-agent line stays whole on one row (37 characters at 13px mono is about 290px). */
@media (max-width: 480px) {
  main .xo-code { font-size: 12.5px; line-height: 22px; padding-inline: var(--xo-space-2); }
}

/* V6-18: section titles use one reusable hairline, with no eyebrow row. */
main .xo-section-head {
  border-top: 1px solid var(--xo-border-control);
  padding-top: var(--xo-space-3);
}

/* A border-drawn chevron replaces the boxed plus/minus; opening never adds a fill. */
main .xo-faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border: 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  transform: rotate(45deg);
}
main .xo-faq details[open] summary::after {
  content: "";
  background: transparent;
  color: inherit;
  border-color: currentColor;
  transform: rotate(225deg);
}

/* V6-15: the closing band takes more vertical room and a narrower measure (component-picks:79).
   Home only: .xo-band-split is on no other page, so /how-it-works, /pricing and /work keep their band. */
main .xo-band:has(.xo-band-split) { padding-block: calc(var(--xo-space-8) + var(--xo-space-4)); }
main .xo-band-split > :first-child { max-width: 34rem; }
@media (max-width: 760px) {
  main .xo-band:has(.xo-band-split) { padding-block: var(--xo-space-8); }
}

/* V6-15: the phone bar. It is the one element allowed a second Sign up while the page body has one
   (ui-rules.md:72, D-01 item 3), so the --signups run passes --except .xo-actionbar. CSS alone shows it:
   the page carries no script and no inline style for the bar. */
.xo-actionbar { display: none; }
@media (max-width: 600px) {
  .xo-actionbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--xo-space-2);
    padding: var(--xo-space-1-5) var(--xo-space-2) calc(var(--xo-space-1-5) + env(safe-area-inset-bottom, 0px));
    background: var(--xo-surface);
    border-top: 1px solid var(--xo-border);
  }
  .xo-actionbar .xo-btn { flex: 1 1 auto; }
  .xo-actionbar-login {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--xo-control-h-lg);
    padding-inline: var(--xo-space-1-5);
    color: var(--xo-fg-muted);
    text-decoration: none;
  }
  .xo-actionbar-login:hover { color: var(--xo-fg); text-decoration: underline; }
  /* The bar must not sit on the last line of the page. */
  .xo-page:has(.xo-actionbar) .site-foot { padding-bottom: var(--xo-space-8); }
}

/* V6-22: a status is the word plus V6-34's line icon, never a pill (ST-1; ST-2 keeps the pill for Sample
   data and plan names). The icon carries currentColor, so the string has no colour of its own. */
main .xo-statusline { display: inline-flex; align-items: center; gap: var(--xo-space-0-5); white-space: nowrap; }
main .xo-statusline svg { flex: 0 0 auto; }

/* V6-23: the hero's Sample report card. Batch 2b row T1 fixes its rows, so the sheet must not borrow an
   accent colour (the h1 keeps the page's one mark) and the card must not need a script or motion. The
   card carries `sample-strip`, the class site-gates.mjs:59 reads to let a page show `+N points` at all. */
.xo-reportcard { border: 1px solid var(--xo-border); border-radius: var(--xo-radius-lg); background: var(--xo-surface); padding: var(--xo-space-3); }
.xo-reportcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--xo-space-2); }
.xo-reportcard-name { font-weight: 600; }
.xo-reportcard-score { margin: var(--xo-space-3) 0 var(--xo-space-1); }
.xo-reportcard-score b { font-weight: 700; }
.xo-reportcard-meter { height: 6px; border-radius: 3px; background: var(--xo-border); overflow: hidden; }
.xo-reportcard-meter > span { display: block; width: 76%; height: 100%; background: var(--xo-fg); }
.xo-reportcard-next { margin: var(--xo-space-1) 0 0; }
.xo-reportcard-bands, .xo-reportcard-fixes { list-style: none; margin: 0; padding: 0; }
.xo-reportcard-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--xo-space-2); margin-top: var(--xo-space-2); }
.xo-reportcard-bands li { display: flex; justify-content: space-between; gap: var(--xo-space-1); border-top: 1px solid var(--xo-border); padding-top: var(--xo-space-0-5); }
.xo-reportcard-title { margin: var(--xo-space-3) 0 0; }
.xo-reportcard-fixes li { display: flex; justify-content: space-between; gap: var(--xo-space-2); border-top: 1px solid var(--xo-border); padding-top: var(--xo-space-1); margin-top: var(--xo-space-1); }
.xo-reportcard-points { font-weight: 600; white-space: nowrap; }
.xo-reportcard-note { margin: var(--xo-space-3) 0 0; color: var(--xo-fg-muted); }
@media (max-width: 600px) { .xo-reportcard-bands { grid-template-columns: minmax(0, 1fr); } }