/* owner: admin-v2 B3 · contract: server/ADMIN-V2.md sec. 5.3, 3.4 (calls.css: the שיחות page)
   The list beside the pinned details (5fr and 7fr, the details sticky with their own scroll; at 900 and down one column: the
   details replace the band and the list, and the back link shows), the outcome box, the one player, the transcript bubbles
   (Maya's in ink, the other side's on ground), the live stage on its dark card and her question on the page's one spark.
   Every rule sits under .view-calls; rows, chips, buttons, cards, kv, notices and the surface inks are base.css. */

/* ---------- the band: the filter tray with the refresh beside it ---------- */
.view-calls .ctools { display: flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 32px; }
.view-calls .ctools .tray { min-width: 0; }
.view-calls .ctools .xb { margin-inline-start: 0; }

/* ---------- the list and the details ---------- */
.view-calls .md { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.view-calls .list { padding: 10px; }
.view-calls .list > .row:first-child, .view-calls .day + .row { border-top-color: transparent; }
.view-calls .list > .notice { margin: 4px; }
.view-calls .day { padding: 14px 14px 6px; font-size: 14px; font-weight: 500; color: var(--fgMuted); }
.view-calls .detail {
  position: sticky; top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start;
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--stone) transparent;
}
.view-calls .detail > * { margin-top: 0; }
.view-calls .dh { display: flex; align-items: center; gap: 14px; }
.view-calls .dh .ic { width: 56px; height: 56px; }
.view-calls .dmain { flex: 1; min-width: 0; }
.view-calls .dtitle { font-size: 32px; line-height: 1.02; letter-spacing: -.02em; font-weight: 500; overflow-wrap: anywhere; }
.view-calls .dsub { margin-top: 6px; font-size: 14px; color: var(--fgMuted); }
.view-calls .dmain > .chip { margin-top: 8px; }
.view-calls .back { display: none; }
.view-calls .dsec { display: grid; gap: 10px; }
.view-calls .dsec > * { margin-top: 0; }

/* the outcome box, and the light boxes on ground inside the details */
.view-calls .outcome { display: grid; justify-items: start; gap: 12px; padding: 22px; border-radius: var(--r); background-color: var(--ground); }
.view-calls .outcome > * { margin-top: 0; }
.view-calls .outcome .lead { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.view-calls .outcome .kv { justify-self: stretch; }
.view-calls .outcome .kv :is(dt, dd) { border-bottom-color: rgba(0, 0, 0, .08); }
.view-calls .flags { display: flex; flex-wrap: wrap; gap: 8px; }
.view-calls .detail .msg { padding: 20px; background-color: var(--ground); }
.view-calls :is(.outcome, .bnote, .detail .msg) .chip:not(.strong) { background-color: var(--card); }
.view-calls .bnote { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--r); background-color: var(--ground); }
.view-calls .bnote .ic { background-color: var(--card); }
.view-calls .bmain { flex: 1; min-width: 0; }
.view-calls .btitle { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.view-calls .bnote .note { margin-top: 2px; overflow-wrap: anywhere; }
.view-calls .bnote .chip { margin-top: 8px; }

/* the one player: a scrubber that fills from the start side, as the sketch's track */
.view-calls .player { display: flex; align-items: center; gap: 14px; }
.view-calls .track {
  flex: 1; min-width: 0; height: 44px; margin: 0; background-color: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.view-calls .track:disabled { cursor: default; opacity: .5; }
.view-calls .track::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r); background-color: var(--stone);
  background-image: linear-gradient(to left, var(--solid) var(--p, 0%), transparent var(--p, 0%));
}
.view-calls .track::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -5px; border: 0; border-radius: 50%; background-color: var(--solid); -webkit-appearance: none; appearance: none;
}
.view-calls .track::-moz-range-track { height: 6px; border-radius: var(--r); background-color: var(--stone); }
.view-calls .track::-moz-range-progress { height: 6px; border-radius: var(--r); background-color: var(--solid); }
.view-calls .track::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background-color: var(--solid); }
.view-calls .time { flex: none; font-size: 14px; color: var(--fgMuted); font-variant-numeric: tabular-nums; }
.view-calls .player + .note { margin-top: 0; }
.view-calls .player + .note:empty { display: none; }

/* ---------- the transcript ---------- */
.view-calls .script { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.view-calls .bub.maya {
  --fg: #fff; --fgMuted: var(--onDeep); --fgSoft: rgba(255, 255, 255, .14);
  justify-self: start; background-color: var(--deep); color: var(--fg);
}
.view-calls .bub.them {
  --fg: var(--ink); --fgMuted: var(--muted); --fgSoft: rgba(0, 0, 0, .06);
  justify-self: end; background-color: var(--ground); color: var(--fg);
}
.view-calls .bub.partial { opacity: .7; }
.view-calls .bub .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--fgMuted); }
.view-calls :is(.lat, .tag) {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 8px; border-radius: var(--chip);
  font-size: 12px; font-weight: 500; line-height: 1.2;
}
.view-calls .lat { background-color: var(--fgSoft); color: var(--fg); }
.view-calls .lat.slow { background-color: var(--wait); color: var(--onSpark); }
.view-calls .tag { box-shadow: inset 0 0 0 1px currentColor; }
.view-calls .tx-event { justify-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13px; color: var(--fgMuted); text-align: center; }
.view-calls .tx-owner {
  justify-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 16px;
  border-radius: var(--r); background-color: var(--cta); color: var(--onCta); font-size: 14px; font-weight: 500; overflow-wrap: anywhere;
}
.view-calls .tx-empty { color: var(--fgMuted); }

/* technical data */
.view-calls .tech summary { display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--fgMuted); }
.view-calls .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin-top: 6px; }
.view-calls .metrics dt { font-size: 13px; color: var(--fgMuted); }
.view-calls .metrics dd { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.view-calls .metrics :is(.good, .slow)::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.view-calls .metrics .good::before { background-color: var(--ok); }
.view-calls .metrics .slow::before { background-color: var(--wait); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.view-calls .tech .note { overflow-wrap: anywhere; }

/* ---------- the live stage ---------- */
.view-calls .stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.view-calls .stage > * { margin-top: 0; }
.view-calls .shead { display: flex; align-items: center; gap: 12px; }
.view-calls .smain { flex: 1; min-width: 0; }
.view-calls .stitle { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; font-weight: 500; overflow-wrap: anywhere; }
.view-calls .sstate { margin-top: 2px; font-size: 14px; }
.view-calls .stimer { flex: none; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.view-calls .listen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.view-calls .listen .btn.danger { margin-inline-start: auto; }
.view-calls .vol { display: inline-flex; align-items: center; gap: 8px; color: var(--fgMuted); }
.view-calls .vol input { width: 120px; height: 44px; margin: 0; accent-color: #fff; }
.view-calls .level { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.view-calls .level i {
  width: 4px; height: calc(4px + var(--lv, 0) * 18px); border-radius: 2px; background-color: var(--fg);
  opacity: calc(.35 + var(--lv, 0)); transition: height 80ms linear;
}
.view-calls .level i:nth-child(2) { height: calc(4px + var(--lv, 0) * 14px); }
.view-calls .level i:nth-child(3) { height: calc(4px + var(--lv, 0) * 22px); }
.view-calls .level i:nth-child(4) { height: calc(4px + var(--lv, 0) * 12px); }
.view-calls .level i:nth-child(5) { height: calc(4px + var(--lv, 0) * 17px); }
.view-calls .lnote { font-size: 13px; color: var(--fgMuted); }
.view-calls .lnote:empty, .view-calls .dslot:empty { display: none; }
.view-calls .dslot { display: grid; gap: 12px; }
.view-calls .sscroll {
  max-height: min(52dvh, 520px); overflow-y: auto; overscroll-behavior: contain; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.view-calls .sscroll:focus-visible { outline-offset: -2px; }
.view-calls .stage .bub.maya { background-color: rgba(255, 255, 255, .12); }
.view-calls .stage .bub.them { background-color: var(--card); }

/* her question: the page's one spark, with its own inks inside the dark stage */
.view-calls .decision {
  --fg: var(--onSpark); --fgOn: var(--spark); --fgMuted: var(--onSpark); --fgLine: var(--onSpark);
  --fgSoft: rgba(0, 0, 0, .07); --fgFill: rgba(0, 0, 0, .08); --ring: var(--ink);
  display: grid; gap: 12px; padding: 22px; border-radius: 20px; background-color: var(--spark); color: var(--fg);
}
.view-calls .decision > * { margin-top: 0; }
.view-calls .dtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.view-calls .dlabel { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.view-calls .decision .count { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.view-calls .decision .count[data-urgent="true"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--bad); animation: blink 1.2s ease-in-out infinite;
}
.view-calls .dq { font-size: 22px; line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.view-calls .dchips { display: flex; flex-wrap: wrap; gap: 8px; }
.view-calls .dbar { display: block; height: 6px; overflow: hidden; border-radius: var(--r); background-color: rgba(0, 0, 0, .12); }
.view-calls .dbar i { display: block; width: var(--p, 100%); height: 100%; border-radius: inherit; background-color: var(--ink); transition: width 1s linear; }
.view-calls .decision .acts { margin-top: 0; }
.view-calls .decision .acts .btn { flex: 1 1 140px; height: 52px; font-size: 16px; }
.view-calls .decision .field { margin-top: 0; }
.view-calls .dinput { display: flex; gap: 8px; }
.view-calls .dinput .input { flex: 1; min-width: 0; }
.view-calls .dstatus { font-size: 14px; font-weight: 500; }
.view-calls .dstatus:empty { display: none; }

/* ---------- widths ---------- */
@media (max-width: 900px) {
  .view-calls .md { grid-template-columns: minmax(0, 1fr); }
  .view-calls .detail { position: static; max-height: none; overflow: visible; }
  .view-calls[data-detail="false"] .detail, .view-calls[data-detail="true"] :is(.band, .list) { display: none; }
  .view-calls .back { display: inline-grid; }
}
@media (max-width: 760px) {
  .view-calls .ctools { margin-top: 26px; }
  .view-calls .list { padding: 6px; }
  .view-calls .dh { gap: 12px; }
  .view-calls .dh .ic { width: 44px; height: 44px; }
  .view-calls .dtitle { font-size: 28px; }
  .view-calls .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-calls :is(.stitle, .stimer) { font-size: 19px; }
  .view-calls .vol input { width: 96px; }
  .view-calls .decision { padding: 18px; }
}