/* AI & Automation (/ai-automation). Loaded after svc.css and uipath.css.
   The example run: four made-up requests in an inbox are read, checked against the EHR and the rules, and either
   finished in the systems or sent to the team. Driven by /scripts/v2/svc-flows.mjs; the markup holds the finished
   run, which is what shows with reduced motion. Inside the paper it uses the paper colors from .up-board. */
.ar-board { transform: none; padding: 20px 24px 22px; }
.ar-stages { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 2px; }
.ar-stages li { position: relative; padding: 4px 8px; border: 1px solid var(--rule-type); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint-type); transition: background 240ms ease, color 240ms ease, border-color 240ms ease; }
.ar-stages li + li::before { content: "→"; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); color: var(--faint-type); letter-spacing: 0; }
.ar-stages li.ask::before { content: "or"; left: -18px; text-transform: none; }
.ar-stages li.on { color: var(--type); border-color: var(--type); }
.ar-stages li.act { background: #F2C230; border-color: var(--type); color: #15181A; }

.ar-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) minmax(0, .9fr); margin-top: 16px; border-top: 1px dashed var(--rule-type); }
.ar-col { min-width: 0; padding: 14px 20px 2px; }
.ar-col:first-child { padding-left: 0; }
.ar-col:last-child { padding-right: 0; }
.ar-col + .ar-col { border-left: 1px dashed var(--rule-type); }
.ar-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint-type); }
.ar-inbox ul, .ar-checks, .ar-tray ul { list-style: none; padding: 0; }

/* Inbox */
.ar-inbox ul { display: grid; gap: 8px; margin-top: 10px; }
.ar-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "src st" "title title" "sub sub"; gap: 3px 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--rule-type); transition: border-color 240ms ease, box-shadow 240ms ease; }
.ar-q .ar-src { grid-area: src; }
.ar-q .ar-st { grid-area: st; }
.ar-q strong { grid-area: title; }
.ar-q .ar-sub { grid-area: sub; }
.ar-q.act { border-color: var(--type); box-shadow: 3px 3px 0 var(--type); }
.ar-src { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint-type); }
.ar-q strong { font-size: 13.5px; line-height: 1.25; font-weight: 650; color: var(--type); }
.ar-sub { font-size: 12px; color: var(--faint-type); }
.ar-st { justify-self: end; padding: 1px 6px; border: 1px solid var(--rule-type); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10px; letter-spacing: .04em; white-space: nowrap; color: var(--faint-type); }
.ar-st.work { border-style: dashed; border-color: var(--type); color: var(--type); }
.ar-st.done { border-color: var(--type); color: var(--type); }
.ar-st.done::before { content: "✓ "; color: #1E9E57; }
.ar-st.team { background: #F2C230; border-color: var(--type); color: #15181A; }

/* The request being worked on */
.ar-now { margin-top: 8px; font-family: var(--f-display); font-stretch: 112%; font-weight: 720; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; color: var(--type); }
.ar-sub-h { margin-top: 14px; font-size: 11.5px; font-weight: 600; color: var(--faint-type); }
.ar-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.ar-fields > div { min-width: 0; padding: 7px 9px; border: 1px solid var(--rule-type); }
.ar-fields dt { font-size: 11px; color: var(--faint-type); }
.ar-fields dd { margin: 2px 0 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 13px; color: var(--type); opacity: .14; overflow-wrap: anywhere; transition: opacity 300ms ease; }
.ar-fields > div.on dd { opacity: 1; }
.ar-checks { display: grid; gap: 4px; margin-top: 6px; }
.ar-checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: baseline; font-size: 13.5px; line-height: 1.35; color: var(--faint-type); }
.ar-checks li::before { content: "·"; text-align: center; font-weight: 700; }
/* Green check and red X on purpose, as in the UiPath page's picture, so a passed and a failed check cannot be mistaken. */
.ar-checks li.ok { color: var(--type); }
.ar-checks li.ok::before { content: "✓"; color: #1E9E57; }
.ar-checks li.no { color: var(--type); font-weight: 650; }
.ar-checks li.no::before { content: "✗"; color: #D1342B; }
.ar-out { margin-top: 14px; padding: 10px 12px; font-size: 13.5px; line-height: 1.4; background: var(--type); color: var(--paper); opacity: .14; transition: opacity 300ms ease, background 240ms ease, color 240ms ease; }
.ar-out.on { opacity: 1; }
.ar-out.flag { background: #F2C230; color: #15181A; box-shadow: inset 0 0 0 1.5px var(--type); }

/* Where the work ended up */
.ar-tray + .ar-tray { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule-type); }
.ar-tray .ar-h b { font-family: var(--f-display); font-stretch: 118%; font-weight: 780; font-size: 24px; line-height: 1; letter-spacing: -.02em; color: var(--type); }
.ar-tray ul { display: grid; gap: 7px; margin-top: 10px; }
.ar-tray li { padding-left: 10px; border-left: 2px solid var(--type); font-size: 13px; line-height: 1.35; color: var(--type); opacity: 0; transform: translateY(4px); transition: opacity 300ms ease, transform 300ms ease; }
.ar-tray.team li { border-left: 4px solid #F2C230; }
.ar-tray li.on { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .ar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ar-case { grid-column: 1 / -1; grid-row: 1; padding: 14px 0 16px; border-bottom: 1px dashed var(--rule-type); }
  .ar-col + .ar-col { border-left: 0; }
  .ar-inbox { padding: 14px 20px 0 0; }
  .ar-trays { padding: 14px 0 0 20px; border-left: 1px dashed var(--rule-type) !important; }
}
@media (max-width: 640px) {
  .ar-board { padding: 16px 14px 18px; }
  .ar-stages { gap: 6px 18px; }
  .ar-grid { grid-template-columns: minmax(0, 1fr); }
  .ar-inbox, .ar-trays { padding: 14px 0 0; }
  .ar-case { grid-row: auto; margin-top: 14px; border-top: 1px dashed var(--rule-type); border-bottom: 0; padding-bottom: 2px; }
  .ar-trays { margin-top: 14px; border-left: 0 !important; border-top: 1px dashed var(--rule-type); }
  .ar-q { grid-template-areas: "title st"; padding: 8px 9px; }
  .ar-q .ar-src, .ar-q .ar-sub { display: none; }
  .ar-q strong { font-size: 13px; }
  .ar-fields dd { font-size: 12.5px; }
  .up-top span + span { display: none; }
}

/* Results: keep each figure on one line ("~3 FTE", "8,000+"). */
#results .up-stats dt { font-size: clamp(24px, 2.6vw, 34px); white-space: nowrap; }
@media (max-width: 480px) { #results .up-stats dt { font-size: 22px; } }

/* What the agents work with: two lists in one column under the same rule. */
.ai-in .up-list + .up-lib-h { margin-top: 26px; }

/* Client results: three paper cards. In a narrow card the three numbers stack, each with its label beside it. */
.up-cases.three .up-stats { grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
.up-cases.three .up-stats > div { display: grid; grid-column: 1 / -1; grid-template-columns: 6.6em minmax(0, 1fr); grid-template-columns: subgrid; align-items: baseline; padding: 11px 0; }
.up-cases.three .up-stats > div + div { padding-left: 0; border-left: 0; border-top: 1px dashed var(--line); }
.up-cases.three .up-stats dt { font-size: clamp(24px, 2.3vw, 30px); }
.up-cases.three .up-stats dd { margin: 0; }
@media (min-width: 1100px) { .up-cases.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1099px) { .up-cases.three > :last-child { grid-column: 1 / -1; } }
.ai-other { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 32px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }