/* Welcome call: guided flow + Call recording / Homeowner info cards (public/welcomecall.js) */
.wcx { display: grid; gap: 12px; }
.wcx-card { background: #fff; border: 1px solid #d9dfd8; border-left: 5px solid #2f7d4f; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.wcx-muted { font-size: 12px; color: #6b7a70; }
.wcx-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wcx-title { font-size: 16px; font-weight: 800; color: #1d2a22; }
.wcx-who { font-size: 12px; color: #6b7a70; }
.wcx-status, .wcx-att, .wcx-consent, .wcx-count { display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 2px 10px; white-space: nowrap; }
.wcx-status.warn, .wcx-att.warn, .wcx-consent.warn { background: #fff4d9; color: #7a5600; border: 1px solid #f2c25c; }
.wcx-status.ok, .wcx-att.ok, .wcx-consent.ok { background: #dcefe2; color: #2f7d4f; border: 1px solid #9fd8b1; }
.wcx-consent.bad { background: #fdeceb; color: #9b2c1f; border: 1px solid #eea59d; }
.wcx-count { background: #dcefe2; color: #2f7d4f; font-size: 11px; padding: 1px 8px; }

/* stepper: same look as the scheduling blocks */
.wcx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: #eef3ef; border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.wcx-steps button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 0; border-radius: 9px; padding: 7px 8px; font-size: 13.5px; color: #3c4a41; cursor: pointer; white-space: nowrap; min-width: 0; }
.wcx-steps button:hover { background: #fff; }
.wcx-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #dcefe2; color: #2f7d4f; font-size: 11px; font-weight: 800; }
.wcx-steps button.done .wcx-n { background: #2f7d4f; color: #ffe100; font-size: 0; } .wcx-steps button.done .wcx-n::after { content: "✓"; font-size: 12px; }
.wcx-steps button.on { background: #2f7d4f; color: #ffe100; font-weight: 700; box-shadow: 0 2px 6px rgba(47,125,79,.35); }
.wcx-steps button.on .wcx-n { background: #ffe100; color: #2f7d4f; font-size: 11px; } .wcx-steps button.on .wcx-n::after { content: none; }

/* buttons, toggles, inputs */
.wcx-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; background: #eef3ef; border: 0; border-radius: 999px; padding: 7px 14px; color: #1d2a22; cursor: pointer; text-decoration: none; white-space: nowrap; }
.wcx-btn:hover { background: #e3ece6; text-decoration: none; }
.wcx-btn.pri { background: #2f7d4f; color: #ffe100; font-weight: 700; } .wcx-btn.pri:hover { background: #286b44; }
.wcx-btn:disabled { opacity: .45; cursor: not-allowed; }
.wcx-red { color: #9b2c1f; background: transparent; } .wcx-red:hover { background: #fdeceb; }
.wcx-link { background: none; border: 0; padding: 0; color: #2f7d4f; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.wcx-pill { font-size: 12px; background: #fff; border: 1px solid #d9dfd8; border-radius: 999px; padding: 4px 11px; color: #1d2a22; white-space: nowrap; text-decoration: none; }
.wct { display: inline-flex; flex-wrap: wrap; gap: 2px; background: #eef3ef; border-radius: 10px; padding: 3px; }
.wct button { background: transparent; border: 0; border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 13px; color: #3c4a41; cursor: pointer; }
.wct button:hover { background: #fff; }
.wct button.on { background: #2f7d4f; color: #ffe100; font-weight: 700; }
.wct button.on.risk { background: #b07a00; color: #fff; }
.wcx input:not([type=checkbox]):not([type=hidden]), .wcx select, .wcx textarea { font: inherit; font-size: 13px; background: #eef3ef; border: 1px solid #c9d6cd; border-radius: 10px; padding: 7px 11px; outline: none; color: #1d2a22; width: 100%; box-sizing: border-box; }
.wcx input:focus, .wcx select:focus, .wcx textarea:focus { background: #fff; border-color: #ffe100; box-shadow: 0 0 0 3px rgba(47,125,79,.18); }
.wcx label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #5d6b62; margin-top: 8px; }
.wcx-lab { font-size: 12px; font-weight: 700; color: #5d6b62; margin: 12px 0 6px; }
.wcx-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wcx-row .wcx-lab { margin: 0; }
.wcx-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.wcx-pw { position: relative; display: block; }
.wcx-pw input { padding-right: 62px !important; }
.wcx-pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; background: #fff; border: 1px solid #d9dfd8; border-radius: 999px; padding: 2px 9px; cursor: pointer; }

/* step 1 */
.wcx-callbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f6f9f7; border-radius: 10px; padding: 12px 14px; }
.wcx-phone { font-size: 20px; font-weight: 800; color: #1d2a22; }
.wcx-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wcx-after { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; background: #fff4d9; border: 1px solid #f2c25c; border-radius: 10px; padding: 10px 12px; color: #7a5600; font-size: 13px; }
.wcx-after select { width: auto !important; min-width: 180px; background: #fff !important; }
.wcx-retry { display: inline-flex; gap: 6px; align-items: center; } .wcx-retry input { width: 120px !important; background: #fff !important; }

/* step 2 */
.wcx-quote { margin: 0 0 12px; background: #ecf9f0; border-left: 4px solid #2f7d4f; border-radius: 8px; padding: 10px 14px; font-style: italic; font-size: 15px; color: #1d2a22; }
.wcx-recbox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.wcx-amber { margin-top: 12px; background: #fff4d9; border: 1px solid #f2c25c; border-radius: 10px; padding: 8px 12px; color: #7a5600; font-size: 13px; }
.wcx-pane > .wcx-muted[data-when] { margin-top: 12px; }
.wcx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #9b2c1f; font-weight: 600; }
.wcx-dot { width: 10px; height: 10px; border-radius: 50%; background: #d93025; animation: wcxpulse 1.2s infinite; }
@keyframes wcxpulse { 0% { box-shadow: 0 0 0 0 rgba(217,48,37,.6); } 70% { box-shadow: 0 0 0 8px rgba(217,48,37,0); } 100% { box-shadow: 0 0 0 0 rgba(217,48,37,0); } }

/* step 3 */
.wcx-prog { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #5d6b62; margin-bottom: 10px; }
.wcx-bar { flex: 1; height: 5px; background: #e6ece8; border-radius: 99px; overflow: hidden; } .wcx-bar i { display: block; height: 100%; width: 0; background: #2f7d4f; transition: width .2s; }
.wcx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.wcx-q { background: #f6f9f7; border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; align-content: start; }
.wcx-q.wide { grid-column: 1 / -1; }
.wcx-qt { font-size: 13px; font-weight: 700; color: #1d2a22; display: flex; align-items: center; gap: 6px; }
.wcx-qck { display: none; width: 16px; height: 16px; border-radius: 50%; background: #2f7d4f; color: #ffe100; font-size: 10px; align-items: center; justify-content: center; }
.wcx-q.ans { background: #fff; border-color: #9fd8b1; } .wcx-q.ans .wcx-qck { display: inline-flex; }
.wcx-q.risky { background: #fffaf0; border-color: #f2c25c; } .wcx-q.risky .wcx-qck { background: #b07a00; color: #fff; }
.wcx-qnote { display: none; font-size: 12px; color: #7a5600; } .wcx-q.risky .wcx-qnote { display: block; }
.wcx-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wcx-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wcx-notes { margin-top: 10px !important; }

/* step 4 */
.wcx-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 12px 0 4px; }
.wcx-sum div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #edf2ee; }
.wcx-sum span { color: #6b7a70; } .wcx-sum b { color: #1d2a22; } .wcx-sum b.risk { color: #7a5600; }
.wcx-tasks { display: flex; flex-wrap: wrap; gap: 6px; }
.wcx .wcx-result { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; margin-top: 12px; }
.wcx .wcx-result label { margin: 0; }

/* recording rows + cards */
.wcx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wcx-chead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wcx-chead h3 { margin: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #2f7d4f; }
.wcx-rec { display: flex; align-items: center; gap: 12px; background: #f6f9f7; border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; }
.wcx-play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #2f7d4f; color: #ffe100; font-size: 13px; cursor: pointer; }
.wcx-play:hover { background: #286b44; }
.wcx-recmain { flex: 1; min-width: 0; display: grid; gap: 3px; }
.wcx-recmain b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcx-recmain audio { display: none; }
.wcx-wave { display: block; height: 6px; border-radius: 99px; cursor: pointer; overflow: hidden;
  background: repeating-linear-gradient(90deg, #c9d6cd 0 3px, transparent 3px 5px); }
.wcx-wave i { display: block; height: 100%; width: 0; background: #2f7d4f; }
.wcx-tx { font-size: 12px; margin: -2px 0 8px; } .wcx-tx div { white-space: pre-wrap; }
.wcx-foot { margin-top: 10px; }
@media (max-width: 900px) { .wcx-cards { grid-template-columns: 1fr; } .wcx-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .wcx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wcx-sum { grid-template-columns: 1fr; } .wcx-2 { grid-template-columns: 1fr; } }