/* Xfficient website: the decision pages on a phone (decide_ui.rs).
   Linked after site.css by the proposal's page, the list and the phone home only.
   It loads no file and imports none. Every colour is a custom property of site.css; the backdrop is the one value of its own. */

/* 1. The switch. From 40.01rem the phone build is not drawn and the page is the desk's page.
   At phone widths NO general display rule for .xf-d: it would beat each block's own grid or flex,
   and it would show the closed popover. */
@media (min-width: 40.01rem) {
  .xf-d { display: none; }
  .xf-root { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
}

/* A list row's cost: the same at every width. */
.xf-d-rowcost { display: grid; flex: none; justify-items: end; max-width: 8.5rem; text-align: right; }
.xf-d-rowcost .xf-fig { font-size: 1.25rem; line-height: 1.5rem; }
.xf-d-rowcost .xf-d-k { font-size: .75rem; line-height: 1.125rem; }
/* On a desk the badge takes the last of the site's four columns, so the facts of every row stand under each other. */
@media (min-width: 70rem) { [data-shape="list"] .xf-factline > [data-slot="money"] { order: 1; } }
.xf-d-k { color: var(--xf-quiet); font-weight: 400; }

@media (max-width: 40rem) {
  /* His blocks that the phone build replaces (the contract, part 3). */
  .xf-d-top ~ .xf-head, .xf-d-top ~ .xf-sheet,
  .xf-d-top[data-screen="proposal"] ~ .xf-case,
  .xf-d-top[data-screen="proposal"] ~ .xf-decide > .xf-choose,
  .xf-d-top[data-screen="proposal"] ~ .xf-decide > .xf-fold,
  .xf-d-top[data-screen="proposal"] ~ [data-part="evidence"],
  .xf-d-top[data-screen="proposal"] ~ [data-part="graphs"],
  .xf-d-top[data-screen="look"] ~ .xf-case,
  .xf-d-top[data-screen="look"] ~ .xf-decide > .xf-choose > .xf-act:first-child,
  .xf-d-top[data-screen="after"] ~ .xf-stamp > :not([data-part="auto"]) { display: none; }
  .xf-d-top[data-screen="look"] ~ .xf-decide > .xf-choose > form { margin-top: 0; width: 100%; }
  .xf-d-top[data-screen="look"] ~ .xf-decide > [data-part="auto"] { order: 1; } /* His auto-approval panel is drawn after the form that places, his notes and his warning: moved, not hidden. */

  /* 2. The way back. */
  .xf-d-top { margin: -8px 0 -14px -6px; }
  .xf-d-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding-right: 12px; font-weight: 500; text-decoration: none; }
  .xf-d-back > .xf-icon { transform: scaleX(-1); }

  /* 3. The head: kind, title, state, who. */
  .xf-d-head { display: grid; row-gap: 2px; }
  .xf-d-kind { display: flex; justify-content: space-between; gap: 12px; color: var(--xf-quiet); font-size: .75rem; line-height: 1.125rem; }
  .xf-d-title { font-size: 1.5rem; line-height: 1.875rem; font-weight: 600; text-wrap: balance; }
  .xf-d-second { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
  .xf-d-state { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 500; }
  .xf-d-state:not([data-mark="wait"]) { font-weight: 600; }
  .xf-d-who { color: var(--xf-quiet); }

  /* 4. The amount: the largest text of the page. Its tag, the money badge, where it goes. */
  .xf-d-amt { display: grid; row-gap: 2px; margin-top: -4px; }
  .xf-d-amt-tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
  .xf-d-tag { color: var(--xf-quiet); font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .xf-d-fig { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-left: -2px; line-height: 1.07; letter-spacing: -.045em; }
  .xf-d-fig[data-len="s"] { font-size: min(3.5rem, 14.5vw); }
  .xf-d-fig[data-len="m"] { font-size: min(2.5rem, 10.4vw); }
  .xf-d-fig[data-len="l"] { font-size: 2rem; }
  .xf-d-fig > .xf-fig { line-height: inherit; }
  .xf-d-about { color: var(--xf-quiet); font-size: .875rem; line-height: 1.25rem; letter-spacing: 0; }
  .xf-d-fee { color: var(--xf-quiet); font-size: .75rem; line-height: 1.125rem; }
  .xf-d-to { margin-top: 4px; font-weight: 500; }
  /* Paper: one dashed line round the tag, the badge, the figure and the sentence. A crop of the figure keeps it. */
  .xf-d-amt[data-paper] { margin: 5px 9px 9px; outline: 1.5px dashed var(--xf-edge); outline-offset: 9px; border-radius: 6px; }

  /* 5. The orders, one line each. */
  .xf-d-terms { display: grid; row-gap: 4px; margin-top: -10px; font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
  .xf-d-terms > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .xf-d-remark, .xf-d-out { flex-basis: 100%; color: var(--xf-quiet); font-size: .75rem; line-height: 1.125rem; font-weight: 400; }
  .xf-d-out { color: var(--xf-text); font-size: .875rem; line-height: 1.25rem; }

  /* 6. The deadline in one line. */
  .xf-d-deadline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 11px 0 12px; border-block: 1px solid var(--xf-line); }
  .xf-d-deadline[data-ending] > :last-child { color: var(--xf-ending); }

  /* 7. Why the agent proposes this: the claim in full, then the rows. */
  .xf-d-why { display: grid; row-gap: 10px; }
  .xf-d-why-head > h2, .xf-d-h3 { font-weight: 600; }
  .xf-d-why-head > h2 { font-size: 1rem; line-height: 1.5rem; }
  .xf-d-note { color: var(--xf-quiet); font-size: .75rem; line-height: 1.125rem; }
  .xf-d-claim { padding-left: 14px; border-left: 2px solid var(--xf-rule); font-size: 1rem; line-height: 1.5rem; text-wrap: pretty; }
  .xf-d-h3 { margin-bottom: -8px; }
  .xf-d-own { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--xf-raised); box-shadow: inset 0 0 0 1px var(--xf-hair); font-size: .75rem; line-height: 1.125rem; color: var(--xf-quiet); }
  .xf-d-own > b { color: var(--xf-text); }
  .xf-d-srcs, .xf-d-rows, .xf-d-sides { border-radius: 12px; background: var(--xf-sheet); box-shadow: inset 0 0 0 1px var(--xf-hair); }
  .xf-d-srcs > li + li, .xf-d-rows > div + div, .xf-d-sides > div + div { box-shadow: 0 -1px 0 var(--xf-line); }
  .xf-d-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 8px 10px 8px 14px; text-decoration: none; }
  .xf-d-src-t { font-weight: 500; }
  .xf-d-src-h { grid-row: 2; color: var(--xf-quiet); font-size: .75rem; line-height: 1.125rem; }
  .xf-d-src-o { grid-area: 1 / 2 / span 2; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--xf-rule); font-size: .75rem; line-height: 1rem; font-weight: 500; }

  /* 8. The bar of answers: it stays at the bottom edge while the page scrolls under it. */
  .xf-d-bar { position: sticky; bottom: 0; z-index: 3; margin: auto calc(-1 * var(--xf-pad)) -56px; padding: 8px var(--xf-pad) max(16px, calc(env(safe-area-inset-bottom) + 8px)); background: var(--xf-page); box-shadow: 0 -1px 0 var(--xf-line); }
  /* A page shorter than the screen: the column is one screen high at least, so the bar stands at the
     bottom edge and no link of the foot stands where an answer stands. */
  .xf-col:has(> .xf-d-bar) { min-height: 100dvh; }
  .xf-d-bar::before { content: ""; position: absolute; inset: auto 0 calc(100% + 1px); height: 16px; background: linear-gradient(to top, var(--xf-page), transparent); pointer-events: none; }
  /* No press in its first second (his keyframes, site.css). */
  .xf-d-bar::after { content: ""; position: absolute; inset: 0; visibility: hidden; animation: xf-hold 1s step-end; }
  .xf-d-bar-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; }
  /* The three answers fit one row at 320 px: no answer breaks inside its word. */
  .xf-d-ask ~ .xf-button { padding-inline: 14px; white-space: nowrap; }
  .xf-d-bar-row > span:empty { display: none; }
  .xf-d-bar-row > span:empty + .xf-button { grid-column: 1 / -1; justify-self: end; width: auto; min-width: calc(50% - 4px); white-space: nowrap; }
  .xf-d-ask { display: inline-flex; align-items: center; max-width: 6.5em; min-height: 48px; padding: 0 8px 0 0; border: 0; background: none; font-weight: 500; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .xf-d-bar-cap { margin-top: 6px; color: var(--xf-quiet); font-size: .75rem; line-height: 1.125rem; text-align: center; }
  .xf-d-nopop { display: none; }

  /* 9. The sheet: one side task, the rejection with its note. An HTML popover. */
  .xf-d-sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 40rem; max-height: 85dvh; margin: 0 auto; padding: 20px var(--xf-pad) max(16px, calc(env(safe-area-inset-bottom) + 12px)); border: 0; border-radius: 16px 16px 0 0; background: var(--xf-page); box-shadow: inset 0 0 0 1px var(--xf-line); color: var(--xf-text); overflow: auto; }
  .xf-d-sheet:popover-open { display: grid; row-gap: 12px; }
  .xf-d-sheet::backdrop { background: rgb(0 0 0 / 40%); }
  .xf-d-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .xf-d-sheet-top > h2 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
  .xf-d-x { min-height: 44px; padding: 0 0 0 12px; border: 0; background: none; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .xf-d-sheet-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 500; }
  .xf-d-sheet-form { display: grid; row-gap: 12px; }
  .xf-d-sheet-form textarea { width: 100%; }
  .xf-d-final { color: var(--xf-quiet); text-wrap: pretty; }
  .xf-d-sheet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  /* 10. The last look: what leaves and what enters, then the order again above the button that places. */
  .xf-d-sides > div { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 8px; padding: 10px 14px; }
  .xf-d-sides dt, .xf-d-rows dt { color: var(--xf-quiet); }
  .xf-d-sides dd { display: grid; }
  .xf-d-sides dd > span { color: var(--xf-quiet); font-size: .75rem; line-height: 1.125rem; }
  .xf-d-restate { display: grid; row-gap: 4px; margin-bottom: -10px; }
  .xf-d-restate-order { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
  .xf-d-restate-to { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

  /* 11. After the press: three rows, the end block, one way on. */
  .xf-d-rows > div { display: grid; row-gap: 2px; padding: 10px 14px 12px; }
  .xf-d-rows dt { font-size: .75rem; line-height: 1.125rem; }
  .xf-d-end { display: grid; row-gap: 10px; }
  .xf-d-own-note { padding: 10px 14px 12px; border-radius: 12px; background: var(--xf-raised); box-shadow: inset 0 0 0 1px var(--xf-hair); }
  .xf-d-own-note > .xf-d-k { font-size: .75rem; line-height: 1.125rem; }
  .xf-d-on > .xf-button { width: 100%; }
  /* A press that came too late, or the agent's browser: one line, above the head. */
  .xf-d-late { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--xf-raised); box-shadow: inset 0 0 0 1px var(--xf-hair); font-weight: 500; }
  .xf-d-late > .xf-icon { margin-top: 2px; }

  /* A browser without the Popover API: the sheet is a block of the page, and two links lead to it. */
  @supports not selector(:popover-open) {
    .xf-d-sheet { position: static; display: grid; row-gap: 12px; max-height: none; border-radius: 12px; order: 9; }
    .xf-d-x, .xf-d-sheet-acts > [popovertarget], .xf-d-bar-row > [popovertarget] { display: none; }
    .xf-d-sheet-acts { grid-template-columns: 1fr; }
    .xf-d-nopop { display: inline-flex; }
    /* The bar reaches down over the column's own room at its end: the sheet starts under the bar, not behind it. */
    .xf-d-bar + .xf-d-sheet { margin-top: 56px; }
  }
}

/* The last look in a short window (a phone's browser with its bars drawn): the button that places is whole above
   the bar when the page comes. "Leaves / Enters" is drawn after the form that places, its notes and its warning,
   and before the bar: moved, not hidden, and the document keeps its order. The order again stands closer to the
   amount, and its badge beside the account's words. */
@media (max-width: 40rem) and (max-height: 52rem) {
  .xf-d-top[data-screen="look"] ~ .xf-d-sides { order: 1; }
  .xf-d-top[data-screen="look"] ~ .xf-d-bar { order: 2; }
  .xf-d-top[data-screen="look"] ~ .xf-d-restate { margin-top: -6px; }
  .xf-d-top[data-screen="look"] ~ .xf-d-restate > .xf-d-restate-to { flex-wrap: nowrap; align-items: flex-start; }
  .xf-d-top[data-screen="look"] ~ .xf-d-restate .xf-badge { flex: none; }
}

/* 12. Motion: the sheet rises with its dim, and both go back the same way in less time. No page fade to or from a page that links this file. None of it where less motion is asked. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: none; } }
@media (max-width: 40rem) and (prefers-reduced-motion: no-preference) {
  /* Only where the sheet is a popover: as a block of the page it stands where it is laid out. */
  @supports selector(:popover-open) {
    .xf-d-sheet, .xf-d-sheet::backdrop { transition: translate .31s, opacity .31s, overlay .31s allow-discrete, display .31s allow-discrete; transition-timing-function: cubic-bezier(.305, .487, .04, 1); transition-timing-function: linear(0, 0.008 1.5%, 0.0387 3.5%, 0.0988 6%, 0.2202 10%, 0.4334 16.8%, 0.5577 21.2%, 0.656 25.5%, 0.7402 30%, 0.8093 34.8%, 0.8685 40.2%, 0.9149 46.5%, 0.9512 54.2%, 0.9775 64.8%, 0.9937 81.5%, 1); }
    .xf-d-sheet { translate: 0 100%; row-gap: 12px; }
    .xf-d-sheet::backdrop { opacity: 0; }
    .xf-d-sheet:popover-open { translate: 0 0; transition-duration: .44s; }
    .xf-d-sheet:popover-open::backdrop { opacity: 1; transition-duration: .44s; }
    @starting-style { .xf-d-sheet:popover-open { translate: 0 100%; } .xf-d-sheet:popover-open::backdrop { opacity: 0; } }
  }
}