/* Xfficient website, design v2: the one stylesheet of every page in the frame (site_frame.rs).
   No build step, web font, url() or @import. Light and dark follow the system.
   Sizes and greys follow @openai/apps-sdk-ui 0.2.2 (MIT, Copyright 2025 OpenAI); no file of it is copied. */

/* 1. Values. The accent is on live marks only. */
:root {
  color-scheme: light;
  --xf-page: #fff;
  --xf-text: #0d0d0d;
  --xf-quiet: rgb(13 13 13 / 62%);
  --xf-raised: #f9f9f9;
  --xf-sheet: #f9f9f9;
  --xf-lift: 0 1px 2px rgb(0 0 0 / 4%), 0 12px 32px -16px rgb(0 0 0 / 12%);
  --xf-hair: rgb(13 13 13 / 5%);
  --xf-line: rgb(13 13 13 / 10%);
  --xf-rule: rgb(13 13 13 / 15%);
  --xf-hover: rgb(13 13 13 / 8%);
  --xf-edge: rgb(13 13 13 / 45%);
  --xf-accent-rgb: 0 106 96;
  --xf-ok-text: #00423c;
  --xf-ending: #911e1b;
  --xf-danger: #e02e2a;
  --xf-danger-text: #601d18;
  --xf-warn: #923b0f;
  --xf-warn-text: #522714;
  --xf-button: #0d0d0d;
  --xf-button-text: #fff;
  --xf-button-hover: #303030;
  --xf-accent: rgb(var(--xf-accent-rgb));
  --xf-font: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --xf-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "Roboto Mono", "Droid Sans Mono", monospace;
  --xf-w: 45rem;
  --xf-pad: 24px;
  --xf-top: 32px;
  --xf-gap: 22px;
  --xf-frame: 47.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --xf-page: #181818;
    --xf-text: #fff;
    --xf-quiet: rgb(255 255 255 / 62%);
    --xf-raised: rgb(255 255 255 / 4.5%);
    --xf-sheet: rgb(255 255 255 / 7%);
    --xf-lift: 0 1px 2px rgb(0 0 0 / 24%);
    --xf-hair: rgb(255 255 255 / 6%);
    --xf-line: rgb(255 255 255 / 12%);
    --xf-rule: rgb(255 255 255 / 20%);
    --xf-hover: rgb(255 255 255 / 12%);
    --xf-edge: rgb(255 255 255 / 40%);
    --xf-accent-rgb: 0 156 149;
    --xf-ok-text: #83c4be;
    --xf-ending: #ff6764;
    --xf-danger: #fa423e;
    --xf-danger-text: #ff8f83;
    --xf-warn: #fb6a22;
    --xf-warn-text: #f6a688;
    --xf-button: #f3f3f3;
    --xf-button-text: #0d0d0d;
    --xf-button-hover: #ededed;
  }
}

/* 2. Base */
.xf-root { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--xf-page); color: var(--xf-text); font: 400 .875rem/1.25rem var(--xf-font); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.xf-root *, .xf-root ::before, .xf-root ::after { box-sizing: border-box; }
.xf-root :where(h1, h2, h3, p, ul, ol, dl, dd, blockquote, pre, figure, fieldset, th, td) { margin: 0; padding: 0; }
.xf-root :where(h1, h2, h3, small, th) { font: inherit; }
.xf-root :where(ul, ol) { list-style: none; }
.xf-root :where(fieldset) { min-width: 0; border: 0; }
.xf-root :where(b, strong) { font-weight: 600; }
.xf-root :where(a) { color: inherit; }
.xf-root :where(button, input, select, textarea) { margin: 0; color: inherit; font: inherit; }
.xf-root :where(svg) { flex: none; }
.xf-root :focus-visible { outline: 2px solid var(--xf-text); outline-offset: 2px; }

.xf-root [hidden] { display: none !important; }
.xf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xf-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.xf-nb { white-space: nowrap; }
.xf-medium, .xf-sheet-list strong { font-weight: 500; }
.xf-narrow { display: none; }
.xf-stack { display: grid; row-gap: 8px; }
/* Groups joined by a dot; the dot that would start a line is cut away. */
.xf-groups { margin-left: -.75em; clip-path: inset(0 0 0 .75em); }
.xf-g { display: inline-block; position: relative; padding-left: .75em; }
.xf-g > i { position: absolute; left: 0; width: .75em; font-style: normal; text-align: center; }

/* Type: 12, 14, 16, 18, 20 (the total), 24 and 32. */
.xf-folio, .xf-ticker, .xf-section-note, .xf-day, .xf-label, .xf-quote-label, .xf-caption, .xf-step-time, .xf-order-head, .xf-field-hint, .xf-foot, .xf-command-os, .xf-fact small, .xf-sum small, .xf-row-figure > :last-child, .xf-table th, .xf-avatar, .xf-price, .xf-address, .xf-comp-note, .xf-comp-mark { font-size: .75rem; line-height: 1.125rem; }
.xf-terms, .xf-order-limit, .xf-legs, .xf-section-title, .xf-sheet-title, .xf-state[data-promoted], .xf-brand, .xf-prose, .xf-plain, .xf-quote[data-read] .xf-agent-quote, .xf-input, .xf-button[data-size="lg"] { font-size: 1rem; line-height: 1.5rem; }
.xf-hello-also, .xf-row-marks, .xf-list[data-dense] .xf-row-title, .xf-button, .ov .button, .xf-pills, .xf-span, .xf-command pre, .xf-trow, .xf-stat { font-size: .875rem; line-height: 1.25rem; }
.xf-title, .xf-hello-line { font-size: 1.5rem; line-height: 1.875rem; font-weight: 600; text-wrap: balance; }
.xf-quiet, .xf-folio, .xf-ticker, .xf-who, .xf-section-note, .xf-day, .xf-label, .xf-quote-label, .xf-notes, .xf-step-time, .xf-order-head, .xf-order-remark, .xf-field-hint, .xf-foot, .xf-command-os, .xf-fact > dt, .xf-fact small, .xf-sum small, .xf-row-when, .xf-row-meta, .xf-row-figure > :last-child, .xf-empty-line, .xf-chevron, .xf-hello-also, .xf-table th, .xf-factline dt, .xf-factline [data-quiet] > dd, .xf-trow-line, .xf-entry-body > p + p, .xf-fold > summary > svg, .xf-choice span > span, .xf-comp-note, .xf-comp-mark { color: var(--xf-quiet); }
[data-ending] { color: var(--xf-ending); }
/* Figures: monospace, one weight, the size of the text beside them. */
.xf-fig, .xf-row-when, .xf-count, .xf-stat > b, .xf-sum b, .xf-address, .xf-command pre { font-family: var(--xf-mono); font-weight: 500; }
span.xf-fig, .xf-sum b, .xf-stat > b { line-height: 1; }

/* 3. The frame: a bar, one column, a foot (on a desk the rail, 18). */
.xf-skip { position: absolute; left: 8px; top: -80px; z-index: 9; padding: 8px 14px; border-radius: 99px; background: var(--xf-button); color: var(--xf-button-text); font-weight: 500; text-decoration: none; }
.xf-skip:focus { top: 8px; }
.xf-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 var(--xf-pad); border-bottom: 1px solid var(--xf-hair); }
.xf-brand { display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: 32px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.xf-mark { color: var(--xf-accent); }
/* The bar holds every place of the rail, in its order; it scrolls sideways inside itself, never the page. */
.xf-nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.xf-nav::-webkit-scrollbar { display: none; }
.xf-nav a { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 99px; color: var(--xf-quiet); text-decoration: none; white-space: nowrap; }
.xf-nav a:focus-visible { outline-offset: -2px; }
@media (max-width: 45rem) {
  [data-places] > .xf-nav { margin-right: calc(-1 * var(--xf-pad)); padding-right: var(--xf-pad); mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 24px), transparent); }
}
@media (max-width: 30rem) {
  [data-places] > .xf-brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* A phone: the foot holds Leaderboard and Help; the bar keeps each only as the current place. */
  [data-places] { gap: 8px; }
  [data-places] > .xf-nav { gap: 0; }
  [data-places] .xf-nav a { padding: 0 6px; }
  .xf-nav a:is([href="/leaderboard"], [href="/help"]):not([aria-current]) { display: none; }
}
.xf-nav a[aria-current], .xf-nav a[data-waiting] { color: var(--xf-text); }
.xf-nav a[aria-current] { font-weight: 500; }
.xf-dot { flex: none; width: 8px; height: 8px; border-radius: 99px; background: var(--xf-accent); }

/* Columns: a form 45rem, a list 47.5, a slip 27.5, the phone 35 */
/* One left edge for every column at every width: each stands at the left of one frame. */
.xf-col { display: flex; flex: 1 0 auto; flex-direction: column; gap: var(--xf-gap); width: 100%; max-width: calc(var(--xf-w) + 2 * var(--xf-pad)); margin: 0 auto 0 max(0px, calc((100% - var(--xf-frame) - 2 * var(--xf-pad)) / 2)); padding: var(--xf-top) var(--xf-pad) 56px; overflow-wrap: anywhere; }
.xf-col[data-shape="phone"] { --xf-w: 35rem; --xf-gap: 32px; --xf-top: 40px; }
.xf-col[data-shape="slip"] { --xf-w: 27.5rem; --xf-top: 56px; }
.xf-col[data-shape="list"] { --xf-w: 47.5rem; --xf-gap: 40px; --xf-top: 40px; font-size: 1rem; line-height: 1.5rem; }
@media (min-width: 87.5rem) { :root { --xf-frame: 55rem; } .xf-col[data-shape="list"] { --xf-w: 55rem; } }
.xf-col[data-home] { --xf-w: 45rem; --xf-top: 72px; }

.xf-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-bottom: 4px; }
.xf-section-title, .xf-sheet-title { font-weight: 600; }
.xf-section-title > span { margin-left: 6px; color: var(--xf-quiet); font-size: .875rem; font-weight: 400; }
[data-shape="list"] .xf-section-head { align-items: center; margin-bottom: 12px; }
[data-shape="list"] .xf-section-title { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; }
[data-shape="list"] .xf-section-note { flex-basis: 100%; }
[data-shape="list"] .xf-section-title > .xf-num { display: inline-flex; align-items: center; height: 20px; margin: 0; padding: 0 7px; border-radius: 6px; background: var(--xf-hover); color: var(--xf-text); font-size: .75rem; font-weight: 500; }
[data-shape="list"] :is(.xf-section-note, .xf-row-meta, .xf-notes, .xf-hello-also, .xf-quiet, .xf-factline, .xf-caption) { font-size: .875rem; line-height: 1.25rem; }
.xf-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 16px var(--xf-pad) 20px; border-top: 1px solid var(--xf-hair); }
.xf-foot ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* 4. The head of a page */
.xf-folio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; }
@media (max-width: 21.5rem) {
  .xf-folio { display: grid; }
}
@media (max-width: 23rem) { .xf-fig, .xf-sum b { font-family: inherit; } }
.xf-kind { display: inline-flex; align-items: center; gap: 8px; }
.xf-over > .xf-avatar { margin-right: 8px; }
/* A badge adds no height to a first line. */
.xf-kind > .xf-badge { margin-block: -1px; }
.xf-avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; background: var(--xf-hover); color: var(--xf-text); font-weight: 500; line-height: 1; }
.xf-title { align-items: end; margin-top: 8px; }
.xf-head-lines { padding-top: 6px; }
/* A proposal's head keeps one height: the other page's lies unseen in it. */
.xf-head[data-keep] .xf-head-lines { min-height: 3.25rem; }
[data-pair] { display: grid; }
[data-pair] > *, [data-pair]::after { grid-area: 1 / 1; }
[data-pair]::after { content: attr(data-pair); }
[data-pair]::after, [data-pair] > [aria-hidden] { visibility: hidden; }
.xf-state { font-weight: 500; }
.xf-state[data-promoted] { font-weight: 600; }
.xf-state[data-boxed] { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.xf-b { display: inline-flex; align-items: center; min-height: 1.25rem; }
.xf-who { margin-top: 2px; }
/* While Always is on. A page with a deadline says its age louder. */
.xf-always { display: flex; gap: 8px; margin-top: 6px; font-weight: 500; }
.xf-always > svg { margin-top: 2px; }
.xf-age { color: var(--xf-text); font-weight: 500; }
.xf-hello { display: flex; align-items: flex-start; gap: 16px; margin-top: 8px; }
.xf-hello > svg { width: 48px; height: 48px; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--xf-line); color: var(--xf-accent); }
.xf-hello-also { display: block; margin-top: 4px; font-weight: 400; text-wrap: wrap; }
.xf-lead > .xf-hello-line, .xf-lead > .xf-scope > .xf-hello-line { margin-top: 8px; }

/* 5. The sheet */
.xf-sheet, .xf-preview { border-radius: 16px; background: var(--xf-raised); box-shadow: inset 0 0 0 1px var(--xf-line); }
.xf-sheet { padding: 18px 28px 20px; background: var(--xf-sheet); box-shadow: inset 0 0 0 1px var(--xf-line), var(--xf-lift); }
.xf-sheet > * + * { margin-top: 12px; }
.xf-sheet > * + .xf-facts { padding-top: 12px; border-top: 1px solid var(--xf-line); }
.xf-sheet + p { margin-top: -10px; }
.xf-orders { display: grid; grid-template-columns: minmax(0, 1fr) max-content 15.5rem; column-gap: 24px; }
.xf-order, .xf-sum { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding: 10px 0 2px; }
@supports not (grid-template-columns: subgrid) {
  .xf-order, .xf-sum { grid-template-columns: minmax(0, 1fr) 6rem 15.5rem; column-gap: 24px; }
}
.xf-order > :nth-child(2), .xf-sum > :nth-child(2) { grid-column: 2; text-align: right; }
.xf-order > :nth-child(3), .xf-sum > small { grid-column: 3; text-align: right; }
.xf-order-head { padding: 0 0 6px; border-bottom: 1px solid var(--xf-line); }
.xf-order-head > :nth-child(3) { justify-self: end; white-space: nowrap; }
.xf-terms, .xf-order-limit { font-weight: 500; }
/* A monospace figure adds no height to a row. */
.xf-order-limit { line-height: 1.25rem; }
.xf-order[data-own] > .xf-order-limit { min-height: 1.5rem; }
.xf-orders[data-decided] .xf-order > :nth-child(3), .xf-outcome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; text-align: left; }
.xf-order[data-own] > .xf-terms, .xf-order > .xf-order-remark { grid-column: 1 / -1; text-align: left; }
.xf-order-remark[data-tone="danger"] { color: var(--xf-ending); font-weight: 500; }
/* The total: the table's last row, its amount on the limit's edge. */
.xf-orders[data-sum] > .xf-order:nth-last-child(2) { padding-bottom: 6px; border-bottom: 1px solid var(--xf-line); }
.xf-sum { padding: 6px 0; line-height: 1.5rem; }
.xf-orders:last-child > .xf-sum { padding-bottom: 10px; }
.xf-sum > :nth-child(2) { font-size: 1rem; }
.xf-sum b { font-size: 1.25rem; }
.xf-about { font-size: .875rem; line-height: 1; font-weight: 400; }
.xf-sheet > .xf-orders[data-sum] + .xf-facts { margin-top: 0; padding-top: 9px; }

.xf-facts { display: grid; row-gap: 6px; }
.xf-fact { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.xf-fact > dd, .xf-quiet > .xf-num { color: var(--xf-text); font-weight: 500; }
.xf-fact > dd[data-strong] { font-weight: 600; }
.xf-fact small { font-weight: 400; }
.xf-facts[data-ends] > .xf-fact { grid-template-columns: max-content minmax(0, 1fr); }
.xf-facts[data-ends] dd { text-align: right; }

.xf-badge, .ov .status, .ov-tag { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 7px; border-radius: 6px; background: var(--xf-hover); font-size: .75rem; line-height: 1rem; font-weight: 500; }
.xf-badge[data-tone="ok"], .ov .status.connected { background: rgb(var(--xf-accent-rgb) / 14%); color: var(--xf-ok-text); }
.xf-badge[data-tone="warn"], .ov .status.warning { background: rgb(251 106 34 / 16%); color: var(--xf-warn-text); }
.xf-badge[data-tone="danger"] { background: rgb(250 66 62 / 16%); color: var(--xf-danger-text); }
.xf-badge[data-tone="outline"] { background: none; box-shadow: inset 0 0 0 1px var(--xf-edge); }
.xf-b.xf-num, .xf-factline > [data-slot="deadline"] > dd.xf-num { display: inline; font-weight: 400; }

.xf-sheet-list { display: grid; row-gap: 6px; margin-top: 6px; }

.xf-figure { display: grid; row-gap: 2px; }
.xf-figure > svg, .xf-figure > .xf-outcome { margin-top: 10px; }
.xf-price { display: block; width: 100%; height: 4.5em; overflow: visible; }
.xf-price text { fill: var(--xf-quiet); }
.xf-price rect, .xf-price [data-is="limit"] { fill: var(--xf-text); font-weight: 600; }
.xf-price line { stroke: var(--xf-rule); }
.xf-price [data-is="zone"] { fill: rgb(var(--xf-accent-rgb) / 12%); }
.xf-price [data-is="quote"] { fill: var(--xf-accent); font-weight: 500; }
.xf-price text[data-is="quote"] { fill: var(--xf-ok-text); }

/* 6. The decision */
.xf-decide { display: grid; row-gap: 12px; }
.xf-choose { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 17.5rem)); gap: 16px 24px; align-items: start; }
.xf-choose[data-stack] { grid-template-columns: minmax(0, 1fr); }
/* The last look: the way back in Approve's track, the button that sends under both. */
.xf-choose[data-look] > :last-child { grid-column: 1 / -1; justify-self: start; width: min(100%, 22rem); margin-top: 40px; }
.xf-act, .xf-arm { display: grid; row-gap: 4px; }
.xf-caption { text-wrap: balance; }
.xf-notes { display: grid; row-gap: 6px; }
.xf-notes > [data-strong] { color: var(--xf-text); }
/* No press in an answer's first second; the button that sends rests 1.5 s. One step, also with less motion. */
.xf-arm { position: relative; }
.xf-choose[data-hold]::after, .xf-arm::after { content: ""; position: absolute; inset: -16px; visibility: hidden; animation: xf-hold 1s step-end; }
.xf-arm::after { animation-duration: 1.5s; }
.xf-arm > .xf-button { animation: xf-rest 1.5s step-end; }
@keyframes xf-hold { from { visibility: visible; } }
@keyframes xf-rest { from { background: var(--xf-hover); color: var(--xf-quiet); } }

.xf-stamp { display: grid; row-gap: 20px; }
.xf-after { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
:is(p, ul) + .xf-after { margin-top: 6px; }
.xf-steps > li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 0 12px 22px; }
.xf-steps > li:last-child { padding-bottom: 0; }
.xf-steps > li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 99px; background: var(--xf-quiet); }
.xf-steps > li[data-now] { font-weight: 500; }
.xf-steps > li[data-now]::before { background: var(--xf-text); }
.xf-steps > li[data-todo]::before { background: none; box-shadow: inset 0 0 0 1px var(--xf-edge); }
.xf-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 17px; bottom: -2px; width: 1px; background: var(--xf-line); }
.xf-step-time { flex: none; font-weight: 400; }

.xf-fold > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; border-radius: 4px; font-weight: 500; cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; }
.xf-fold > summary::-webkit-details-marker { display: none; }
.xf-fold[open] > summary > svg { transform: rotate(90deg); }
.xf-fold[open] > summary > [data-when="closed"], .xf-fold:not([open]) > summary > [data-when="open"] { display: none; }
.xf-fold-body { display: grid; row-gap: 12px; padding-top: 10px; }

/* 7. The agent's words. The whole case opens under the decision, so no fold moves a button. */
.xf-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.xf-case > .xf-fold { margin-top: 8px; }
.xf-quote { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; padding-left: 16px; border-left: 2px solid var(--xf-rule); }
.xf-agent-quote { margin-top: 2px; quotes: none; white-space: pre-wrap; text-wrap: pretty; }
.xf-sources { display: flex; flex-direction: column; gap: 10px; }
.xf-sources > li { display: flex; flex-direction: column; align-items: flex-start; }
.xf-source { padding: 2px 0; border-radius: 4px; }
.xf-address { user-select: all; -webkit-user-select: all; }

/* 8. Lists: previews and rows */
.xf-previews { display: grid; gap: 12px; }
.xf-preview { position: relative; display: grid; row-gap: 12px; padding: 20px 24px; }
.xf-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.xf-preview-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; text-wrap: balance; }
.xf-preview-title > a { text-decoration: none; }
.xf-preview-title > a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.xf-preview-title > a:focus-visible { outline: none; }
.xf-preview-title > a:focus-visible::after { outline: 2px solid var(--xf-text); outline-offset: 2px; }
.xf-preview-open { display: inline-flex; flex: none; align-items: center; gap: 4px; font-size: .875rem; font-weight: 500; }
ul.xf-legs { display: grid; row-gap: 2px; }
ul.xf-legs > li { display: grid; grid-template-columns: 9.5rem max-content minmax(5.25rem, max-content); column-gap: 8px; align-items: baseline; }
ul.xf-legs > li > :first-child { font-weight: 500; }
ul.xf-legs .xf-fig { text-align: right; }
.xf-factline { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 2px 20px; align-items: baseline; }
.xf-factline > div { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.xf-factline > [data-slot="cost"], .xf-factline > [data-slot="deadline"] { grid-column: 1 / -1; }
.xf-factline > div:not([data-quiet]) > dd { font-weight: 500; }
@media (min-width: 70rem) {
  [data-shape="list"] .xf-factline { grid-template-columns: minmax(13rem, max-content) minmax(7rem, max-content) minmax(0, 1fr) max-content; }
  [data-shape="list"] .xf-factline > div { grid-column: auto; }
  [data-shape="list"] .xf-factline > [data-slot="cost"] { order: 1; margin-right: 4px; }
}

.xf-list { padding-top: 4px; border-top: 1px solid var(--xf-line); }
.xf-row { display: flex; align-items: center; gap: 12px; margin: 0 -12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
a.xf-row:focus-visible { outline-offset: -2px; }
.xf-row-when { flex: none; min-width: 5rem; font-size: .875rem; text-align: right; white-space: nowrap; }
.xf-row-main { flex: 1; min-width: 0; }
.xf-row-title, .xf-row-meta, .xf-row-figure > * { display: block; }
.xf-row-title, .xf-row-figure > :first-child, .xf-entry-name { font-weight: 500; }
.xf-row-figure { flex: none; text-align: right; }
.xf-row-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 0; color: var(--xf-quiet); }
.xf-day { padding: 14px 0 2px; font-weight: 500; }
.xf-empty-line, .help-empty { padding: 12px 0; }

.xf-ledger { border-top: 1px solid var(--xf-hair); }
.xf-entry { display: grid; grid-template-columns: 9.25rem minmax(0, 1fr); align-items: start; gap: 6px 24px; padding: 14px 0; }
.xf-entry + .xf-entry { border-top: 1px solid var(--xf-hair); }
.xf-entry-body { display: grid; row-gap: 4px; }
.xf-entry-acts { display: flex; flex-wrap: wrap; grid-column: 2; align-items: center; gap: 8px 12px; }

.xf-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.xf-table th { padding-bottom: 6px; border-bottom: 1px solid var(--xf-line); text-align: left; white-space: nowrap; }
.xf-table td { padding: 10px 0; }
.xf-table :is(th, td) + :is(th, td) { padding-left: 16px; }
.xf-table [data-n] { text-align: right; }

/* 9. A notice */
.xf-notices { display: flex; flex-direction: column; gap: 8px; }
.xf-notice, .ov-waiting { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--xf-line); }
.xf-notice > svg { align-self: flex-start; margin-top: 2px; color: var(--xf-quiet); }
.xf-notice > p { flex: 1; min-width: 0; }
.xf-notice-action { display: flex; flex: none; align-items: baseline; margin-block: -6px; }
.xf-notice[data-tone="danger"] { box-shadow: inset 0 0 0 1px var(--xf-danger); }
.xf-notice[data-tone="danger"] > svg { color: var(--xf-ending); }
.xf-notice[data-tone="warn"] { box-shadow: inset 0 0 0 1px var(--xf-warn); }
.xf-notice[data-tone="warn"] > svg, .xf-always > svg { color: var(--xf-warn); }
/* The sign-in page in an agent's browser: the wanted page's address stands on a line of its own and breaks where it must. */
.xf-notice .xf-address { display: block; margin-top: 4px; overflow-wrap: anywhere; }

/* 10. Buttons and links: 40 high, 44 under a finger, 48 for an answer */
.xf-button, .ov .button { display: inline-flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .27em; min-height: 40px; padding: 0 19px; border: 0; border-radius: 99px; background: var(--xf-button); color: var(--xf-button-text); font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.xf-button[data-kind="outline"], .ov .button.secondary { background: none; box-shadow: inset 0 0 0 1px var(--xf-edge); color: var(--xf-text); }
.xf-button[data-size="sm"] { min-height: 28px; padding: 0 13px; }
.xf-button[data-size="lg"] { width: 100%; min-height: 3rem; padding: 8px 19px; }
.xf-button[aria-disabled="true"] { background: var(--xf-hover); box-shadow: none; color: var(--xf-quiet); cursor: default; }
.xf-button:not([aria-disabled]):active { transform: scale(.98); }
.xf-button[data-lift] { box-shadow: 0 1px 2px rgb(0 0 0 / 24%), 0 10px 20px -10px rgb(0 0 0 / 40%); }
@media (hover: hover) and (pointer: fine) {
  .xf-button:not([data-kind], [aria-disabled]):hover { background: var(--xf-button-hover); transition: background-color .15s; }
  .xf-button[data-kind]:hover, a.xf-row:hover, .xf-pills :is(a, button):hover, a.xf-stat:hover, .xf-places a:not([aria-current]):hover { background-color: var(--xf-hair); transition: background-color .15s; }
  .xf-preview:hover { box-shadow: inset 0 0 0 1px var(--xf-rule); }
  .xf-nav a:hover { color: var(--xf-text); transition: color .15s; }
}
.xf-link { display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.xf-text-link, .xf-source, .xf-foot a { text-decoration: underline; text-decoration-color: var(--xf-edge); text-underline-offset: 2px; }

/* 11. Forms */
.xf-form { display: grid; row-gap: 16px; }
.xf-field { display: grid; gap: 6px; }
.xf-field > label { font-weight: 500; }
.xf-field-hint { margin-top: -4px; }
.xf-input { display: block; width: 100%; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--xf-page); box-shadow: inset 0 0 0 1px var(--xf-edge); appearance: none; -webkit-appearance: none; }
textarea.xf-input { min-height: 72px; resize: vertical; }
.xf-input[type="file"] { appearance: auto; -webkit-appearance: auto; }
.xf-input[type="number"] { width: auto; max-width: 100%; }
.xf-select { position: relative; display: inline-grid; max-width: 100%; }
.xf-select > select { padding-right: 40px; }
.xf-select > svg { position: absolute; right: 14px; top: 50%; margin-top: -8px; pointer-events: none; }
.xf-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--xf-danger); }
.xf-field-error { display: flex; align-items: flex-start; gap: 6px; color: var(--xf-ending); font-weight: 500; }
.xf-field-error > svg { margin-top: 2px; }
.xf-choice { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; cursor: pointer; }
.xf-choice > input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--xf-button); }
.xf-choice b { font-weight: 500; }
.xf-choice .xf-input[type="number"] { display: inline-block; width: 6.5em; min-height: 32px; margin: 0 2px; padding: 4px 8px; vertical-align: baseline; }
.xf-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* 12. Reading pages, choices, what scopes a list */
.xf-display { font-size: 2.25rem; line-height: 2.625rem; font-weight: 600; }
.xf-display > span { display: block; text-wrap: balance; }
.xf-prose, .xf-plain { max-width: 40rem; }
.xf-prose > * + * { margin-top: 12px; }
.xf-prose ol, .xf-fold-body ol { padding-left: 22px; list-style: decimal; }
.xf-prose ul, .xf-fold-body ul { padding-left: 22px; list-style: disc; }
.xf-prose li + li { margin-top: 8px; }
.xf-plain { display: grid; row-gap: 4px; }
.xf-pills { display: inline-flex; align-self: flex-start; justify-self: start; max-width: 100%; border-radius: 99px; background: var(--xf-hover); }
.xf-pills :is(a, button) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 4px solid transparent; border-radius: 99px; background-color: transparent; background-clip: padding-box; color: var(--xf-quiet); text-decoration: none; white-space: nowrap; cursor: pointer; }
.xf-pills :is([aria-current], [aria-pressed="true"], [aria-selected="true"]) { background-color: var(--xf-page); box-shadow: inset 0 0 0 2px var(--xf-text); color: var(--xf-text); font-weight: 500; }
.xf-scope { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.xf-span { display: flex; gap: 4px 16px; margin-left: auto; color: var(--xf-quiet); }
.xf-span a { border-radius: 4px; text-decoration: none; }
.xf-span a[aria-current] { color: var(--xf-text); font-weight: 600; }
/* An empty list: the small window beside the sentence. */
.xf-pic-sm { position: relative; flex: none; width: min(160px, 40%); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; }
.xf-commands { display: grid; row-gap: 8px; }
.xf-command { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 12px 12px 16px; border-radius: 8px; background: var(--xf-hair); }
.xf-command-os { grid-column: 1 / -1; }
.xf-command pre { white-space: pre-wrap; overflow-wrap: break-word; }
.xf-command code { font: inherit; user-select: all; -webkit-user-select: all; }
.xf-qr, .xf-empty { display: flex; align-items: center; gap: 24px; }
.qr-code { flex: none; width: 192px; height: 192px; padding: 12px; border-radius: 8px; background: #fff; }

/* 13. Where the system forces its colours, shadow edges become outlines. */
.xf-sheet, .xf-preview, .xf-command, .xf-notice, .xf-badge, .xf-button, .xf-input, .xf-pills :is(a, button), .xf-stat { outline: 1px solid transparent; outline-offset: -1px; }

/* 14. The account's rows, the counts, the jump rows */
.xf-trows { border-top: 1px solid var(--xf-line); }
.xf-trow { display: grid; row-gap: 4px; padding: 16px 0; scroll-margin-top: 16px; }
.xf-trow + .xf-trow { border-top: 1px solid var(--xf-line); }
.xf-tile { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--xf-hover); font-size: .875rem; line-height: 1; font-weight: 600; }
.xf-tile > .xf-icon { width: 20px; height: 20px; }
.xf-trow-head { display: flex; align-items: center; gap: 12px; min-height: 32px; font-size: 1rem; }
.xf-trow-name { margin-right: auto; font-weight: 600; }
.xf-trow-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block: 8px 4px; }
.xf-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.xf-counts[data-four] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xf-counts > :not(.xf-stat), .xf-stat[data-head] { grid-column: 1 / -1; }
[data-four] > .xf-stat { flex-direction: column; align-items: flex-start; gap: 2px; padding-block: 10px; }
.xf-stat { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--xf-line); color: var(--xf-quiet); text-decoration: none; }
.xf-stat > b { color: var(--xf-text); font-size: 1rem; }
.xf-stat[data-head] { color: var(--xf-text); font-weight: 600; }
@media (max-width: 69.99rem) {
  .xf-stat:not([data-head]) { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px; font-size: .75rem; line-height: 1rem; }
}
@media (min-width: 70rem) {
  .xf-counts { column-gap: 12px; }
  .xf-counts:not([data-calm]) { grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
  .xf-stat { grid-row: 1; }
  .xf-stat[data-head] { grid-column: auto; }
}
.xf-jumps a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--xf-line); text-decoration: none; }
.xf-jumps a > span { margin-left: auto; color: var(--xf-quiet); font-size: .875rem; }
.xf-jumps a > [data-look] { color: var(--xf-warn-text); }
.xf-yours .xf-jumps { margin-top: 8px; border-top: 1px solid var(--xf-line); }

/* 15. The door's block and its picture */
.xf-top-acts { margin-top: 16px; }
.xf-top > .xf-caption { margin-top: 8px; }
.xf-pic { display: block; overflow: hidden; }
@media (max-width: 56.24rem) { .xf-rail { display: none; } }
@media (max-width: 69.99rem) {
  .xf-pic { position: relative; height: 160px; margin-top: 16px; border-radius: 12px; }
}
.xf-pic > img, .xf-pic-sm > img { position: absolute; inset: 0; width: 100%; height: 100%; background: rgb(var(--xf-accent-rgb) / 12%); object-fit: cover; object-position: 80% 60%; }

/* 16. Under a finger */
.xf-root { touch-action: manipulation; }
@media (pointer: coarse) {
  .xf-button, .xf-button[data-size="sm"], .xf-nav a, .xf-brand, .xf-pills :is(a, button), .xf-span a, .xf-link, .xf-fold > summary, .xf-choice, .xf-foot a, .xf-table a { min-height: 44px; }
  .xf-foot a, .xf-span a, .xf-table a { display: inline-flex; align-items: center; }
  .xf-foot { align-items: center; padding-block: 4px; }
  .xf-row { padding-block: 12px; }
  .xf-input { min-height: 48px; }
  .xf-source { padding-block: 12px; }
  .xf-choice { align-items: center; }
  .xf-choice > input { margin: 0; }
  .xf-choose { column-gap: 40px; }
}
@supports not (-webkit-touch-callout: none) { .xf-button { -webkit-tap-highlight-color: transparent; } }

/* 17. A narrow screen */
@media (max-width: 40rem) {
  .xf-pills { flex-wrap: wrap; border-radius: 22px; }
  :root { --xf-pad: 16px; --xf-top: 12px; --xf-gap: 14px; }
  .xf-col[data-shape] { --xf-top: 12px; }
  .xf-col[data-shape="list"], .xf-col[data-shape="phone"] { --xf-gap: 28px; --xf-top: 20px; }
  .xf-bar { min-height: 48px; }
  .xf-nav a { padding: 0 8px; }
  .xf-wide { display: none; }
  .xf-narrow { display: revert; }
  .xf-title { margin-top: 6px; }
  .xf-display { font-size: 1.5rem; line-height: 1.875rem; }
  .xf-head[data-keep] .xf-head-lines { min-height: 4.25rem; }
  .xf-state[data-promoted] { line-height: 1.25rem; }
  .xf-hello > svg { width: 40px; height: 40px; padding: 8px; }
  .xf-sheet { padding: 12px 12px 14px; border-radius: 12px; }
  .xf-sheet > * + .xf-facts { margin-top: 10px; padding-top: 10px; }
  .xf-sheet + p { margin-top: -6px; }
  .xf-orders { grid-template-columns: minmax(0, 1fr) max-content 5.75rem; column-gap: 12px; }
  .xf-orders[data-utc] { grid-template-columns: minmax(0, 1fr) max-content 7.25rem; }
  .xf-order { padding: 8px 0 2px; }
  .xf-order-head { padding: 0 0 4px; }
  .xf-orders[data-sum] > .xf-order:nth-last-child(2) { padding-bottom: 5px; }
  .xf-sum { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; line-height: 1.25rem; }
  .xf-sum > small { flex-basis: 100%; }
  .xf-orders:last-child > .xf-sum { padding-bottom: 12px; }
  .xf-sum > :first-child { color: var(--xf-quiet); }
  .xf-sum b { font-size: 1rem; }
  .xf-sheet > .xf-orders[data-sum] + .xf-facts { padding-top: 7px; }
  .xf-orders[data-decided] .xf-order > div:nth-child(3) { grid-column: 1 / -1; padding-top: 2px; }
  .xf-sheet .xf-facts { row-gap: 4px; }
  .xf-sheet .xf-fact { grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; }
  .xf-sheet .xf-fact > dd { text-align: right; }
  .xf-order-remark .xf-fact { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .xf-order-remark .xf-fact > dd { text-align: left; }
  .xf-section-head { margin-bottom: 2px; }
  .xf-quote { gap: 4px; }
  .xf-clamp { -webkit-line-clamp: 2; line-clamp: 2; }
  .xf-choose { column-gap: 40px; }
  .xf-choose[data-look] > :last-child { justify-self: stretch; width: auto; }
  .xf-preview { padding: 16px; }
  ul.xf-legs > li { grid-template-columns: minmax(0, 1fr) max-content minmax(5.25rem, max-content); }
  .xf-notice { flex-wrap: wrap; }
  .xf-notice-action { flex-basis: 100%; margin-block: -6px -10px; padding-left: 26px; }
  .xf-entry { grid-template-columns: minmax(0, 1fr); }
  .xf-entry-acts { grid-column: 1; }
  .xf-row { flex-wrap: wrap; row-gap: 0; }
  .xf-row > .xf-chevron { order: 2; }
  .xf-row > .xf-row-marks, .xf-row-figure { order: 3; flex-basis: 100%; padding-left: calc(5rem + 12px); }
  .xf-row-figure { display: flex; align-items: baseline; gap: 6px; text-align: left; }
  [data-flat] .xf-row-figure { padding-left: 0; }
  .xf-command { padding: 10px 10px 10px 12px; }
  .xf-qr { flex-direction: column; align-items: flex-start; gap: 16px; }
  .xf-top + .xf-notices { margin-top: -16px; }
}
@media (min-width: 23.01rem) and (max-width: 40rem) { .xf-order > :nth-child(3) > .xf-num { display: inline-grid; line-height: 1.25rem; } }
@media (min-width: 40.01rem) {
  /* Capitals by the stylesheet only, never typed. */
  .xf-order-head, .xf-sum > :first-child, .xf-over { font: 500 .75rem/1.125rem var(--xf-mono); letter-spacing: .04em; text-transform: uppercase; }
  :is([data-shape="list"], .xf-lead) .xf-hello-line { font-size: 2rem; line-height: 2.375rem; }
  :is([data-shape="list"], .xf-lead) .xf-hello-also { font-size: 1rem; line-height: 1.5rem; }
  .xf-top + .xf-notices { margin-top: -24px; }
  .xf-notices + .xf-counts { margin-top: -16px; }
  .xf-lead { margin-bottom: -16px; }
  .xf-scope { flex-wrap: nowrap; }
  .xf-scope > nav { margin-left: auto; }
  .xf-top-acts > .xf-button { max-width: 22rem; }
}

/* 18. A desk: the rail, and the door's block as a panel */
.xf-rail-brand { display: flex; gap: 12px; min-height: 40px; margin-bottom: 24px; padding: 0 4px; }
.xf-rail-brand > .xf-tile { background: none; box-shadow: inset 0 0 0 1px var(--xf-line); }
.xf-places { display: grid; row-gap: 2px; }
.xf-places a { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: 8px; color: var(--xf-quiet); font-size: .875rem; font-weight: 500; text-decoration: none; }
.xf-places .xf-icon { stroke-width: 1.25; }
.xf-places > li > a[aria-current] { background: var(--xf-hover); color: var(--xf-text); font-weight: 600; }
.xf-places > li > a[aria-current]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--xf-text); }
.xf-count { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.xf-rail-foot { margin-top: auto; padding-top: 24px; color: var(--xf-quiet); font-size: .75rem; line-height: 1rem; }
.xf-rail-foot > p { padding: 10px 8px 0; overflow-wrap: anywhere; }
.xf-rail-foot .xf-link { margin-left: 8px; color: var(--xf-text); font-size: .875rem; }
@media (pointer: coarse) { .xf-rail-brand, .xf-places a { min-height: 44px; } }
/* The rail stays down to 900 px wide: the column gives way first. */
@media (min-width: 56.25rem) {
  .xf-root[data-rail] { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-content: start; background: linear-gradient(var(--xf-line), var(--xf-line)) 247px 0 / 1px 100% no-repeat var(--xf-page); }
  [data-rail] > :is(.xf-bar, .xf-foot), [data-rail] .xf-hello > svg, .xf-yours { display: none; }
  .xf-rail { display: flex; flex-direction: column; grid-row: 1 / span 2; align-self: start; min-height: 100vh; padding: 24px 16px 20px; }
  [data-rail=""] > .xf-rail { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
  /* One top for every column beside the rail. */
  [data-rail] > .xf-col[data-shape] { --xf-top: 40px; }
  [data-rail] > .xf-col { min-height: 100vh; }
}
@media (min-width: 70rem) {
  .xf-top { position: relative; padding: 24px; border-radius: 16px; background: var(--xf-raised); box-shadow: inset 0 0 0 1px var(--xf-line); }
  .xf-top[data-pic] { padding-right: calc(32% + 24px); }
  .xf-top-acts > .xf-button { width: auto; }
  .xf-pic { position: absolute; inset: 0 0 0 68%; border-radius: 0 16px 16px 0; }
  .xf-pic > img { object-position: 100% 50%; mask-image: linear-gradient(to right, transparent, #000 96px); }
  .xf-trow { position: relative; grid-template-columns: minmax(0, 1fr) fit-content(24rem); column-gap: 24px; padding-left: 48px; }
  .xf-trow > * { grid-column: 1 / -1; }
  .xf-trow > .xf-trow-line { grid-column: 1; align-self: center; }
  .xf-trow > .xf-trow-acts { grid-area: 2 / 2; align-self: center; justify-content: flex-end; margin: 0; }
  .xf-trow-head > .xf-tile { position: absolute; left: 0; top: 16px; }
}
@media (min-width: 87.5rem) {
  .xf-top[data-pic] { padding-right: calc(36% + 24px); }
  .xf-pic { left: 64%; }
}

/* 19. Home's parts appear in order, once. Off with less motion. */
@media (prefers-reduced-motion: no-preference) {
  .xf-enter > * { animation: xf-in .3s cubic-bezier(.16, 1, .3, 1) backwards; }
  .xf-enter > :nth-child(2) { animation-delay: 40ms; }
  .xf-enter > :nth-child(3) { animation-delay: 80ms; }
  .xf-enter > :nth-child(4) { animation-delay: .12s; }
  .xf-enter > :nth-child(n + 5) { animation-delay: .16s; }
}
@keyframes xf-in { from { opacity: 0; transform: translateY(8px); } }

/* 20. The real pages: parts the server has that the design draws otherwise. */
/* The approval method: Auto's threshold is a native range under the choices. */
.xf-range { display: grid; row-gap: 4px; max-width: 22rem; }
.xf-range > input { width: 100%; margin: 0; accent-color: var(--xf-button); }
.xf-range-scale { display: flex; justify-content: space-between; color: var(--xf-quiet); font-size: .75rem; line-height: 1rem; font-variant-numeric: tabular-nums; }
/* The sentence for the agent, with the server's copy button (the one script of the account page). */
.xf-copy { display: flex; align-items: center; gap: 8px; max-width: 30rem; padding: 4px 4px 4px 12px; border-radius: 8px; background: var(--xf-hair); }
.xf-copy > code { flex: 1; min-width: 0; font: 500 .8125rem/1.25rem var(--xf-mono); user-select: all; -webkit-user-select: all; }
.xf-copy > button { display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 7px; border: 0; border-radius: 99px; background: none; box-shadow: inset 0 0 0 1px var(--xf-edge); cursor: pointer; }
.xf-copy > button > svg { width: 100%; height: 100%; }
@media (pointer: coarse) { .xf-copy > button { width: 44px; height: 44px; padding: 13px; } }
/* The decision model's rating (owner only). */
.xf-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.xf-rating > meter { flex: 0 1 10rem; height: 8px; }
/* What only the owner may change, shown off in a browser the agent opened. */
.owner-only { display: grid; row-gap: 0; }
.owner-only > legend { padding: 12px 0 0; color: var(--xf-quiet); font-size: .875rem; }
.owner-only[disabled] .xf-button { background: var(--xf-hover); box-shadow: none; color: var(--xf-quiet); cursor: default; }
/* First steps, while no broker or no agent is connected. */
.xf-first > li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.xf-first > li + li { border-top: 1px solid var(--xf-line); }
.xf-first > li > .xf-avatar { flex: none; align-self: flex-start; margin-top: 2px; }
.xf-first > li > div { flex: 1; min-width: 0; }
.xf-first > li:is([data-done], .done) > div, .xf-prose li.done { color: var(--xf-quiet); }
.xf-top .xf-form { max-width: 22rem; }
/* What a last look keeps the place of without showing it. */
[data-unseen] { visibility: hidden; }
/* 21. What a page's script sets. */
.xf-first > li.current > .xf-avatar { background: var(--xf-text); color: var(--xf-page); }
.xf-phone { display: grid; row-gap: 12px; }
[data-qr].used { opacity: .25; }
.xf-fold-body { max-width: 40rem; }
.xf-fold-body code, .xf-prose code { font: 500 .8125rem/1.25rem var(--xf-mono); }
.help-topic-label { display: none; color: var(--xf-quiet); font-weight: 400; }
[data-help-results] .help-topic-label { display: inline; }
.help-empty { color: var(--xf-quiet); }
:empty[data-help-count] { display: none; }
.key-drop.drag-over > .xf-input { box-shadow: inset 0 0 0 2px var(--xf-text); }

/* 22. Motion after design v3 (its press, springs and times), in one block. None of it with less motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: .2s; }
  ::view-transition { pointer-events: none; }
  .xf-root :active { --xf-now: 0s; }
  .xf-root.xf-root :is(.xf-button, .xf-link, .xf-pills *, .xf-copy > button, a.xf-row, a.xf-stat, .xf-preview, .xf-places a, .xf-nav a, summary, .xf-input) { transition: transform var(--xf-now, .23s) cubic-bezier(.35, .676, .046, 1.073), background-color var(--xf-now, .15s), opacity var(--xf-now, .15s), color .15s, box-shadow .15s, outline-offset .15s; }
  .xf-button:not([aria-disabled]):active { transform: scale(.97); }
  .xf-button:not([data-kind], [aria-disabled]):active { background-color: color-mix(in srgb, var(--xf-button) 80%, var(--xf-page)); }
  .xf-root :is(.xf-button[data-kind], .xf-pills *, .xf-copy > button, a.xf-row, a.xf-stat, .xf-places a):active { background-color: var(--xf-hover); }
  .xf-root :is(a.xf-row, a.xf-stat, .xf-preview):active { transform: scale(.99); }
  .xf-copy > button:active { transform: scale(.9); }
  .xf-root :is(.xf-link, .xf-nav a, summary, a:not([class], .xf-places a)):active { opacity: .6; }
  summary > svg { transition: transform .36s cubic-bezier(.245, .393, .05, 1.15); }
  @supports (interpolate-size: allow-keywords) {
    .xf-fold { interpolate-size: allow-keywords; }
    .xf-fold::details-content { height: 0; overflow: clip; overflow-clip-margin: 6px; transition: height .44s cubic-bezier(.305, .487, .04, 1), content-visibility .44s allow-discrete; }
    .xf-fold[open]::details-content { height: auto; }
  }
  /* Where a decision is made nothing fades. */
  .xf-col:not([data-decision]) > *, .xf-notice[data-done], [role="alert"], .xf-field-error, [data-copy-status]:not(:empty) { animation: xf-in .3s cubic-bezier(.16, 1, .3, 1) backwards; }
  .xf-col > :nth-child(2) { animation-delay: 40ms; }
  .xf-col > :nth-child(n + 3) { animation-delay: 80ms; }
  .xf-choose[data-look] > :last-child, .xf-col > .xf-stamp { animation: xf-look .44s cubic-bezier(.305, .487, .04, 1) backwards; }
  @keyframes xf-look { from { transform: translateY(12px); } }
}