/* Small illustrations scoped to inbound, Call Intelligence, Pulse and the three form pages. */

/* Inbound: an example routing rule traced by three test calls (native radios, no JS needed). */
.route-test-wrap { margin-top: 56px; }
.route-test { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.42fr); gap: 28px clamp(32px, 5vw, 64px); align-items: center; min-width: 0; margin: 0; padding: clamp(24px, 4vw, 44px); border: 1px solid #dbe5dd; border-radius: 24px; background: #fbfcfb; }
.route-test-copy h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; margin: 14px 0 10px; }
.route-test-copy > p { color: var(--muted); font-size: .92rem; margin: 0; max-width: 340px; }
.route-test-choices { display: grid; gap: 8px; margin-top: 24px; }
.route-test-choices label { display: grid; gap: 1px; padding: 12px 16px; border: 1px solid #d7e1da; border-radius: 14px; background: #fff; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.route-test-choices label:hover { border-color: #9fbfab; }
.route-test-choices strong { font-size: .88rem; font-weight: 650; }
.route-test-choices small { font-size: .76rem; color: inherit; opacity: .74; }
.route-test:has(.preview-choice[value="1"]:checked) label[for="route-test-1"],
.route-test:has(.preview-choice[value="2"]:checked) label[for="route-test-2"],
.route-test:has(.preview-choice[value="3"]:checked) label[for="route-test-3"] { background: #0d3125; border-color: #0d3125; color: #fff; }
.route-test:has(.preview-choice:focus-visible) .route-test-choices { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 16px; }
.route-tree { position: relative; height: clamp(300px, 30vw, 360px); }
.route-tree svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-tree path { fill: none; stroke: #c9d6cd; stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: stroke .3s, stroke-width .3s; }
.rt-node, .rt-label { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); text-align: center; }
.rt-node { width: max-content; max-width: 34%; padding: 9px 14px; border: 1px solid #d5e0d8; border-radius: 12px; background: #fff; font-size: .85rem; line-height: 1.3; color: #3f4d45; transition: border-color .3s, background .3s, color .3s, box-shadow .3s; }
.rt-node small { display: block; font-size: .62rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #5f6f66; margin-bottom: 2px; }
.rt-node strong { font-weight: 650; }
.rt-out { max-width: 30%; padding: 8px 14px; border-radius: 999px; background: #f4f6f4; font-weight: 600; }
.rt-label { padding: 1px 6px; background: #fbfcfb; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6a7a70; white-space: nowrap; transition: color .3s; }
.route-result { min-height: 3.2em; margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; background: #eef4ef; font-size: .85rem; line-height: 1.5; color: #22382b; }
.route-result b { display: block; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dark); }
.route-result span { display: none; }
.route-test-note { grid-column: 1 / -1; margin: 0; font-size: .74rem; color: #5b6a61; }
/* The checked test call lights its route, one step after another. */
.route-test:has(.preview-choice[value="1"]:checked) path[data-route~="1"],
.route-test:has(.preview-choice[value="2"]:checked) path[data-route~="2"],
.route-test:has(.preview-choice[value="3"]:checked) path[data-route~="3"] { stroke: var(--green); stroke-width: 2.25; transition-delay: calc(var(--step) * 260ms); }
.route-test:has(.preview-choice[value="1"]:checked) .rt-node[data-route~="1"],
.route-test:has(.preview-choice[value="2"]:checked) .rt-node[data-route~="2"],
.route-test:has(.preview-choice[value="3"]:checked) .rt-node[data-route~="3"] { border-color: var(--green); background: var(--pale); color: var(--ink); box-shadow: 0 0 0 1px var(--green); transition-delay: calc(var(--step) * 260ms + 120ms); }
.route-test:has(.preview-choice[value="1"]:checked) .rt-out[data-route~="1"],
.route-test:has(.preview-choice[value="2"]:checked) .rt-out[data-route~="2"],
.route-test:has(.preview-choice[value="3"]:checked) .rt-out[data-route~="3"] { border-color: var(--dark); background: var(--dark); color: #fff; box-shadow: 0 8px 18px -10px #006b45aa; }
.route-test:has(.preview-choice[value="1"]:checked) .rt-label[data-route~="1"],
.route-test:has(.preview-choice[value="2"]:checked) .rt-label[data-route~="2"],
.route-test:has(.preview-choice[value="3"]:checked) .rt-label[data-route~="3"] { color: var(--dark); transition-delay: calc(var(--step) * 260ms); }
.route-test:has(.preview-choice[value="1"]:checked) .route-result [data-route~="1"],
.route-test:has(.preview-choice[value="2"]:checked) .route-result [data-route~="2"],
.route-test:has(.preview-choice[value="3"]:checked) .route-result [data-route~="3"] { display: inline; animation: rt-result .45s ease-out .7s both; }
@keyframes rt-result { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 850px) {
  .route-test { grid-template-columns: 1fr; }
  .route-test-copy > p { max-width: none; }
}
@media (max-width: 480px) {
  .route-test { padding: 22px 16px; border-radius: 20px; }
  .route-tree { height: 330px; }
  .rt-node { max-width: 38%; padding: 7px 8px; font-size: .74rem; }
  .rt-node small { letter-spacing: .05em; }
  .rt-out { max-width: 30%; padding: 7px 8px; border-radius: 16px; }
  .rt-label { font-size: .55rem; padding: 1px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .route-test *, .route-test-choices label { transition: none !important; animation: none !important; }
}

/* Call Intelligence: analysed call summaries arriving in a feed. */
.ci-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: start; }
.ci-flow .split-grid { grid-template-columns: 1fr; }
.call-feed { margin: 0; min-width: 0; border: 1px solid #d1ddd5; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -26px #16382970; overflow: hidden; }
.call-feed-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #e2e9e4; background: #fcfdfc; }
.call-feed-head strong { font-size: .88rem; font-weight: 650; }
.call-feed-head small { font-size: .75rem; color: #5b6a61; }
.call-feed-head .preview-tag { margin-left: auto; }
.call-feed-list { list-style: none; margin: 0; padding: 0; }
.call-feed-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid #edf1ee; overflow: hidden; }
.call-feed-list li:nth-child(n+5), .call-feed.is-playing li:nth-child(-n+2):not(.is-new), .call-feed-list li.is-gone { display: none; }
.call-feed.is-playing li:nth-child(n+5):not(.is-gone) { display: grid; }
.call-feed-list li.is-new { animation: call-feed-new 2.6s ease-out; }
.call-feed-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; color: var(--k); background: color-mix(in srgb, var(--k) 13%, #fff); }
.call-feed-list p { margin: 0; font-size: .88rem; line-height: 1.4; color: #33433a; }
.call-feed-list p b { font-weight: 650; color: var(--ink); margin-right: 3px; }
.call-feed-list small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: .74rem; color: #5b6a61; }
.call-feed-list time { align-self: start; font-size: .74rem; color: #5b6a61; font-variant-numeric: tabular-nums; }
.call-feed figcaption { padding: 12px 20px 16px; font-size: .72rem; line-height: 1.5; color: #5b6a61; }
@keyframes call-feed-new { from { background: var(--pale); } to { background: transparent; } }
@media (max-width: 850px) {
  .ci-flow { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .call-feed-list li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 13px 16px; }
  .call-feed-mark { width: 32px; height: 32px; border-radius: 9px; }
  .call-feed-head, .call-feed figcaption { padding-left: 16px; padding-right: 16px; }
}

/* Pulse: team availability, using the app's own status colours. */
.team-presence { flex: none; width: min(100%, 360px); margin: 0; padding: 18px 20px 8px; border: 1px solid #d9e3dc; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -28px #16382960; }
.team-presence figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.team-presence figcaption strong { font-size: .88rem; font-weight: 650; }
.team-presence figcaption small { font-size: .72rem; color: #5b6a61; }
.team-presence ul { list-style: none; margin: 0; padding: 0; }
.team-presence li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #edf1ee; font-size: .85rem; }
.team-presence li > strong { font-weight: 600; }
.team-presence .pp-avatar > i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #16a34a; }
.team-presence .is-call .pp-avatar > i { background: #f59e0b; }
.team-presence .is-away .pp-avatar > i { background: #94a3b8; }
.tp-state { font-size: .76rem; font-weight: 650; color: #15803d; }
.is-call .tp-state { color: #8a5a0f; }
.is-away .tp-state { color: #5b6a61; }
@media (prefers-reduced-motion: no-preference) {
  .team-presence .is-available .pp-avatar > i { animation: tp-beat 2.8s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes tp-beat { 0%, 100% { box-shadow: 0 0 0 0 #16a34a66; } 50% { box-shadow: 0 0 0 6px #16a34a00; } }
@media (max-width: 650px) {
  .team-presence { margin-top: 26px; width: 100%; }
}

/* Forms: a check that draws once beside the existing success message. */
.form-status.is-visible.is-success { display: flex; align-items: center; gap: 14px; }
.form-success-check { flex: none; width: 36px; height: 36px; }
.form-success-check svg { display: block; width: 100%; height: 100%; overflow: visible; }
.form-success-check circle { fill: #fff; stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 1; transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; }
.form-success-check path { fill: none; stroke: var(--dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .form-success-check svg { animation: form-check-pop .6s cubic-bezier(.2, .85, .2, 1.25) both; }
  .form-success-check circle { animation: form-check-draw .5s cubic-bezier(.3, .7, .3, 1) both; }
  .form-success-check path { animation: form-check-draw .38s ease-out .34s both; }
}
@keyframes form-check-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes form-check-pop { from { transform: scale(.6); } to { transform: scale(1); } }