/* Use-case pages. The page is the capability-page pattern (platform.css); its one authored object is a window in the dashboard's
   own light material (moments.css): the moment bar, chips, transcript turns, the play mark, the chat answer and proposal, and the
   review marks. The object plays the moments' existing play-once classes; reduced motion shows the finished state. */

/* The head's status line: each label beside its capability's chip, wrapping to centered lines on phones. */
.uc-stage { gap: 10px 22px; }
.uc-stage__item { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 9px; }
.uc-stage .stage { white-space: nowrap; border-radius: 999px; }
.uc-stage__label { font-size: 13px; color: var(--secondary); }

.uc-stage-object { margin: 64px auto 0; }
.moment.uc-object { width: min(100%, 1000px); }
/* Contrast: the synthetic caption and the secondary text on the selected row's tint stay above 4.5:1. */
.uc-object figcaption { color: var(--ui-2); }
.uc-call.is-on small, .uc-object .ui-turn--hot > span { color: #4f5663; }

/* Sales call review: the calls worth hearing beside the open call. */
.uc-review { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.uc-queue { min-width: 0; padding: 18px 18px 20px; border-right: 1px solid var(--ui-line); background: #fcfcfe; }
.uc-queue__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 8px 8px; }
.uc-queue__head span { font-size: 11.5px; font-weight: 560; letter-spacing: .02em; color: var(--ui-2); }
.uc-queue__head small { font-size: 12px; color: var(--ui-2); font-variant-numeric: tabular-nums; }
.uc-queue__list { margin: 0; padding: 0; list-style: none; }
.uc-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
.uc-call + .uc-call { margin-top: 2px; }
.uc-call.is-on { background: #eef0fc; }
.uc-call:not(.is-on) .ui-play { opacity: .5; }
.uc-call__who { min-width: 0; }
.uc-call__who strong { display: block; font-size: 13.5px; font-weight: 560; }
.uc-call__who small { display: block; margin-top: 1px; font-size: 12px; color: var(--ui-2); font-variant-numeric: tabular-nums; }
.uc-call__when { font-size: 12px; color: var(--ui-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.uc-detail { min-width: 0; padding: 20px 24px 22px; }
.uc-findings { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-line); }
/* Each finding: its mark, what was checked and the result on one line, and why below it. On phones the result drops under the text. */
.uc-findings li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "mark text state" ". note note"; align-items: start; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.uc-findings .mk-box { grid-area: mark; }
.uc-findings__text { grid-area: text; font-size: 13.5px; font-weight: 520; line-height: 1.4; }
.uc-findings__state { grid-area: state; padding-top: 2px; font-size: 12px; color: var(--ui-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.uc-findings__note { grid-area: note; display: block; margin-top: 2px; font-size: 12px; color: var(--ui-2); font-variant-numeric: tabular-nums; }
.uc-detail .ui-transcript { margin-top: 14px; }
.uc-detail .ui-turn span { font-variant-numeric: tabular-nums; }
.uc-open { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 10px; font-size: 12px; color: var(--ui-2); font-variant-numeric: tabular-nums; }
.uc-open .ui-play, .uc-promise__text .ui-play, .uc-entry__head .ui-play { width: 20px; height: 20px; }
.uc-open .ui-play::after, .uc-promise__text .ui-play::after, .uc-entry__head .ui-play::after { left: 8px; top: 5px; border-left-width: 6px; border-top-width: 5px; border-bottom-width: 5px; }

/* Coaching from real calls: one rep's week (the rep, the pattern and the moments worth playing) beside the open moment and one
   change to practice, in the review's two panes. */
.uc-coach .ui-rep { margin: 0 8px; }
.uc-coach .ui-rep small { margin-top: 1px; }
.uc-pattern { margin: 14px 8px 20px; font-size: 13.5px; line-height: 1.5; }
.uc-pattern span { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 560; letter-spacing: .02em; color: var(--ui-2); }
.uc-call__coach { display: block; margin-top: 3px; font-size: 12px; font-style: normal; line-height: 1.4; color: #7a5a12; }
.uc-coach .uc-detail > .ui-cites__label { margin-top: 20px; }

/* The customer record: the record's details beside the timeline of calls and texts, in time order. */
.uc-record { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.uc-card { min-width: 0; padding: 20px 22px 22px; border-right: 1px solid var(--ui-line); background: #fcfcfe; }
.uc-card .ui-call__meta { margin-top: 2px; font-variant-numeric: tabular-nums; }
.uc-fields { margin-top: 14px; border-top: 1px solid var(--ui-line); }
.uc-card .ui-field { grid-template-columns: 76px minmax(0, 1fr); }
.uc-timeline { min-width: 0; padding: 20px 24px 22px; }
.uc-timeline > .ui-cites__label { margin-top: 0; }
.uc-entries { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-line); }
.uc-entry { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); }
.uc-entry__when { padding-top: 1px; font-size: 12px; line-height: 1.45; color: var(--ui-2); font-variant-numeric: tabular-nums; }
.uc-entry__when span { display: block; }
.uc-entry__body { min-width: 0; }
.uc-entry__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 13.5px; }
.uc-entry__head strong { font-weight: 560; }
.uc-entry__head small { font-size: 12px; color: var(--ui-2); font-variant-numeric: tabular-nums; }
.uc-entry .ui-turn, .uc-entry .ui-thread { margin-top: 8px; }
.uc-entry__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; }
.uc-entry__tag small { font-size: 12px; color: var(--ui-2); }

/* Follow-up and next steps: the question and its cited answer beside the proposed next step. */
.uc-follow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.uc-ask { min-width: 0; padding: 22px 24px 24px; border-right: 1px solid var(--ui-line); }
.uc-next { min-width: 0; padding: 22px 24px 24px; background: #fcfcfe; }
.uc-next > .ui-cites__label:first-child { margin-top: 0; }
.uc-promises { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ui-line); }
.uc-promise { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 11px 0; border-bottom: 1px solid var(--ui-line); }
.uc-promise__text { min-width: 0; }
.uc-promise__text strong { display: block; font-size: 13.5px; font-weight: 560; }
.uc-promise__text span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.4; }
.uc-promise__text small { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--ui-2); font-variant-numeric: tabular-nums; }
.uc-promise__state { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.uc-promise__state small { max-width: 24ch; font-size: 11.5px; line-height: 1.35; color: var(--ui-2); }

/* What the use case runs on: each capability beside its own chip. */
.uc-runs { display: flex; align-items: baseline; gap: 10px 16px; margin-top: 30px; }
.uc-runs__label { flex: none; font-size: 13px; color: var(--secondary); }
.uc-runs ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; padding: 0; list-style: none; }
.uc-runs li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }
.uc-runs .stage { white-space: nowrap; border-radius: 999px; }
.uc-runs a { font-size: 15px; font-weight: 480; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #a8afbb; }
.uc-runs a:hover { color: var(--red-dark); text-decoration-color: var(--red); }
.steps .uc-step-stage { margin-top: 10px; line-height: 1; }

/* The other use cases, in the whole-platform list's material. */
.uc-all ul { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; margin-inline: auto; }

@media (max-width: 860px) {
  .uc-review, .uc-follow, .uc-record { grid-template-columns: 1fr; }
  .uc-queue, .uc-ask, .uc-card { border-right: 0; border-bottom: 1px solid var(--ui-line); }
}
@media (max-width: 700px) {
  .uc-stage-object { margin-top: 48px; }
  /* The record's fields stack their labels (moments.css); the source chip stays under its value. */
  .uc-card .ui-field { grid-template-columns: 1fr; }
  .uc-card .ui-field--diff .chip { grid-column: 1; }
  .uc-runs { flex-direction: column; align-items: flex-start; gap: 12px; }
  .uc-runs ul { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 640px) {
  .uc-all ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .uc-queue { padding: 14px 10px 16px; }
  .uc-detail, .uc-ask, .uc-next { padding: 18px 16px 20px; }
  .uc-findings li { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "mark text" ". state" ". note"; }
  .uc-findings__state { padding-top: 2px; }
  .uc-promise { grid-template-columns: 1fr; }
  .uc-promise__state { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 8px; }
  .uc-promise__state small { max-width: none; }
  .uc-open { margin-left: 0; }
  .uc-card, .uc-timeline { padding: 18px 16px 20px; }
  .uc-entry { grid-template-columns: 1fr; gap: 6px; }
  .uc-entry__when span { display: inline; }
  .uc-entry__when span + span::before { content: "· "; }
}