/* THE STAFF CUSTOMER PAGE, "ONE NOW CARD" (Chase, 3 Nov): the header's phone,
   email and street; five dots; the Now card (the Next bar's own card, with the
   quote and what they asked for inside it) beside the Messages card; six
   one-line cells that open in place, full width. Tokens are the app's
   (application.css). */

/* ---- the header's reach lines ---- */
.cn-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin: -0.75rem 0 0; padding: 0; list-style: none; }
.cn-facts > li { min-width: 0; }
.cn-facts .cn-wide { flex: 1 1 100%; }
.cn-fact { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--spacing-tap); font-weight: 600; color: var(--color-accent-strong); }
a.cn-fact:hover { text-decoration: underline; text-underline-offset: 3px; }
.cn-fact svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--color-muted); }
span.cn-fact { color: var(--color-ink); font-weight: 500; }
.cn-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; }
.cn-texting { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }

/* ---- five dots: a phone keeps every word (the thirteen did not fit; five do) ---- */
#customer_stepper.ui-steps-five .ui-stepper { padding-bottom: 0.5rem; }
@media (max-width: 47.99rem) {
  #customer_stepper.ui-steps-five .ui-stepper-linked { display: flex; padding: 0.875rem 0.5rem 0.25rem; }
  #customer_stepper.ui-steps-five .ui-step-word { position: static; width: auto; height: auto; max-width: 4.75rem; overflow: visible; clip-path: none; white-space: normal; }
  #customer_stepper.ui-steps-five .ui-step.is-current .ui-step-word { position: static; max-width: 4.75rem; }
  #customer_stepper.ui-steps-five .ui-stepper-line { display: flex; padding: 0 1rem 0.75rem; }
  #customer_stepper.ui-steps-five .ui-stepper-line > span:first-child { display: inline; }
  #customer_stepper.ui-steps-five .ui-stepper-line > span[data-stepper-when] { display: none; }
}

/* ---- the Now card beside the Messages card ---- */
.cn-now-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 64rem) { .cn-now-grid { grid-template-columns: minmax(0, 1fr) 23rem; gap: 1.25rem; } }
.cn-now-grid > div > .ui-next-bar { border-left-width: 4px; }
.cn-now-extra { display: flex; flex-direction: column; gap: 1rem; padding: 0 1.25rem 1.25rem; }
.cn-now-extra:first-child { padding-top: 1rem; }
.cn-quote { border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: #fff; }
.cn-quote-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.625rem 0.875rem 0; }
.cn-quote-total { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.cn-quote-state { font-size: 0.8125rem; color: var(--color-muted); }
.cn-lines { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.cn-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.875rem; border-top: 1px solid var(--color-line); font-size: 0.9375rem; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cn-line > span:last-child { white-space: nowrap; }
.cn-sub { color: var(--color-muted); }
.cn-quote-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cn-asked { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--color-line); padding-top: 0.875rem; }
.cn-asked blockquote { margin: 0.25rem 0 0; color: var(--color-ink); line-height: 1.6; }
.cn-notes { font-size: 0.9375rem; color: var(--color-muted); }
.cn-notes b { color: var(--color-ink); font-weight: 600; }

/* ---- six one-line cells ---- */
.cn-also { overflow: hidden; }
.cn-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--color-line); }
@media (max-width: 63.99rem) { .cn-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .cn-cells { grid-template-columns: minmax(0, 1fr); } }
.cn-cell { position: relative; min-width: 0; background: #fff; }
.cn-cell[open] { grid-column: 1 / -1; }
.cn-cell-row { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; padding: 0.75rem 1.25rem; cursor: pointer; list-style: none; }
div.cn-cell > .cn-cell-row { cursor: default; }
.cn-cell:hover > .cn-cell-row, .cn-cell[open] > .cn-cell-row { background: #faf9f7; }
div.cn-cell:not(:has(a)):hover > .cn-cell-row { background: transparent; }
.cn-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; background: var(--color-page); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-line); }
.cn-ico.is-good { background: var(--color-good-soft); color: var(--color-good-ink); box-shadow: none; }
.cn-ico svg { width: 1.125rem; height: 1.125rem; }
.cn-cell-title { display: block; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); }
.cn-cell-title .ui-badge { margin-left: 0.25rem; vertical-align: 1px; }
.cn-cell-about { display: block; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-go { flex: none; width: 1rem; height: 1rem; color: var(--color-muted); }
a.cn-cell-row::after { content: none; }
.cn-add { position: relative; z-index: 1; min-height: 2.25rem; padding: 0 0.75rem; font-size: 0.875rem; }
.cn-add svg { width: 1rem; height: 1rem; }
.cn-cell-body { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--color-line); }
.cn-ask { padding: 0.5rem 1.25rem; border-top: 1px solid var(--color-line); }
.cn-ask [data-customer-assistant] { border: 0; padding: 0.25rem 0; }
@media (max-width: 47.99rem) {
  .cn-cell-row { padding: 0.75rem 1rem; }
  .cn-now-extra { padding: 0 1rem 1rem; }
  .cn-cell-body { padding: 0.875rem 1rem 1rem; }
  .cn-ask { padding: 0.5rem 1rem; }
}