/* 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 .5rem; font-size: .92rem; }
.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: .5rem; align-items: flex-end; margin: .25rem 0 .5rem; }
.review-search-slot { flex: 1 1 16rem; min-width: 0; }
.review-search .field { margin: 0; }
.review-search .field label { font-size: .85rem; color: var(--muted); font-weight: 500; }
.review-filters-button { white-space: nowrap; }
.review-filters-button.is-active { border-color: var(--accent); font-weight: 650; }
.review-filter-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .6rem 1rem .75rem; margin: 0 0 .75rem;
}
.review-filter-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.review-filter-head h2 { margin: 0; font-size: 1rem; }
.review-filter-panel .review-filters .filter-grid { margin-top: .4rem; }
.review-filter-panel .review-filters > p { margin: .5rem 0 0; }
.review-sheet-backdrop { display: none; }

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

/* compact card */
.review-list { gap: .6rem; }
.review-card {
  grid-template-columns: auto 4.5rem minmax(0, 1fr); gap: .35rem .75rem; padding: .6rem .8rem;
  scroll-margin-top: calc(var(--header-h, 7rem) + .75rem); scroll-margin-bottom: 1rem;
}
.review-img { width: 4.5rem; height: 4.5rem; }
.review-img.placeholder { font-size: 1.4rem; }
.review-body { min-width: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin: 0 0 .1rem; }
.review-head .review-title { margin: 0; min-width: 0; }
.review-category { flex: 0 0 auto; white-space: nowrap; }
.review-title { font-size: 1.02rem; line-height: 1.3; margin: 0 0 .1rem; overflow-wrap: anywhere; }
.review-title .fav-source-flag { display: inline; margin: 0 .25rem 0 0; font-size: .95rem; }
.review-meta { margin: 0 0 .2rem; color: var(--muted); font-size: .88rem; line-height: 1.35; }
.review-meta .meta { display: block; margin: 0; font-size: inherit; }
.review-meta .event-price { color: var(--text); font-weight: 600; }
.review-card .why {
  display: block; max-width: 100%; margin: 0 0 .2rem; padding: .05rem .5rem; font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-desc {
  margin: 0 0 .2rem; font-size: .86rem; 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: .35rem .9rem; align-items: center; margin-top: .3rem; }
.review-decide, .review-secondary { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.review-card-more { border-top: 1px dashed var(--border); margin-top: .45rem; padding-top: .45rem; }
.review-card-more p { margin: 0 0 .3rem; }
.review-card-more .btn-row { margin-top: .2rem; }

/* discovery feedback: two thumbs, note on demand */
.discovery-feedback.is-compact {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
}
.feedback-thumbs { display: flex; align-items: center; gap: .2rem; }
.btn-thumb { min-width: 2.3rem; padding: .25rem .45rem; 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: .35rem; }
.discovery-feedback.is-compact .feedback-note textarea { width: 100%; }
.discovery-feedback.is-compact > p[role="status"] { flex-basis: 100%; margin: 0; color: var(--bad); }

/* Always / Never picker */
.remember-picker fieldset { border: 0; padding: 0; margin: .5rem 0; min-width: 0; }
.remember-picker legend { font-weight: 650; padding: 0; margin-bottom: .25rem; }
.remember-list { max-height: 16rem; overflow-y: auto; margin: 0; }
.remember-list li { margin-bottom: .1rem; }

.review-footer { margin-top: 1.5rem; }
.review-dock { display: none; }

@media (max-width: 700px) {
  .review-lede { display: none; }
  .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: .88rem; }
  .review-bulk-bar { top: calc(var(--header-h, 9rem) + .25rem); }

  .review-card { grid-template-columns: auto minmax(0, 1fr); padding: .55rem .65rem; gap: .25rem .5rem; 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: .3rem; min-height: 2.5rem; }
  .review-secondary { flex: 1 1 100%; gap: .2rem; }
  .review-secondary > .btn { padding-inline: .45rem; white-space: nowrap; }
  .review-secondary .btn-thumb { min-width: 2.1rem; padding-inline: .3rem; }
  .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: 0; z-index: 60; margin: 0;
    max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--radius) var(--radius) 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .review-filter-head { position: sticky; top: -.6rem; background: var(--surface); padding: .35rem 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; z-index: 55; background: rgb(0 0 0 / .4); }

  /* 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: 0 -4px 14px rgb(0 0 0 / .12);
    padding: .35rem .6rem calc(.45rem + env(safe-area-inset-bottom, 0px));
  }
  .review-dock-title { margin: 0 0 .3rem; font-size: .8rem; 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: .4rem; }
  .review-dock-buttons .btn { min-height: 2.9rem; padding-inline: .3rem; }
  .app-main.has-review-dock { padding-bottom: calc(7.5rem + var(--bottom-nav-h, 0px)); }
}