/* Fixboard board view: status chips (a sideways row with arrow buttons on
   phones), search, project and sort, the reporter pill, the status help
   and the results list chrome. The cards themselves are in components.css. */

/* ------------------------------------------------------------ board */

.filters { display: flex; flex-direction: column; gap: 10px; }
/* On phones the status chips are one sideways-scrolling row. The edge that
   has more chips fades out and shows a round arrow button that scrolls the
   row (boardFilters.js sets has-more-start and has-more-end). From 900px
   the chips wrap and there is nothing to scroll. */
.chips-scroller { position: relative; margin: 0 calc(var(--pad-r) * -1) 0 calc(var(--pad-l) * -1); }
.chips {
  position: relative; display: flex; gap: 8px;
  padding: 2px var(--pad-r) 6px var(--pad-l);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  /* A focused chip scrolls clear of the faded edges and the arrows. */
  scroll-padding-inline: calc(var(--pad-l) + 60px) calc(var(--pad-r) + 60px);
}
.chips::-webkit-scrollbar { display: none; }
.chips-scroller.has-more-end .chips {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 76px), transparent calc(100% - 14px));
  mask-image: linear-gradient(90deg, #000 calc(100% - 76px), transparent calc(100% - 14px));
}
.chips-scroller.has-more-start .chips {
  -webkit-mask-image: linear-gradient(90deg, transparent 14px, #000 76px);
  mask-image: linear-gradient(90deg, transparent 14px, #000 76px);
}
.chips-scroller.has-more-start.has-more-end .chips {
  -webkit-mask-image: linear-gradient(90deg, transparent 14px, #000 76px, #000 calc(100% - 76px), transparent calc(100% - 14px));
  mask-image: linear-gradient(90deg, transparent 14px, #000 76px, #000 calc(100% - 76px), transparent calc(100% - 14px));
}
.chips__arrow {
  position: absolute; top: 2px; z-index: 1;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--text);
}
.chips__arrow::before {
  content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
}
.chips__arrow--prev { left: max(4px, calc(var(--pad-l) - 12px)); }
.chips__arrow--next { right: max(4px, calc(var(--pad-r) - 12px)); }
.chips-scroller.has-more-start .chips__arrow--prev,
.chips-scroller.has-more-end .chips__arrow--next { display: inline-flex; }
.chip-btn {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-2);
  font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
@media (hover: hover) { .chip-btn:hover { border-color: var(--input-border); color: var(--text); } }
.chip-btn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.chip-btn__count {
  min-width: 24px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--text-2);
  font-size: 0.8125rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.chip-btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip-btn[aria-pressed="true"] .chip-btn__count { background: rgba(255, 255, 255, 0.18); color: var(--bg); }
.chip-btn[aria-pressed="true"] .chip-btn__dot { box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 559px) {
  .chips { gap: 6px; }
  .chip-btn { gap: 6px; padding: 0 12px; }
}
@media (min-width: 900px) {
  .chips-scroller { margin: 0; }
  .chips { flex-wrap: wrap; gap: 6px; padding: 2px 0; overflow: visible; }
  .chips-scroller .chips { -webkit-mask-image: none; mask-image: none; }
  .chips-scroller .chips__arrow { display: none; }
  .chip-btn { padding: 0 10px; gap: 6px; font-size: 0.875rem; }
  .chip-btn__count { padding: 1px 6px; min-width: 22px; }
}

/* Phones: search on its own row (with My reports beside it when a name is
   saved), then project and sort side by side. Sort labels are one word, so
   from 360px the project select shows the whole project name. */
.toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.toolbar--mine { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search mine" "selects selects"; }
.toolbar--mine .search { grid-area: search; }
.toolbar--mine .toolbar__selects { grid-area: selects; }
.toolbar--mine .toggle-btn { grid-area: mine; }
.toolbar__selects { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.toolbar__selects .select { padding-left: 12px; padding-right: 34px; text-overflow: ellipsis; }
.toolbar__selects .select-wrap__icon { right: 10px; }
.search { position: relative; display: block; min-width: 0; }
.search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search__input { padding-left: 44px; }
.toggle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 14px;
  border: 1px solid var(--input-border); border-radius: 10px; background: var(--surface); color: var(--text-2);
  font-weight: 600; white-space: nowrap;
}
@media (hover: hover) { .toggle-btn:hover { color: var(--text); } }
.toggle-btn[aria-pressed="true"] { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand); }
@media (max-width: 359px) {
  .toolbar__selects .select { padding-left: 10px; padding-right: 30px; }
  .toolbar__selects .select-wrap__icon { right: 8px; }
  .toggle-btn { padding: 0 12px; }
  .toggle-btn__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (min-width: 720px) {
  .toolbar, .toolbar--mine { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: none; align-items: center; }
  .toolbar--mine .search, .toolbar--mine .toolbar__selects, .toolbar--mine .toggle-btn { grid-area: auto; }
  .toolbar__selects { grid-template-columns: 190px 190px; }
  .toggle-btn { padding: 0 16px; }
}

/* "Reports by <name>": a long name wraps inside the pill; the remove button
   keeps its full 44x44. */
.filter-pill-row { display: flex; min-width: 0; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding-left: 14px;
  border-radius: 22px; background: var(--brand-wash); color: var(--brand-ink); font-weight: 600;
}
.filter-pill__text { min-width: 0; padding: 10px 0; line-height: 1.4; overflow-wrap: anywhere; }
.filter-pill__x { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; }

.status-help { border-radius: var(--radius); }
.status-help__summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  color: var(--link); font-weight: 600; cursor: pointer; list-style: none;
}
.status-help__summary::-webkit-details-marker { display: none; }
.status-help__chevron { transition: transform 0.2s var(--ease); }
.status-help[open] .status-help__chevron { transform: rotate(180deg); }
.status-help__list {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.status-help__row { display: flex; flex-direction: column; gap: 4px; }
.status-help__row dd { color: var(--text-2); font-size: 0.9375rem; }
@media (min-width: 720px) {
  .status-help__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
  .status-help__row { flex-direction: row; align-items: baseline; gap: 12px; }
  .status-help__row dt { flex: 0 0 168px; }
}

.results { display: flex; flex-direction: column; gap: 10px; }
.results__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.results__head:has(.results__summary:empty):has(.results__clear[hidden]) { display: none; }
.results__summary { color: var(--text-3); font-size: 0.9375rem; font-weight: 600; }
/* The button keeps its 44px target but lends 10px above and below to the
   gaps around it, so the row is only as tall as its text. */
.results__clear { margin-block: -10px; }
.results__more { display: flex; justify-content: center; padding-top: 8px; }
.results__more .btn { min-width: 200px; }
/* Phones and short landscape screens, unfiltered board: the All chip
   already shows the total, so the "Showing N of M" line is kept for screen
   readers only and the first screen holds one more report. Filtered, it
   shows with Clear filters. */
@media (max-width: 559px), (orientation: landscape) and (max-height: 500px) {
  .results__head:has(.results__clear[hidden]) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (min-width: 560px) {
  .filters { gap: 12px; }
  .results { gap: 12px; }
}