/* sessions.css — UI overhaul (sessions agent). Loaded after replay.css.
   All classes here are prefixed `sx-` and owned by the sessions list,
   the replay player and the user timeline. */

/* Numbers: tabular figures, body font (mono stays for ids/code). */
.sx-num {
  font-variant-numeric: tabular-nums;
}
.sx-tbl td,
.sx-tbl th {
  font-variant-numeric: tabular-nums;
}

/* ---------- Page head ---------- */
/* In-hub sessions uses the shared compact head (pageHead compact); the
   count line under it is secondary meta text. */
.sx-count {
  font-size: 12px;
  padding: 0 0 8px;
}

/* ---------- Filter bar ---------- */
.sx-filters-wrap {
  position: relative;
}
/* One line on laptop: search flexes, everything else keeps its width. */
.sx-filters {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
/* One control height across the filter row (H6): inputs, selects, dates
   and filter-row buttons all sit on --ctl-h (38px / 44px on phones). */
.sx-filters .btn,
.sx-filters .field-date,
.sx-filters select,
.sx-filters .search {
  height: var(--ctl-h, 38px);
  min-height: var(--ctl-h, 38px);
  box-sizing: border-box;
}
.sx-filters .btn {
  align-items: center;
}
.sx-filters .search input {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
/* Date labels stay small uppercase wherever the range is moved (the
   replay.css rule is scoped to .filters-bar; the phone sheet is not). */
.sx-daterange .field-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
  white-space: nowrap;
}
.sx-filters .search {
  width: auto;
  flex: 1 1 150px;
  min-width: 110px;
}
.sx-slot {
  display: inline-flex;
  align-items: center;
}
.sx-slot:empty {
  display: none;
}
.sx-daterange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sx-daterange .field-date {
  min-width: 0;
}
.sx-quick-chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: nowrap;
}
/* Quick chips read as words, not spaced capitals. */
.sx-filters .chip,
.sx-quick-chips .chip,
.sx-panel-chips .chip,
.sx-active-chip {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
  white-space: nowrap;
}
.sx-views {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex: none;
}
.sx-views-btn {
  white-space: nowrap;
}
.sx-views-panel {
  min-width: 220px;
}
.sx-views-sep {
  border-top: 1px solid #ececec;
  margin: 4px 0;
}
.sx-filter-btn {
  white-space: nowrap;
  flex: none;
}
.sx-wide {
  min-width: 170px;
}
@media (max-width: 1300px) {
  .sx-filters {
    flex-wrap: wrap;
  }
  .sx-quick-chips {
    flex-wrap: wrap;
  }
}

/* Active-filter chips under the bar. */
.sx-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 2px;
}
.sx-active-chips[hidden] {
  display: none;
}

/* ---------- Filter panel: popover on laptop, bottom sheet on phone ---------- */
.sx-filter-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 16px 40px rgba(10, 10, 10, 0.14);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.sx-filter-panel[hidden] {
  display: none;
}
.sx-panel-field {
  display: grid;
  gap: 5px;
}
.sx-panel-field[hidden] {
  display: none;
}
.sx-panel-field .sx-daterange {
  flex-wrap: wrap;
}
.sx-panel-field .sx-daterange .field-date {
  flex: 1 1 120px;
}
.sx-panel-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.sx-panel-field .field-date {
  width: 100%;
  height: var(--ctl-h, 38px);
  min-height: var(--ctl-h, 38px);
  box-sizing: border-box;
}
/* Panel/sheet controls: full width, one height, labels above (H2/H6). */
.sx-filter-panel input:not([type='checkbox']):not([type='radio']),
.sx-filter-panel select,
.sx-filter-panel textarea {
  width: 100%;
  height: var(--ctl-h, 38px);
  min-height: var(--ctl-h, 38px);
  box-sizing: border-box;
}
.sx-filter-panel .sx-daterange .field-date {
  width: auto;
}
.sx-filter-panel .field-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.sx-panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sx-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #ececec;
  padding-top: 12px;
}
.sx-panel-actions .btn {
  min-width: 84px;
  justify-content: center;
}

/* ---------- Table (laptop) → cards (phones); no sideways scroll ---------- */
.sx-empty-cta {
  margin-top: 16px;
}
.sx-info {
  cursor: help;
  color: #8a8a8a;
  font-size: 11px;
}
/* Compact rows (~48px) with headers and key cells on one line. */
.sx-tbl th {
  padding: 6px 10px 8px;
  white-space: nowrap;
}
.sx-tbl td {
  padding: 8px 10px;
}
.sx-nowrap {
  white-space: nowrap;
}
.sx-entry {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Error counts use the shared .count-bad treatment (views.css) everywhere:
   table cell, phone card and player meta. No local copy. */
.sx-tbl .count-bad,
.sx-card .count-bad {
  white-space: nowrap;
}
/* Sentence-case pills (Converted / Struggled) at a readable size. */
.sx-pill {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
}
/* Phone cards are swapped in by the phone media query below. */
.sx-cards {
  display: none;
}

@media (max-width: 780px) {
  /* Filter panel becomes a bottom sheet. */
  .sx-filter-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 82vh;
    border-bottom: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  /* Bar keeps only search + Filter (n) + Views; dates/chips are in the
     sheet (moved there in JS) and Clear lives in the sheet too. */
  .sx-filters {
    flex-wrap: nowrap;
  }
  /* lux.css hides the generic .search box ≤780px (a top-bar rule); the
     sessions search must stay visible — it is one of three bar controls. */
  .sx-filters .search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  .sx-filters .chip-clear {
    display: none;
  }
  .sx-views {
    margin-left: 0;
  }
  /* ≥44px touch targets. */
  .sx-filters .chip,
  .sx-filters .btn,
  .sx-panel-actions .btn,
  .sx-panel-chips .chip,
  .sx-active-chip,
  .sx-prev-next,
  .sx-menu-item {
    min-height: 44px;
  }
  .sx-panel-field .field-date,
  .sx-filter-panel input:not([type='checkbox']):not([type='radio']),
  .sx-filter-panel select {
    height: var(--ctl-h, 44px);
    min-height: 44px;
  }
  .sx-filters .btn,
  .sx-filters .field-date,
  .sx-filters select,
  .sx-filters .search {
    height: var(--ctl-h, 44px);
    min-height: 44px;
  }
  .sx-panel-field .sx-quick-chips .chip {
    min-height: 44px;
  }

  /* Table out, cards in: entry page leads, then one meta line. */
  .sx-table-wrap {
    display: none;
  }
  .sx-cards {
    display: grid;
    gap: 10px;
  }
  .sx-card {
    display: grid;
    gap: 4px;
    border: 1px solid #ececec;
    background: #fff;
    padding: 12px;
    color: #0a0a0a;
    text-decoration: none;
    min-height: 44px;
  }
  .sx-card-lead {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sx-card-meta {
    font-size: 12px;
    color: #6a6a6a;
    font-variant-numeric: tabular-nums;
  }
  .sx-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
  }
}

/* ---------- Player ---------- */
/* Calmer title: a short factual sentence, not a display headline.
   (h1.… beats lux.css's `.page-head h1` clamp on tie + later sheet.) */
h1.sx-player-title {
  overflow-wrap: anywhere;
  /* The display serif's old-style figures make "0s" read as "os". */
  font-variant-numeric: lining-nums;
  font-size: 26px;
  line-height: 1.3;
}
/* Struggle-moment chips and the errors pill read as words: sentence case. */
.player-friction .friction-badge,
.player-meta .pill {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
}
.player-friction .pf-jump {
  font-variant-numeric: tabular-nums;
  min-height: 24px;
}
.sx-player-cta {
  align-items: flex-start;
  flex-wrap: wrap;
}
/* One height for every control in the player head row (H6): the
   "Back to sessions" anchor must match Previous/Next and the ⋯ button. */
.sx-player-cta .btn,
.sx-player-cta a.btn {
  height: var(--ctl-h, 38px);
  min-height: var(--ctl-h, 38px);
  box-sizing: border-box;
  align-items: center;
  line-height: 1.2;
}
@media (max-width: 780px) {
  .sx-player-cta .btn,
  .sx-player-cta a.btn {
    height: var(--ctl-h, 44px);
    min-height: 44px;
  }
}
/* "Edit tags" is a .btn.btn-sm; undo the tiny replay.css sizing. */
.player-meta .pm-tag-edit.btn-sm {
  font-size: 12px;
}
.sx-prev-next[disabled] {
  opacity: 0.45;
}

/* ⋯ menu (fixed-free popover anchored to its button). */
.sx-menu-wrap {
  position: relative;
  display: inline-block;
}
.sx-menu-btn {
  min-width: 40px;
  justify-content: center;
}
.sx-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  right: 0;
  width: min(300px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 16px 40px rgba(10, 10, 10, 0.14);
  padding: 8px;
  display: grid;
  gap: 2px;
}
.sx-menu[hidden] {
  display: none;
}
.sx-menu-head {
  display: grid;
  gap: 2px;
  padding: 6px 8px 8px;
  border-bottom: 1px solid #ececec;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.sx-menu-item {
  text-align: left;
  background: none;
  border: 0;
  padding: 9px 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.sx-menu-item:hover {
  background: #f6f6f6;
}
.sx-menu-item.is-danger {
  color: #b03a2a;
}

/* Timeline markers: amber = struggle moment, red = error, red ring = failed
   request, grey = tab hidden (recording paused). */
.sx-marker-track {
  position: relative;
  height: 22px;
  margin: 8px 2px 0;
  border-top: 2px solid #ececec;
}
.sx-marker-track[hidden] {
  display: none;
}
.sx-marker {
  position: absolute;
  top: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid #fff;
  padding: 0;
  cursor: pointer;
}
.sx-marker.is-struggle {
  background: #b07a2a;
}
.sx-marker.is-error {
  background: #b03a2a;
}
.sx-marker-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #6a6a6a;
  margin-top: 2px;
}
.sx-marker-legend[hidden] {
  display: none;
}
.sx-marker-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sx-marker-dot.is-struggle {
  background: #b07a2a;
}
.sx-marker-dot.is-error {
  background: #b03a2a;
}
.sx-marker.is-net,
.sx-marker-dot.is-net {
  background: #fff;
  box-shadow: inset 0 0 0 2px #b03a2a;
}
.sx-marker.is-tab,
.sx-marker-dot.is-tab {
  background: #9a9a9a;
}

/* Pages visited, under the timeline markers; each jumps to its first moment. */
.player-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 12px;
}
.player-pages[hidden] {
  display: none;
}
.player-pages .pf-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.pg-visit {
  font-family: inherit;
  font-size: 12px;
  color: #3a3a3a;
  background: #fff;
  border: 1px solid #ececec;
  padding: 4px 10px;
  min-height: 28px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.pg-visit:hover {
  border-color: #0a0a0a;
  color: #0a0a0a;
}
.pg-visit .pg-dur {
  margin-left: 6px;
  color: #9a9a9a;
  font-variant-numeric: tabular-nums;
}
.player-stream {
  margin-top: 6px;
  font-size: 11px;
}
.player-stream[hidden] {
  display: none;
}

/* Conversion-chance line under the replay (single series: ink line, dashed
   average baseline, red key-moment markers, a playback cursor). */
.chance {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ececec;
}
.chance[hidden] {
  display: none;
}
.chance-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 6px;
}
.chance-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.chance-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a8a;
  padding: 2px 0;
}
.chance-plot {
  position: relative;
  height: 96px;
  cursor: crosshair;
}
.chance-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chance-line {
  fill: none;
  stroke: #0a0a0a;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.chance-avg {
  stroke: #c8c8c8;
  stroke-width: 1px;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.chance-won {
  stroke: #2f7a4b;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.chance-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(10, 10, 10, 0.35);
  pointer-events: none;
  transition: left 0.15s linear;
}
.chance-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid #fff;
  padding: 0;
  cursor: pointer;
  background: #b07a2a;
}
.chance-marker.is-high {
  background: #b03a2a;
}
/* A bigger invisible hit area than the 12px mark. */
.chance-marker::after {
  content: '';
  position: absolute;
  inset: -10px;
}
.chance-tip {
  position: absolute;
  top: -26px;
  transform: translateX(-50%);
  background: #0a0a0a;
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  white-space: nowrap;
  pointer-events: none;
}
.chance-tip[hidden] {
  display: none;
}
.chance-moments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 10px;
}
.chance .pf-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.chance-moment {
  font-family: inherit;
  font-size: 12px;
  color: #3a3a3a;
  background: #fff;
  border: 1px solid #ececec;
  padding: 4px 10px;
  min-height: 28px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.chance-moment:hover {
  border-color: #0a0a0a;
  color: #0a0a0a;
}
.chance-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Shortcuts overlay rows. */
.sx-shortcuts {
  display: grid;
  gap: 8px;
}
.sx-shortcut-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 13px;
}
.sx-shortcut-key {
  min-width: 84px;
  font-size: 12px;
}

/* Sticky phone control bar (hidden on larger screens). */
.sx-player-bar {
  display: none;
}
@media (max-width: 780px) {
  .sx-player-bar {
    display: flex;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #ececec;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .sx-player-bar .btn {
    min-height: 44px;
    justify-content: center;
  }
  .sx-sticky-play {
    flex: 1;
  }
}

/* ---------- User timeline skeletons ---------- */
.sx-user-summary {
  margin-bottom: 14px;
}
.sx-skeleton-cards {
  display: grid;
  gap: 10px;
}
.sx-skeleton-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}
.sx-skltn-a {
  width: 38%;
}
.sx-skltn-b {
  width: 72%;
}
.sx-skltn-c {
  width: 55%;
}