/* Review queue: compact cards, the filter panel (a bottom sheet on phones), the phone action bar
   and the Always/Never picker. Loaded after components.css, so these override its older
   review-card rules. Sticky/fixed offsets use --header-h (height of the sticky app header) and
   --bottom-nav-h (a fixed bottom menu bar on phones, if the shell has one), with fallbacks. */

.review-lede { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.kbd-help { white-space: nowrap; }
@media (hover: none) and (pointer: coarse) { .kbd-help { display: none; } }

/* toolbar: search box + Filters button */
.review-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; margin: var(--sp-1) 0 var(--sp-2); }
.review-search-slot { flex: 1 1 16rem; min-width: 0; }
.review-search .field { margin: 0; }
.review-search .field label { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.review-filters-button { white-space: nowrap; }
.review-filters-button.is-active { border-color: var(--accent); font-weight: var(--fw-semibold); }
.review-filter-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-2) var(--sp-4) var(--sp-3); margin: 0 0 var(--sp-3);
}
.review-filter-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.review-filter-head h2 { margin: 0; font-size: var(--fs-md); }
.review-filter-panel .review-filters .filter-grid { margin-top: var(--sp-2); }
.review-filter-panel .review-filters > p { margin: var(--sp-2) 0 0; }
.review-sheet-backdrop { display: none; }

.review-status-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-0) var(--sp-4); }
.review-status-row .review-count { margin: 0; font-size: var(--fs-sm); }
.review-select-row { margin: 0; gap: var(--sp-1) var(--sp-2); }
.review-groups-details { margin: var(--sp-1) 0; }
.review-bulk-bar { top: calc(var(--header-h, 6.5rem) + var(--sp-1)); }

/* compact card */
.review-list { gap: var(--sp-2); }
.review-card {
  grid-template-columns: auto 4.5rem minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3);
  scroll-margin-top: calc(var(--header-h, 7rem) + var(--sp-3)); scroll-margin-bottom: var(--sp-4);
}
.review-img { width: 4.5rem; height: 4.5rem; }
.review-img.placeholder { font-size: var(--fs-xl); }
.review-body { min-width: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-0) var(--sp-2); margin: 0 0 var(--sp-0); }
.review-head .review-title { margin: 0; min-width: 0; }
.review-category { flex: 0 0 auto; white-space: nowrap; }
.review-title { font-size: var(--fs-md); line-height: 1.3; margin: 0 0 var(--sp-0); overflow-wrap: anywhere; }
.review-title .fav-source-flag { display: inline; margin: 0 var(--sp-1) 0 0; font-size: var(--fs-md); }
.review-meta { margin: 0 0 var(--sp-1); color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; }
.review-meta .meta { display: block; margin: 0; font-size: inherit; }
.review-meta .event-price { color: var(--text); font-weight: var(--fw-semibold); }
.review-card .why {
  display: block; max-width: 100%; margin: 0 0 var(--sp-1); padding: var(--sp-0) var(--sp-2); font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-desc {
  margin: 0 0 var(--sp-1); font-size: var(--fs-sm); max-width: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden;
}
.review-card .review-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); align-items: center; margin-top: var(--sp-1); }
.review-decide, .review-secondary { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.review-card-more { border-top: 1px dashed var(--border); margin-top: var(--sp-2); padding-top: var(--sp-2); }
.review-card-more p { margin: 0 0 var(--sp-1); }
.review-card-more .btn-row { margin-top: var(--sp-1); }

/* discovery feedback: two thumbs, note on demand */
.discovery-feedback.is-compact {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1);
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
}
.feedback-thumbs { display: flex; align-items: center; gap: var(--sp-1); }
.btn-thumb { min-width: var(--touch-target); padding: var(--sp-1) var(--sp-2); background: transparent; }
.btn-thumb[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.discovery-feedback.is-noting { flex-basis: 100%; }
.discovery-feedback.is-compact .feedback-note { flex-basis: 100%; }
.discovery-feedback.is-compact .feedback-note .field { margin-bottom: var(--sp-1); }
.discovery-feedback.is-compact .feedback-note textarea { width: 100%; }
.discovery-feedback.is-compact > p[role="status"] { flex-basis: 100%; margin: 0; color: var(--danger); }

/* Always / Never picker */
.remember-picker fieldset { border: 0; padding: 0; margin: var(--sp-2) 0; min-width: 0; }
.remember-picker legend { font-weight: var(--fw-semibold); padding: 0; margin-bottom: var(--sp-1); }
.remember-list { max-height: 16rem; overflow-y: auto; margin: 0; }
.remember-list li { margin-bottom: var(--sp-0); }

.review-footer { margin-top: var(--sp-5); }
.review-phone-hint, .review-filter-foot { display: none; }
.review-listings { flex: 0 0 auto; white-space: nowrap; background: var(--accent-soft); }

/* The whole card-sized hit area for the select checkbox (the label is invisible text over it). */
.review-select { position: relative; display: grid; place-items: start center; min-width: 2.75rem; min-height: 2.75rem; padding-top: var(--sp-1); }
.review-select input { position: relative; z-index: 1; }
.review-select .review-select-hit { position: absolute; inset: 0; cursor: pointer; }
.review-select-row .check { flex: 1 1 auto; }
@media (pointer: coarse) {
  .review-title a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }
}
.review-dock { display: none; }

@media (max-width: 700px) {
  .review-lede { display: none; }
  .review-phone-hint:not([hidden]) { display: block; margin: 0 0 var(--sp-2); }
  .review-card .why { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .review-filter-foot { display: block; position: sticky; bottom: calc(-1 * var(--sp-4)); background: var(--surface); padding: var(--sp-2) 0 var(--sp-1); margin-top: var(--sp-2); }
  .review-filter-foot .btn { width: 100%; min-height: var(--touch-target); }  .review-toolbar { flex-wrap: nowrap; }
  .review-search .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .review-status-row { font-size: var(--fs-sm); }
  .review-bulk-bar { top: calc(var(--header-h, 9rem) + var(--sp-1)); }

  .review-card { grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-2) var(--sp-3); gap: var(--sp-1) var(--sp-2); scroll-margin-bottom: 7.5rem; }
  .review-card .review-img { display: none; }
  .review-card .review-body { grid-column: 2; }
  .review-decide { flex: 1 1 100%; flex-wrap: nowrap; }
  .review-decide .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-1); min-height: var(--touch-target); }
  .review-secondary { flex: 1 1 100%; gap: var(--sp-1); }
  .review-secondary > .btn { padding-inline: var(--sp-2); white-space: nowrap; }
  .review-secondary .btn-thumb { min-width: var(--touch-target); padding-inline: var(--sp-1); }
  .review-secondary .discovery-feedback { margin-left: auto; }
  .review-secondary .discovery-feedback.is-noting { margin-left: 0; }

  /* Filters as a bottom sheet */
  .review-filter-panel {
    position: fixed; left: 0; right: 0; bottom: var(--bottom-nav-h); z-index: 60; margin: 0;
    max-height: min(85vh, calc(100vh - var(--header-h) - var(--bottom-nav-h) - var(--sp-2)));
    max-height: min(85dvh, calc(100dvh - var(--header-h) - var(--bottom-nav-h) - var(--sp-2)));
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: var(--sp-4);
  }
  .review-filter-head { position: sticky; top: -.6rem; background: var(--surface); padding: var(--sp-1) 0; z-index: 1; }
  .review-filter-panel .review-filter-options { max-height: none; overflow: visible; }
  .review-filter-panel .filter-grid { grid-template-columns: 1fr; }
  .review-sheet-backdrop:not([hidden]) { display: block; position: fixed; inset: 0 0 var(--bottom-nav-h); z-index: 55; background: var(--backdrop); }

  /* Thumb-reach action bar for the highlighted card */
  .review-dock:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: var(--bottom-nav-h, 0px); z-index: 40;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-sm);
    padding: var(--sp-1) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  }
  .review-dock-title { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .review-dock-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .review-dock-buttons .btn { min-height: 2.9rem; padding-inline: var(--sp-1); }
  .app-main.has-review-dock { padding-bottom: calc(var(--sp-8) + var(--bottom-nav-h, 0px)); }
}