/* live page (js/pages/live.js), design "V4 Start" step 3 + the app's live data. Owned by the "start" page builder
   (docs/UI_V4.md). The map, panel, checklist rows and bar styles are in start.css. */

/* Progress bar (design .bar) */
.st-bar { height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; flex: none; }
.st-bar > span {
  display: block; height: 100%; width: var(--w, 0%); background: var(--ac); border-radius: var(--r-pill);
  transition: width 500ms var(--ease);
}

/* The whole job at a glance (live.js paintStep): «الخطوة 2 من 4: التحليل» with one percent for the whole job above the
   bar; under it the time left (when the job knows it) and «نكمل عبر خط آخر…» */
.lv-steprow { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: -8px; }
.lv-step-text { font-size: var(--fs-body); line-height: 1.5; min-width: 0; }
.lv-pct { font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--ac); flex: none; }
.lv-under { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; margin-top: -8px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.6; }
.lv-line { display: inline-flex; align-items: center; gap: 6px; }
.lv-line .ph { font-size: 15px; color: var(--ac); flex: none; }
/* Google (or a limit) stopped the read: the amber notice (home.css .fh-*; full-width button: .lv-fh below) */
.lv-stopbox:empty { display: none; }
.lv-stop-msg:empty { display: none; }
.lv-stop-msg { flex-basis: 100%; }

.lv-step { flex: 1; }
.lv-spacer { flex: 1; }
.lv-open { height: var(--hit-lg); }
.lv-demo {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-inner);
  background: var(--card-2); color: var(--ac); font-size: var(--fs-meta); line-height: 1.6;
}
.lv-demo .ph { font-size: 18px; flex: none; }
.lv-queue { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-ui); }
.lv-queue .ph { font-size: 18px; color: var(--ac); }
.lv-eta { color: var(--muted); font-size: var(--fs-meta); }
.lv-count { font-size: var(--fs-ui); color: var(--muted); margin-top: -6px; }
.lv-count .lv-big { font-size: 24px; color: var(--text); font-weight: 500; }
/* The second check (live.js paintSecond): its line, a clock that ticks with every answer from the server and its own
   thin bar, so a long check on a very big place never looks frozen. The bar is filled from the job's numbers when it
   sends them, else a short segment slides across in the reading direction (--flip: right to left in Arabic, left to
   right in English); with reduced motion the sliding bar is hidden (a still segment would look like a real share) and
   the clock alone shows the check runs. */
.lv-second { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-meta); color: var(--soft-2); line-height: 1.6; }
.lv-second-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-second-line > .ph { font-size: 18px; color: var(--ac); flex: none; }
.lv-second-text { flex: 1 1 12em; min-width: 0; }
.lv-in { white-space: nowrap; }
.lv-chip { background: var(--card-2); border-radius: var(--r-pill); padding: 1px 9px; font-size: var(--fs-small); }
.lv-clock { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted); }
.lv-clock .ph { font-size: 14px; color: var(--ac); }
.lv-sbar { position: relative; height: 4px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; flex: none; }
.lv-sbar > span {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w, 0%); background: var(--ac);
  border-radius: var(--r-pill); transition: width 500ms var(--ease);
}
.lv-sbar.is-busy > span { width: 40%; transition: none; animation: lv-slide 1.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes lv-slide { from { transform: translateX(calc(100% * var(--flip))); } to { transform: translateX(calc(-250% * var(--flip))); } }
html[data-motion="reduce"] .lv-sbar.is-busy { display: none; }
.lv-net { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--alert-amber-text); }
.lv-net .ph { font-size: 16px; }
.lv-status:empty { display: none; }

/* Live feed and topic counts: inner boxes in the panel (design #262626 inner tiles) */
.lv-box { display: flex; flex-direction: column; gap: 10px; }
.lv-box-head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.lv-box-head .ph { font-size: 18px; color: var(--ac); }
.lv-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lv-review {
  background: var(--card-2); border-radius: var(--r-inner); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.lv-review .stars { font-size: var(--fs-meta); align-self: flex-start; }
.lv-snippet { font-size: var(--fs-ui); line-height: 1.7; text-align: start; overflow-wrap: anywhere; }
.lv-tallies { display: flex; flex-direction: column; gap: 10px; background: var(--card-2); border-radius: var(--r-inner); padding: 14px; }
.lv-tally { display: flex; flex-direction: column; gap: 6px; }
.lv-thead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-meta); }
.lv-tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-tcount { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; flex: none; }
.lv-tbar { display: block; height: 6px; }
.lv-tfill {
  display: flex; gap: 2px; height: 100%; width: var(--w, 0%); border-radius: var(--r-pill); overflow: hidden;
  transition: width var(--t-bar) var(--ease);
}
.lv-tfill > span { flex: 0 1 0; min-width: 0; border-radius: var(--r-pill); transition: flex-grow var(--t-bar) var(--ease); }
.lv-tfill > .good { background: var(--ac); }
.lv-tfill > .mixed { background: var(--dot-off); }
.lv-tfill > .bad { background: var(--bad); }

/* «اقرأ كل الفترة» on the finish screen (live.js offerFullHistory; the notice itself: home.css .fh-*) */
.lv-fh .fh-act { padding-inline-start: 0; }
.lv-fh .fh-btn { width: 100%; height: var(--hit-lg); }