:root{
  --yellow:#FFB43B;--blue:#9BCEE1;--purple:#E0B8EE;--green:#54A876;--red:#E0503C;
  --cream:#FBF6EA;--neutral:#E4DDCC;--ink:#212121;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);
  font:18px/1.35 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.top{display:flex;gap:16px;align-items:center;padding:14px 20px;background:var(--ink);color:var(--cream)}
.top strong{flex:1;font-size:20px}
.muted{opacity:.7;font-size:15px}
main{max-width:980px;margin:0 auto;padding:20px}
h1{font-size:28px;margin:0 0 14px}
h2{font-size:20px;margin:22px 0 10px}
button,input{font:inherit;color:inherit}
button{min-height:56px;padding:12px 22px;border:3px solid var(--ink);border-radius:14px;background:#fff;font-weight:700;cursor:pointer}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--green);color:#fff;border-color:var(--ink);min-height:76px;font-size:22px;width:100%}
button.warn{background:var(--yellow)}
button.danger{background:#fff;border-color:var(--red);color:var(--red)}
button.ghost{background:transparent;color:var(--cream);border-color:var(--cream);min-height:44px;padding:6px 14px}
input{min-height:56px;padding:10px 16px;border:3px solid var(--ink);border-radius:14px;background:#fff;width:100%}
.row{display:flex;gap:12px;align-items:stretch}
.row>input{flex:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:16px}
.queue-item{display:flex;gap:14px;align-items:center;width:100%;text-align:left;margin-bottom:10px;min-height:76px}
.queue-item .num{font-size:24px;font-weight:800;min-width:130px}
.queue-item .meta{flex:1}
.pill{display:inline-block;padding:4px 12px;border-radius:99px;border:2px solid var(--ink);font-size:14px;font-weight:700;background:var(--neutral)}
.pill.s-RESULT_READY{background:var(--blue)}
.pill.s-CHECKED_IN,.pill.s-DEMO_IN_PROGRESS{background:var(--yellow)}
.pill.s-DEMO_COMPLETED,.pill.s-SKIPPED_DEMO,.pill.s-FOLLOW_UP_SELECTED{background:var(--green);color:#fff}
.pill.bad{background:var(--red);color:#fff}
.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.step{border:3px solid var(--ink);border-radius:14px;padding:12px;text-align:center;font-weight:700;background:var(--neutral)}
.step.done{background:var(--green);color:#fff}
.step.now{background:var(--yellow)}
.stops{list-style:none;padding:0;margin:0}
.stops li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:2px dashed var(--neutral)}
.dot{width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);flex:none;background:#fff}
.dot.on{background:var(--green)}
.banner{position:sticky;top:0;z-index:5;background:var(--red);color:#fff;padding:10px 20px;font-weight:700;text-align:center}
.banner.sync{background:var(--yellow);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--cream);padding:14px 22px;border-radius:14px;max-width:90vw;z-index:9}
.back{margin-bottom:14px;min-height:48px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px}
.kv dt{opacity:.65}.kv dd{margin:0;font-weight:600}
.err{color:var(--red);font-weight:700;min-height:24px}
@media (max-width:700px){.progress{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){button:active{transform:none}}
button.primary.auto{width:auto}
.gap{margin-top:12px}
.grow{flex:1}
.titlebar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.titlebar h1{margin:0}

/* progress bar */
.pbar{margin:16px 0 18px}
.pbar-track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:26px;border:3px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--neutral)}
.pseg{border-right:3px solid var(--ink)}
.pseg:last-child{border-right:0}
.pseg.done{background:var(--green)}
.pseg.now{background:var(--yellow)}
.pbar-labels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:8px;font-size:15px;font-weight:600;text-align:center}
.pbar-labels .done{opacity:1;font-weight:800}
.pbar-labels .now{opacity:1;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.pbar-labels span:not(.done):not(.now){opacity:.6}
/* station buttons: black, so they stand apart */
.stops li button{background:var(--ink);color:var(--cream);border-color:var(--ink);min-width:120px}
/* secondary actions share one style; "walked away" keeps the red stroke */
.grid button{background:#fff;border-color:var(--ink);color:var(--ink)}
.grid button.danger{border-color:var(--red);color:var(--red)}

/* queue tabs */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.tabs .tab{min-height:48px}
.tabs .tab.on{background:var(--ink);color:var(--cream)}

/* KPI progress: Firm yellow, Goal green, Stretch dark green */
:root{--dgreen:#1F6B3F}
.kpi{margin:14px 0 6px;display:grid;gap:18px}
.kpi h2{margin:0}
.kblock{display:grid;gap:6px}
.khead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ktitle{font-weight:800;font-size:18px}
.kval strong{font-size:34px;line-height:1}
.kbar-track{display:flex;height:26px;border:3px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--neutral)}
.kzone{height:100%;border-right:3px solid var(--ink);background:var(--neutral);flex:none}
.kzone:last-child{border-right:0}
.kfill{height:100%}
.kfill.k-firm{background:var(--yellow)}
.kfill.k-goal{background:var(--green)}
.kfill.k-stretch{background:var(--dgreen)}
.kbar-labels{display:flex;font-size:13px;font-weight:700}
.k-lab{display:block;text-align:right;flex:none;padding-right:2px}
.kfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.kbadge{display:inline-block;padding:4px 12px;border-radius:99px;border:2px solid var(--ink);font-size:14px;font-weight:700;background:var(--neutral)}
.kbadge.k-firm{background:var(--yellow)}
.kbadge.k-goal{background:var(--green);color:#fff}
.kbadge.k-stretch{background:var(--dgreen);color:#fff}

/* who checked the visitor in */
.pill.tag{background:#fff}