/* Listing health -- the boxes the Analysis Kit does not already have: the colour-coded work list, the heatmap, what buyers
 * wrote, and the slipping rows.
 *
 * EVERY COLOUR COMES FROM A TOKEN (D25); the figure strip, control bar, chart cards and action rows are the kit's own
 * (`analysis.css`) and are not restyled here. Under 768px everything goes one column, the kit's own breakpoint.
 */

.lh-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 10px;
}

.lh-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lh-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
}

.lh-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.lh-box__title {
  font-size: 14px;
}

.lh-found {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lh-picked {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* ---------------------------------------------------------------- the work list */

.lh-work {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lh-work__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(5, 64px) 100px;
  gap: 6px;
  align-items: center;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
}

.lh-work__head {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.lh-work__row--product {
  background: var(--surface-raised);
}

.lh-work__row--listing {
  padding-left: 20px;
}

.lh-work__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lh-work__name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lh-work__name span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.lh-work__cell {
  display: flex;
  justify-content: center;
}

.lh-cell {
  display: inline-block;
  min-width: 54px;
  padding: 0 4px;
  height: 20px;
  line-height: 20px;
  border-radius: 4px;
  background: var(--border);
  color: var(--on-danger);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  white-space: nowrap;
}

.lh-cell--green { background: var(--ok); }
.lh-cell--amber { background: var(--warn); color: var(--text); }
.lh-cell--red { background: var(--danger); }
.lh-cell--new { background: var(--surface-raised); color: var(--text); border: 1px dashed var(--border-strong); }
.lh-cell--none { background: var(--surface-raised); color: var(--text-subtle); font-weight: 400; }
.lh-cell--na { background: var(--border); color: var(--text-subtle); font-weight: 400; }
.lh-key .lh-cell { min-width: 22px; height: 14px; line-height: 14px; }

.lh-work__cost {
  position: relative;
  height: 14px;
  background: var(--surface-raised);
  border-radius: 3px;
}

.lh-work__head .lh-work__cost {
  background: none;
  height: auto;
}

.lh-cost {
  display: block;
  height: 100%;
  background: var(--danger);
  border-radius: 3px;
}

.lh-work__cost em {
  position: absolute;
  left: 8px;
  top: -2px;
  font-style: normal;
  color: var(--text-subtle);
  font-size: 12px;
}

.lh-work__none {
  margin: 10px 0 0;
  color: var(--text-muted);
}

.lh-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.lh-key__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lh-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.lh-pager__where {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------- the heatmap */

.lh-heat {
  display: grid;
  grid-template-columns: minmax(110px, 170px) repeat(var(--lh-blocks, 8), minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}

.lh-heat__block {
  font-size: 11px;
  color: var(--text-subtle);
  text-align: center;
}

.lh-heat__name {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.lh-heat__cell {
  display: block;
  height: 22px;
  border-radius: 3px;
  background: var(--surface-raised);
}

.lh-heat__cell--worst { background: var(--danger); }
.lh-heat__cell--worse { background: var(--danger-border); }
.lh-heat__cell--same { background: var(--border-strong); }
.lh-heat__cell--better { background: var(--ok-border); }
.lh-heat__cell--best { background: var(--ok); }
.lh-heat__cell--none { background: var(--surface-raised); }
.lh-key .lh-heat__cell { display: inline-block; width: 14px; height: 14px; }

/* ----------------------------------------------- platforms side by side (one bar each) */

.lh-pbars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}

.lh-pbars__measure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lh-pbar {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
}

.lh-pbar__track {
  display: block;
  height: 18px;
  background: var(--surface-raised);
  border-radius: 4px;
}

.lh-pbar__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.lh-pbar__track--none {
  background: none;
  border: 1.5px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lh-pbar__track--none em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-subtle);
}

.lh-pbar__value {
  font-weight: 700;
  text-align: right;
}

/* ----------------------------------------------------------- what buyers wrote */

.lh-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lh-comments__listing {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.lh-comments__who span,
.lh-comments__day {
  font-size: 11.5px;
  color: var(--text-subtle);
}

.lh-comments__line {
  margin: 0;
  padding: 4px 0 4px 10px;
  border-left: 3px solid var(--border);
}

.lh-comments__line q {
  quotes: none;
}

/* ------------------------------------------------------------ the slipping rows */

.lh-slips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lh-slip {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.lh-slip__spark {
  position: relative;
  width: 100%;
  height: 44px;
}

.lh-slip__foot {
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .lh-work__row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 64px;
    row-gap: 5px;
  }

  .lh-work__name {
    grid-column: 1 / -1;
  }

  .lh-work__head .lh-work__name {
    display: none;
  }

  .lh-work__row--listing {
    padding-left: 12px;
  }

  .lh-slips {
    grid-template-columns: 1fr;
  }

  .lh-pbars {
    grid-template-columns: 1fr;
  }

  .lh-cell {
    min-width: 0;
    width: 100%;
  }
}

/* "What the platforms say": each card is as wide as its table needs. Two sit side by side only when both fit whole, otherwise
   they stack at full width (the script sets each card's width). A card with nothing in it is one thin line. */
.lh-sidebyside {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.lh-sidebyside > * {
  min-width: 0;
  max-width: 100%;
}

.lh-sidebyside__empty {
  flex: 1 1 100%;
  padding-block: 4px;
}

.lh-sidebyside__empty .k-chart__dash {
  display: none;
}

.lh-sidebyside__empty .k-chart__foot {
  display: none;
}

.lh-sidebyside__empty .k-chart__empty {
  padding: 0 0 4px;
  min-height: 0;
}

/* Changes against the earlier report (D982): colour and an arrow with a sign together, never colour alone. */
.k-chart__td--better {
  color: var(--ok);
  font-weight: 600;
}

.k-chart__td--worse {
  color: var(--danger);
  font-weight: 600;
}

/* The platform is a small label, so Flipkart and Meesho rows tell apart at a glance. */
.k-chart__td--badge {
  font-weight: 600;
}

/* A note under the small table is as wide as the table and wraps; it never makes the card wider. */
.k-chart__table > .k-chart__foot {
  width: 0;
  min-width: 100%;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}