/* IVR → MoMo agent page. Builds on app.css (TeeOff app layer, APP.md values) under the shared .top header (60px).
   Scoped to .ivr so demo.css's dashboard classes (.step, .pill, .orb margin, .pad) don't leak in either direction. */
.ivr .screen,.ivr .scr{min-height:calc(100dvh - 60px)}
.ivr .pill{padding:6px 12px;background:var(--navy);color:var(--yellow)}
.ivr .pill.ok{background:#dcefe3;color:var(--ok-l)}
.ivr .pill.miss{background:#f6dcd5;color:#8a2b1a}
.ivr .orb{margin:0}
.ivr .hd span.back{visibility:hidden}
.ivr .note{margin-top:10px}

/* step 1: caller cards — name, number, the reason for calling, the date of birth in big figures */
.callers{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 0 4px}
.ivr .cu{min-height:0;gap:4px;padding:14px 16px 14px}
.ivr .cu>b{font-size:24px;line-height:1.15}
.cu .story{color:var(--navy);margin-top:2px}
.cu .dob{display:grid;margin-top:auto;padding-top:8px}
.cu .dob small{font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.cu .dob em{font:700 30px/1.05 var(--display);font-style:normal;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.cu[aria-pressed=true] .story{color:var(--cream)}
.cu[aria-pressed=true] .dob small{color:var(--dim-d)}
.cu[aria-pressed=true] .dob em{color:var(--yellow)}

/* step 2: options + things you can try */
.tries{max-width:620px;margin-top:4px;box-shadow:none}
.tries ul,.tryd ul{list-style:none;display:grid;gap:6px;margin-top:10px}
.tries li{font-size:15px;padding-left:14px;position:relative}
.tries li::before{content:"·";position:absolute;left:3px;font-weight:700}

/* ---------- call (navy) ---------- */
.ivr .callscr{height:auto;min-height:calc(100dvh - 60px);display:flex;flex-direction:column;gap:12px;overflow:visible}
.ivr .cl,.ivr .cr{display:contents}
.ivr .ctop{order:0}
.ivr .hero{order:1;align-items:start}
.route{order:2}
.ivr .part{order:3}
.kp{order:4}
.ivr .pane{order:5}
.ivr .ctl{order:6;position:sticky;bottom:0;background:var(--navy);z-index:2}
.cap small{display:block;font-size:14px;line-height:1.35;color:var(--dim-d);margin-top:6px}
.ivr .cap p{font-size:19px;-webkit-line-clamp:4;max-height:5.2em;min-height:1.3em}
.ivr .cap p:empty{display:none}

/* who you are: the date of birth to give, big */
.ivr .chk{grid-template-columns:minmax(0,1fr)}
.ivr .chk .nm{font-weight:600;color:var(--navy)}
.born b{font-size:38px}
.tryd summary{font-size:13px;font-weight:600;color:var(--dim)}
.tryd li{font-size:13.5px;color:var(--navy)}

/* keypad: full during the MTN menu and in keypad-only calls; one line ("keypad also works") while talking */
.kp{margin:0 16px;display:grid;justify-items:center;gap:6px}
.kp .keys{display:grid;grid-template-columns:repeat(3,64px);gap:8px 18px}
.kp .keys button{height:48px;border-radius:24px;background:var(--panel);color:var(--cream);font:700 22px var(--display);transition:transform .12s var(--ease),background .18s}
.kp .keys button:active{transform:scale(.94);background:var(--yellow);color:var(--navy)}
.kp .typed{min-height:0;font-size:20px}
.kp .typed:empty{display:none}
.kp-more{justify-self:stretch;text-align:left;font-size:14px;color:var(--dim-d);padding:10px 14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--rule-d)}
.kp-more u{color:var(--cream);text-underline-offset:3px}
.kp.compact .keys{display:none}
.kp.compact.open .keys{display:grid}
.kp.off .keys button{opacity:.35;pointer-events:none}

/* where the call is: a horizontal tracker */
.route{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0 16px;padding:14px 6px 12px;background:var(--panel);border-radius:14px}
.route li{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;gap:5px;min-width:0;padding:0 2px}
.route li::before{content:"";position:absolute;top:6px;left:-50%;right:50%;height:2px;background:var(--rule-d)}
.route li:first-child::before{display:none}
.route li i{width:14px;height:14px;border-radius:50%;border:2px solid var(--rule-d);background:var(--panel);position:relative;z-index:1;transition:background .3s,border-color .3s}
.route li.done::before,.route li.now::before,.route li.bad::before{background:var(--ok)}
.route li.done i{background:var(--ok);border-color:var(--ok)}
.route li.now i{background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 5px rgba(254,205,115,.2)}
.route li.bad i{background:var(--red);border-color:var(--red)}
.route b{font-weight:600;font-size:12.5px;line-height:1.2;color:var(--cream)}
.route li.wait b{color:var(--fine)}
.route small{font-size:11px;line-height:1.25;color:var(--dim-d);overflow-wrap:anywhere}
.route small:empty{display:none}

/* transcript: who spoke, recorded or live, English under the Luganda */
.ivr .pane{margin:0 16px;max-height:60dvh;display:flex;flex-direction:column;overflow:hidden}
.ivr .pane .convo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
.pane-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ivr .pane .ph-l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-d)}
.bts-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-d);padding:7px 12px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--rule-d);transition:background .18s,color .18s}
.bts-t[aria-pressed=true]{background:var(--cream);color:var(--navy);box-shadow:none}
.convo .who{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-d);margin-bottom:3px}
.convo li.customer .who{color:var(--dim)}
.convo .tag{font-style:normal;padding:1px 7px;border-radius:99px;margin-left:6px;box-shadow:inset 0 0 0 1px var(--rule-d)}
.convo .tag.live{background:var(--yellow);color:var(--navy);box-shadow:none}
.convo .en{display:block;font-size:13.5px;line-height:1.4;color:var(--dim-d);margin-top:4px}
.convo li.customer .en{color:var(--dim)}
.convo li.key{justify-self:center;max-width:none;background:none;padding:2px 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-d);text-align:center}
.convo li.bts{display:none}
.pane.bts-on .convo li.bts{display:block;max-width:none;justify-self:stretch;background:transparent;box-shadow:inset 0 0 0 1px var(--rule-d);font-size:13px}
.bts dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 12px}
.bts dt{color:var(--dim-d)}
.bts dd{overflow-wrap:anywhere}

/* result: the conversation in light bubbles (yellow never on cream: the live tag turns navy) */
.convo.light .who,.convo.light li.key{color:var(--dim)}
.convo.light li.customer .who{color:var(--dim-d)}
.convo.light li.agent .en{color:var(--dim)}
.convo.light li.customer .en{color:var(--dim-d)}
.convo.light .tag{box-shadow:inset 0 0 0 1px var(--fine)}
.convo.light .tag.live{background:var(--navy);color:var(--yellow)}
.result .kicker{display:block;margin-top:16px}

@media (min-width:1024px){
  .ivr .screen.pk{display:grid;grid-template-columns:minmax(340px,32%) minmax(0,1fr)}
  .ivr .screen.pk[hidden]{display:none!important}
  .ivr .guide{height:calc(100dvh - 60px);justify-content:flex-start}
  .ivr .guide>div{margin:auto 0}
  .pk .scr{width:100%;max-width:880px;padding:24px 40px 0;justify-self:center}
  .pk .lead{font-size:38px}
  .pk .dock{grid-auto-flow:column;grid-auto-columns:minmax(0,260px);justify-content:end;padding-bottom:32px;box-shadow:none}
  .callers{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* call: you (orb, card, keypad, controls) on the left; route + transcript on the right */
  .ivr .callscr{height:calc(100dvh - 60px);min-height:0;display:grid;grid-template-columns:minmax(360px,420px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:24px;row-gap:14px;padding:0 24px;overflow:hidden}
  .ivr .cl{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .ivr .cr{display:flex;flex-direction:column;gap:14px;min-height:0;padding-bottom:16px}
  .ivr .cap p{font-size:23px}
  .route,.kp,.ivr .pane{margin:0}
  .route{padding:16px 10px 14px}
  .route b{font-size:13.5px}
  .ivr .pane{flex:1;max-height:none}
  .result details .convo{max-height:62dvh;overflow-y:auto;padding-right:4px}
  .ivr .ctl{margin-top:auto;position:static}
  .born b{font-size:44px}
}
@media (max-width:1023px){
  .route small{display:none}
  .route b{font-size:10.5px;letter-spacing:-.01em}
}
.hd a.back{color:inherit}