/* comms.proexteriorsus.net: page styles. Role tokens only (K-01, K-02); cx- classes are
   page layout for this explainer, not new design-system patterns. */
.pe-main { max-width: var(--pe-size-content-max); width: 100%; padding: var(--pe-space-4) var(--pe-space-8) var(--pe-space-12); }
.cx-office { min-width: 240px; }
.cx-measure { max-width: 72ch; margin: 0; }
.cx-nav-label { margin: var(--pe-space-4) var(--pe-space-2) var(--pe-space-1); color: var(--pe-on-structure-muted); font-size: var(--pe-font-size-xs); font-weight: var(--pe-font-weight-bold); letter-spacing: var(--pe-font-tracking-label); text-transform: uppercase; }
.cx-nav-n { margin-left: auto; color: var(--pe-on-structure-muted); font-size: var(--pe-font-size-xs); }
.pe-nav-group > summary .cx-nav-n + * { margin-left: 0; }
.cx-list { margin: 0 0 var(--pe-space-3); padding-left: var(--pe-space-5); display: grid; gap: var(--pe-space-1); }
.cx-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--pe-space-3); }
.cx-kpi { color: var(--pe-text) !important; text-decoration: none !important; }
.cx-kpi:hover { background: var(--pe-surface-hover); }
.cx-steps { margin: 0; padding-left: var(--pe-space-5); display: grid; gap: var(--pe-space-2); }
.cx-timeline { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--pe-space-3); }
.cx-timeline .pe-panel-body { display: grid; gap: var(--pe-space-2); }
.cx-cta { justify-self: start; text-decoration: none !important; }
.cx-meta { gap: var(--pe-space-2); }
.cx-controls { align-items: center; }

/* Stage */
.cx-stage { padding: var(--pe-space-3); overflow: hidden; }
.cx-stage-svg { display: block; width: 100%; height: auto; font-family: var(--pe-font-family-sans); }
.cx-edge { fill: none; stroke: var(--pe-border-strong); stroke-width: 2; stroke-dasharray: 4 6; }
.cx-active { fill: none; stroke: var(--pe-link); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cx-packet { fill: var(--pe-link); stroke: var(--pe-surface); stroke-width: 3; }
.cx-node rect { fill: var(--pe-structure); stroke: var(--pe-structure); stroke-width: 2; transition: stroke var(--pe-motion-fast) var(--pe-motion-ease); }
.cx-node[data-node="client"] rect, .cx-node[data-node="pwa"] rect { fill: var(--pe-surface); }
.cx-node-label { fill: var(--pe-on-structure); font-size: 15px; font-weight: var(--pe-font-weight-bold); }
.cx-node-sub { fill: var(--pe-on-structure-muted); font-size: 12px; }
.cx-node[data-node="client"] .cx-node-label, .cx-node[data-node="pwa"] .cx-node-label { fill: var(--pe-structure); }
.cx-node[data-node="client"] .cx-node-sub, .cx-node[data-node="pwa"] .cx-node-sub { fill: var(--pe-text-muted); }
.cx-node.is-on rect { stroke: var(--pe-link); stroke-width: 5; }

/* Player layout: customer phone, narrative, staff phone */
.cx-play { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: var(--pe-space-4); align-items: start; }
.cx-narr .pe-panel-body { gap: var(--pe-space-3); }
.cx-steplist { margin: 0; padding-left: var(--pe-space-5); display: grid; gap: 2px; }
.cx-stepbtn { width: 100%; min-height: var(--pe-size-row-compact); padding: var(--pe-space-1) var(--pe-space-2); border: 0; border-radius: var(--pe-radius-control); background: transparent; color: var(--pe-text-secondary); font: inherit; text-align: left; cursor: pointer; }
.cx-stepbtn:hover { background: var(--pe-surface-hover); }
.cx-stepbtn[aria-current] { background: var(--pe-surface-selected); color: var(--pe-structure); font-weight: var(--pe-font-weight-semibold); box-shadow: inset 3px 0 var(--pe-link); }

/* Phone mockups */
.cx-phone { margin: 0; display: grid; gap: var(--pe-space-2); }
.cx-device { height: 420px; padding: var(--pe-space-4) var(--pe-space-3); border: var(--pe-border-width-strong) solid var(--pe-structure); border-radius: var(--pe-radius-card); background: var(--pe-surface-sunken); overflow: hidden; display: flex; flex-direction: column; }
.cx-idle { flex: 1; display: grid; align-content: start; justify-items: center; gap: var(--pe-space-3); padding-top: var(--pe-space-8); text-align: center; color: var(--pe-text-muted); }
.cx-idle p { margin: 0; }
.cx-clock { font-size: var(--pe-font-size-display); font-weight: var(--pe-font-weight-semibold); color: var(--pe-text); }
.cx-notif { width: 100%; display: grid; gap: 2px; padding: var(--pe-space-3); border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface); text-align: left; color: var(--pe-text); }
.cx-notif p { margin: 0; }
.cx-callscreen { flex: 1; margin: calc(-1 * var(--pe-space-4)) calc(-1 * var(--pe-space-3)); padding: var(--pe-space-8) var(--pe-space-4) var(--pe-space-4); display: flex; flex-direction: column; align-items: center; gap: var(--pe-space-2); background: var(--pe-structure); color: var(--pe-on-structure); text-align: center; }
.cx-callscreen p { margin: 0; }
.cx-cs-label { color: var(--pe-on-structure-muted); font-size: var(--pe-font-size-sm); min-height: 22px; }
.cx-cs-name { font-size: var(--pe-font-size-h2); font-weight: var(--pe-font-weight-bold); }
.cx-cs-num { font-size: var(--pe-font-size-lg); color: var(--pe-on-structure-muted); }
.cx-cs-sub { font-size: var(--pe-font-size-sm); }
.cx-cs-buttons { margin-top: auto; display: flex; justify-content: space-around; width: 100%; }
.cx-cs-buttons span { padding: var(--pe-space-2) var(--pe-space-4); border-radius: var(--pe-radius-pill); font-weight: var(--pe-font-weight-semibold); }
.cx-dec { background: var(--pe-danger); color: var(--pe-on-action); }
.cx-acc { background: var(--pe-good); color: var(--pe-on-action); }
.cx-sms { flex: 1; display: flex; flex-direction: column; gap: var(--pe-space-3); }
.cx-sms-head { display: grid; justify-items: center; padding-bottom: var(--pe-space-2); border-bottom: var(--pe-border-width) solid var(--pe-border); font-size: var(--pe-font-size-sm); color: var(--pe-text-muted); }
.cx-sms-head strong { color: var(--pe-text); font-size: var(--pe-font-size-body); }
.cx-bubbles { display: grid; gap: var(--pe-space-2); align-content: start; overflow: auto; }
.cx-bubble { margin: 0; max-width: 85%; padding: var(--pe-space-2) var(--pe-space-3); border-radius: var(--pe-radius-card); font-size: var(--pe-font-size-sm); line-height: var(--pe-font-leading-snug); }
.cx-in { justify-self: start; background: var(--pe-surface); border: var(--pe-border-width) solid var(--pe-border); color: var(--pe-text); }
.cx-out { justify-self: end; background: var(--pe-info); color: var(--pe-on-action); }
.cx-mail { flex: 1; display: grid; align-content: start; gap: var(--pe-space-2); padding: var(--pe-space-3); border-radius: var(--pe-radius-card); background: var(--pe-surface); }
.cx-mail p { margin: 0; }
.cx-mail-from { font-size: var(--pe-font-size-sm); color: var(--pe-text-muted); }
.cx-appcard { display: grid; gap: var(--pe-space-3); padding: var(--pe-space-3); border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface); }
.cx-appcard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pe-space-2); }
.cx-appcard dl { margin: 0; display: grid; gap: var(--pe-space-2); }
.cx-appcard dt { font-size: var(--pe-font-size-xs); color: var(--pe-text-muted); font-weight: var(--pe-font-weight-semibold); }
.cx-appcard dd { margin: 0; font-size: var(--pe-font-size-sm); }
.cx-fake { pointer-events: none; }

@media (max-width: 1100px) {
  .pe-main { padding-inline: var(--pe-space-6); }
  .cx-play { grid-template-columns: 1fr 1fr; }
  .cx-narr { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  .pe-main { padding: var(--pe-space-2) var(--pe-space-4) calc(var(--pe-size-tabbar) + var(--pe-space-8)); }
  .pe-header-actions { grid-area: auto; grid-column: 1 / -1; justify-self: stretch; }
  .pe-header { grid-template-areas: "logo logo" "title title" "office office"; }
  .cx-office { width: 100%; min-width: 0; }
  .cx-play { grid-template-columns: 1fr 1fr; gap: var(--pe-space-2); }
  .cx-narr { order: 3; }
  .cx-device { height: 340px; padding: var(--pe-space-3) var(--pe-space-2); font-size: var(--pe-font-size-sm); }
  .cx-callscreen { margin: calc(-1 * var(--pe-space-3)) calc(-1 * var(--pe-space-2)); padding: var(--pe-space-6) var(--pe-space-2) var(--pe-space-3); }
  .cx-cs-name { font-size: var(--pe-font-size-lg); }
  .cx-cs-num { font-size: var(--pe-font-size-sm); }
  .cx-bubble { max-width: 95%; font-size: var(--pe-font-size-xs); }
  .cx-clock { font-size: var(--pe-font-size-h1); }
  .cx-cs-buttons span { padding: var(--pe-space-1) var(--pe-space-2); font-size: var(--pe-font-size-xs); }
  .cx-stage { padding: var(--pe-space-1); }
}

/* Voice simulation: transcript of the current step, speaker highlight */
.cx-talk { display: grid; gap: var(--pe-space-2); padding: var(--pe-space-3); border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface-sunken); }
.cx-talk-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-space-2); }
.cx-hear { margin-left: auto; }
.cx-talk-none { margin: 0; font-size: var(--pe-font-size-sm); }
.cx-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pe-space-1); }
.cx-lines li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--pe-space-2); padding: var(--pe-space-1) var(--pe-space-2); border-radius: var(--pe-radius-control); font-size: var(--pe-font-size-sm); line-height: var(--pe-font-leading-snug); color: var(--pe-text-secondary); }
.cx-lines li strong { color: var(--pe-text); font-weight: var(--pe-font-weight-semibold); }
.cx-lines li[aria-current] { background: var(--pe-surface); color: var(--pe-text); box-shadow: inset 3px 0 var(--pe-link); }
.cx-device { transition: box-shadow var(--pe-motion-fast) var(--pe-motion-ease); }
.cx-device.is-speaking { box-shadow: 0 0 0 4px var(--pe-link); }
@media (max-width: 760px) {
  .cx-lines li { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .cx-device { transition: none; } }