/* The "Still here?" check-in line on a live read (the bar at the top of every page, and the reading screen).
   Three states, each with an icon AND words so colour is never the only signal:
   amber = the countdown to the check-in has started, red = the last five minutes or the question itself, away = the timer paused itself. */
.live-ci{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;padding:10px 14px;border-radius:14px;border:1px solid var(--edge);background:rgba(var(--pn),.55);line-height:1.3}
.live-ci .ci-ico{flex:none;display:inline-flex}
.live-ci .ci-txt{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px}
.live-ci .ci-txt b{font-weight:600;font-variant-numeric:tabular-nums}
.live-ci .ci-sub{font-size:.8125rem;color:var(--ink2)}
.live-ci .ci-btns{display:flex;flex-wrap:wrap;gap:8px;flex:1 0 100%}
.live-ci .ci-note{flex:1 0 100%;font-size:.75rem;color:var(--mute)}
.live-ci.is-amber{border-color:#C98A12;background:rgba(224,162,27,.14)}
.live-ci.is-amber .ci-ico{color:#C98A12}
.live-ci.is-red{border-color:var(--red);background:rgba(var(--rd),.14)}
.live-ci.is-red .ci-ico{color:var(--red)}
.live-ci.is-away{border-color:var(--red);background:rgba(var(--rd),.1)}
.live-ci.is-away .ci-ico{color:var(--red)}
#live .live-ci{margin-top:2px}
@media (max-width:520px){.live-ci{padding:10px 12px}.live-ci .btn{flex:1 1 auto}}