/* No-Show Saver demo — light-only by design (pitched in person, daylight) */
:root{
  --ground:#EDF2EF; --card:#FFFFFF; --ink:#1C2B27; --ink2:#5D7069; --line:#D7E1DB;
  --confirm:#257A50; --confirm-soft:#E4F2EA;
  --risk:#B4690E;    --risk-soft:#FBF0DF;
  --lost:#B3372E;    --lost-soft:#F9E9E7;
  --save:#0E7C6B;    --save-soft:#DFF0ED;
  --bubble-in:#E7EDEA; --bubble-out:#1C2B27;
  --shadow:0 1px 2px rgba(28,43,39,.07), 0 5px 16px rgba(28,43,39,.06);
  --disp:Cambria, Georgia, 'Times New Roman', serif;
  --body:'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:'Cascadia Mono', Consolas, ui-monospace, monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:15px/1.5 var(--body);
  padding:0 22px 40px; max-width:1220px; margin-inline:auto;
}
button{font:inherit; cursor:pointer}
button, input{touch-action:manipulation}
h1, h2{text-wrap:balance}
:focus-visible{outline:2px solid var(--save); outline-offset:2px; border-radius:4px}

/* ---------- header ---------- */
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:26px 0 12px}
.eyebrow{font:600 11.5px var(--body); letter-spacing:2.2px; text-transform:uppercase; color:var(--save)}
.eyebrow em{font-style:normal; color:var(--ink2); letter-spacing:1.4px; margin-left:8px; text-transform:none; font-weight:400}
h1{font:700 clamp(26px,3.6vw,40px)/1.08 var(--disp); margin:4px 0 2px; letter-spacing:.2px}
#practiceName{border-bottom:2px dashed transparent; padding-bottom:1px}
#practiceName:hover{border-bottom-color:var(--line)}
#practiceName:focus{outline:none; border-bottom-color:var(--save)}
.sub{color:var(--ink2); font-size:13px}

.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--card)}
.seg button{border:0; background:none; padding:8px 13px; color:var(--ink2); font-size:13.5px}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink); color:#fff}
.btn{border:1px solid var(--line); background:var(--card); border-radius:9px; padding:9px 16px; font-weight:600; font-size:14px; color:var(--ink); box-shadow:var(--shadow); transition:transform .12s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--save); border-color:var(--save); color:#fff}
.btn[disabled]{opacity:.5; cursor:default}

.tally{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--save); border-radius:10px; padding:10px 18px; box-shadow:var(--shadow); text-align:right}
.tally-label{display:block; font:600 10.5px var(--body); letter-spacing:1.8px; text-transform:uppercase; color:var(--ink2)}
.tally b{font:700 30px/1.15 var(--disp); color:var(--save); font-variant-numeric:tabular-nums}
.tally b.pop{animation:pop .35s var(--ease-out)}
@keyframes pop{40%{transform:scale(1.12)}}

/* ---------- reminder ladder ---------- */
.ladder{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0 16px; color:var(--ink2); font-size:12.5px}
.ladder .rung b{font-family:var(--mono); font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:1px 7px; margin-right:6px; font-size:11.5px}
.ladder .arrow{color:var(--line)}

/* ---------- cockpit ---------- */
.cockpit{display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:18px; align-items:start}
@media (max-width:960px){
  .cockpit{grid-template-columns:1fr}
  .phoneWrap{max-width:400px; margin-inline:auto; width:100%}
}

/* board */
.board ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.appt{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:12px 15px; display:grid; grid-template-columns:74px minmax(0,1fr) auto; gap:4px 12px; align-items:baseline; transition:border-color .3s}
.appt .t{font:600 13px var(--mono); color:var(--ink2)}
.appt .who{font-weight:700; font-size:15.5px}
.appt .who small{font-weight:400; color:var(--ink2); font-size:13px; margin-left:6px}
.appt .val{font:700 15px var(--mono); font-variant-numeric:tabular-nums; text-align:right}
.appt .state{grid-column:2/4; font-size:13px; color:var(--ink2)}
.appt .state b{font-weight:700}
.appt.s-scheduled{border-left-color:var(--line)}
.appt.s-reminded{border-left-color:var(--ink2)}
.appt.s-confirmed{border-left-color:var(--confirm)} .appt.s-confirmed .state b{color:var(--confirm)}
.appt.s-resched{border-left-color:var(--save)}      .appt.s-resched .state b{color:var(--save)}
.appt.s-filled{border-left-color:var(--save)}       .appt.s-filled .state b{color:var(--save)}
.appt.s-risk{border-left-color:var(--risk); animation:riskpulse 1.7s var(--ease-io) infinite}
.appt.s-risk .state b{color:var(--risk)}
@keyframes riskpulse{50%{box-shadow:0 0 0 4px var(--risk-soft)}}

.statusline{min-height:20px; color:var(--ink2); font-size:13px; margin:10px 2px 0}

.endcard{background:var(--save-soft); border:1px solid var(--line); border-left:4px solid var(--save); border-radius:10px; padding:16px 18px; margin-top:12px}
.endcard b{font:700 21px var(--disp); color:var(--save)}
.endcard p{margin:6px 0 0; color:var(--ink); font-size:14px}
.endcard small{color:var(--ink2)}

/* ---------- phone ---------- */
.phoneCaption{margin:0 0 8px; text-align:center; font:600 12px var(--body); letter-spacing:1.6px; text-transform:uppercase; color:var(--ink2)}
.phone{background:var(--ink); border-radius:26px; padding:10px; box-shadow:var(--shadow)}
.phone-top{background:#243733; color:#fff; border-radius:18px 18px 0 0; padding:10px 16px 8px; display:flex; flex-direction:column}
.phone-top b{font-size:14.5px}
.phone-top span{font-size:11px; opacity:.65}
.thread{background:#F6F8F7; height:400px; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:8px; scroll-behavior:smooth}
.msg{max-width:82%; padding:8px 12px; border-radius:15px; font-size:13.8px; line-height:1.4; animation:arrive .22s var(--ease-out); white-space:pre-line; overflow-wrap:break-word}
.msg.in{background:var(--bubble-in); color:var(--ink); align-self:flex-start; border-bottom-left-radius:5px}
.msg.out{background:var(--bubble-out); color:#fff; align-self:flex-end; border-bottom-right-radius:5px}
.msg.meta{background:none; color:var(--ink2); font-size:11.5px; align-self:center; animation:none; padding:2px 0}
@keyframes arrive{from{opacity:0; transform:translateY(7px)}}
.composer{background:#F6F8F7; border-radius:0 0 18px 18px; padding:8px 10px 12px; border-top:1px solid var(--line)}
.chips{display:flex; gap:7px; flex-wrap:wrap; min-height:0; margin-bottom:6px}
.chips:empty{margin:0}
.chip{border:1px solid var(--save); color:var(--save); background:#fff; border-radius:16px; padding:4px 13px; font-size:13px; font-weight:600; transition:transform .12s var(--ease-out)}
.chip:active{transform:scale(.95)}
.inputrow{display:flex; gap:8px}
#msgInput{flex:1; border:1px solid var(--line); border-radius:16px; padding:7px 13px; font:14px var(--body); background:#fff; min-width:0}
#msgInput:disabled{background:#EDF1EF}
.send{width:34px; height:34px; border-radius:50%; border:0; background:var(--save); color:#fff; font-size:16px; font-weight:700; flex:none}
.send:disabled{background:var(--line); cursor:default}
.demoNote{margin:8px 4px 0; text-align:center; color:var(--ink2); font-size:11.5px}

/* flying value chip */
.flychip{position:fixed; z-index:50; font:700 14px var(--mono); color:var(--save); background:var(--save-soft); border:1px solid var(--save); border-radius:14px; padding:2px 10px; pointer-events:none; transition:transform .5s var(--ease-io), opacity .5s; will-change:transform}

/* ---------- ROI ---------- */
.roi{background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:18px 20px; margin-top:20px}
.roi h2{font:700 17px var(--disp); margin:0 0 12px; letter-spacing:.3px}
.roi-grid{display:flex; gap:22px; flex-wrap:wrap; align-items:flex-end}
.roi-grid label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink2); font-weight:600}
.roi-grid input{width:110px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:600 15px var(--mono); color:var(--ink); text-align:right; background:#fff}
.roi-out{margin-left:auto; text-align:right}
.roi-out span{display:block; font:600 10.5px var(--body); letter-spacing:1.6px; text-transform:uppercase; color:var(--ink2)}
.roi-out b{font:700 32px/1.2 var(--disp); color:var(--save); font-variant-numeric:tabular-nums}
.roi-out small{display:block; color:var(--ink2); font-size:12px}
.roi-src{margin:12px 0 0; color:var(--ink2); font-size:12.5px; max-width:70ch}
@media (max-width:700px){ .roi-out{margin-left:0; text-align:left} }

footer{margin-top:18px; color:var(--ink2); font-size:12.5px; text-align:center}
.linky{border:0; background:none; color:var(--save); text-decoration:underline; padding:0; font-size:12.5px}

/* fast-forward + reduced motion */
body.fast *, body.fast{transition-duration:0s !important; animation:none !important; scroll-behavior:auto !important}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:0s !important; animation:none !important; scroll-behavior:auto !important}
}