/* Sprint 6: the running list's filter bar (list.html, _filterbar.html). Loaded after style.css.
   Sizes come from the foundation tokens with fallbacks (--tap 44, --tap-lg 48, --fs-body 17, --fs-small 15,
   --fs-label 14, --gap-tap 12); colours only through the theme tokens, so the light theme needs nothing here. */

:root {
  /* the chevron's shape; its colour comes from a token through mask */
  --fb-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ the bar */

/* One 56 px row under the sticky topbar (base.html, --topbar-h). Set values are short ("$550k", "2016+") so the usual
   six filters fit on the 11-inch iPad; it wraps on narrower windows, and list.html keeps --fbar-h at its height. */
.fbar {
  position: sticky; top: var(--topbar-h, 0px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding: 4px 0; background: var(--bg); box-shadow: 0 1px 0 var(--line);
  font-size: var(--fs-body, 17px); line-height: 1.25;
}

/* one drop-down button: outlined while unset, accent-tinted once set, dashed while a nice-to-have */
.fb-item {
  position: relative; display: inline-flex; align-items: center; flex: none;
  height: var(--tap-lg, 48px); border-radius: var(--pill, 999px); color: var(--text);
  outline: 1px solid var(--line-strong); outline-offset: -1px; background: transparent;
}
.fb-item.set { background: var(--tint-accent); outline-color: var(--accent); }
.fb-item.nice { outline-style: dashed; }
.fb-pop { height: 100%; }
.fb-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; margin: 0; padding: 0 14px 0 15px;
  border: 0; border-radius: inherit; background: transparent; color: inherit;
  font: inherit; font-size: var(--fs-body, 17px); white-space: nowrap; cursor: pointer; list-style: none;
}
.fb-btn::-webkit-details-marker { display: none; }
.fb-btn .ic { color: var(--muted); transition: transform .15s; }
.fb-pop[open] > .fb-btn .ic { transform: rotate(180deg); }
/* a set filter: its value, then its own clear button in place of the chevron (the value still opens the choices) */
.fb-item.set:not(.fb-moreitem) .fb-btn { padding-right: 2px; }
.fb-item.set:not(.fb-moreitem) .fb-btn > .ic { display: none; }
/* More: a dot when the bar differs from the saved default (Save as my default is inside) */
.fb-more > .fb-btn { position: relative; }
.fb-unsaved {
  position: absolute; top: 7px; right: 9px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
}
.fb-nice { color: var(--muted); }
.fb-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: var(--pill, 999px); background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-label, 14px); font-weight: 600;
}

/* native selects in the bar lie transparent over a label of the current value, so a button is as wide as its
   value; a tap opens the system picker */
.fb-selwrap { position: relative; display: inline-flex; height: 100%; border-radius: inherit; }
.fb-native {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 0 0 15px; opacity: 0;
  appearance: none; -webkit-appearance: none; border: 0; border-radius: inherit; background: transparent;
  color: var(--text); font: inherit; font-size: var(--fs-body, 17px); cursor: pointer;
}
.fb-native option { background: var(--surface-2); color: var(--text); }
.fb-selwrap:has(.fb-native:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* a filter's own clear button */
.fb-x {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--tap, 44px); height: var(--tap, 44px); margin-right: 2px; border-radius: 50%; color: var(--text);
}

.fb-sort { margin-left: auto; }
/* the More sheet's top row: Save as my default (or "Your default"), Clear all */
.fb-sheet-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fb-plain, .fb-save, .fb-default {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: var(--tap-lg, 48px); padding: 0 16px;
  border-radius: var(--pill, 999px); font-size: var(--fs-body, 17px); white-space: nowrap;
}
.fb-plain { color: var(--accent); }
.fb-save { margin: 0; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.fb-default { color: var(--muted); padding: 0 8px; }
.fb-js .fb-go { display: none; }
.fb-default .ic { color: var(--good-text, var(--accent)); }

/* ------------------------------------------------------------------ popovers */

.fb-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  display: flex; flex-direction: column; gap: 16px;
  width: max-content; min-width: 300px; max-width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - var(--topbar-h, 0px) - 96px); overflow: auto; overscroll-behavior: contain;
  padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius, 16px);
  background: var(--surface); color: var(--text); font-size: var(--fs-body, 17px); cursor: auto;
}
.fb-panel[hidden], .fb-typed[hidden] { display: none; }
.fb-panel.fb-right { left: auto; right: 0; }
/* More: a sheet as wide as the bar, right under it */
.fb-moreitem { position: static; }
.fb-sheet { left: 0; right: 0; top: calc(100% + 4px); width: auto; max-width: none; gap: 20px; }
.fb-sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.fb-sheet-grid > .fb-field:first-child, .fb-span { grid-column: span 2; }

.fb-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fb-ph, .fb-field > legend { padding: 0; font-size: var(--fs-small, 15px); color: var(--muted); }
/* a floated legend is laid out like any other child (here: a flex item), not on the fieldset's border */
.fb-field > legend { float: left; width: 100%; margin: 0; }
.fb-h { font-size: var(--fs-body, 17px); font-weight: 600; }
.fb-note { font-size: var(--fs-small, 15px); color: var(--muted); max-width: 60ch; }
.fb-n { color: var(--muted); font-size: var(--fs-small, 15px); }

/* toggles: segments, chips and make rows are real radios and checkboxes inside 44 px (rows 56 px) labels */
.fb-seg, .fb-chips, .fb-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fb-sg, .fb-chip, .fb-rowopt {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap, 44px); padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 10px);
  background: transparent; color: var(--text); font-size: var(--fs-body, 17px); white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.fb-sg { justify-content: center; min-width: 64px; }
.fb-chip { border-radius: var(--pill, 999px); }
.fb-chip.fb-wide { border-radius: var(--radius-sm, 10px); }
.fb-chip b { font-weight: 600; }
.fb-rowopt { min-height: 56px; }
/* the real input covers its whole label, unseen: the tap lands on it, and it measures as big as the label */
.fb-sg input, .fb-chip input, .fb-rowopt input, .fb-switch input {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; border-radius: inherit;
}
.fb-sg:has(input:checked), .fb-chip:has(input:checked), .fb-rowopt:has(input:checked), .fb-chip.on, .fb-rowopt.on {
  background: var(--tint-accent); border-color: var(--accent); font-weight: 600;
}
.fb-sg:has(input:focus-visible), .fb-chip:has(input:focus-visible), .fb-rowopt:has(input:focus-visible),
.fb-switch:has(input:focus-visible) .fb-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.fb-dot.any { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* typed amounts and model words */
.fb-typed-row { display: flex; align-items: center; gap: 8px; }
.fbar input.fb-input {
  width: 13ch; height: var(--tap, 44px); padding: 0 12px; border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: var(--fs-body, 17px);
}
.fbar input.fb-input.wide { flex: 1; width: auto; min-width: 12ch; }
.fbar input.fb-input:focus { border-color: var(--accent); }
.fb-done {
  height: var(--tap, 44px); min-width: 88px; padding: 0 20px; border: 1px solid var(--accent); border-radius: var(--pill, 999px);
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: var(--fs-body, 17px); font-weight: 500; cursor: pointer;
}

/* selects inside the More sheet: boxed, with the chevron drawn in a theme colour */
.fb-selwrap.boxed { height: var(--tap-lg, 48px); width: 100%; }
.fb-selwrap.boxed::after {
  content: ""; position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; margin-top: -8px;
  background: var(--muted); pointer-events: none;
  -webkit-mask: var(--fb-chev) center / contain no-repeat; mask: var(--fb-chev) center / contain no-repeat;
}
.fb-select {
  appearance: none; -webkit-appearance: none; background-image: none;
  width: 100%; height: 100%; padding: 0 44px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 10px);
  background: var(--surface-2); color: var(--text); font-size: var(--fs-body, 17px); cursor: pointer;
}
.fb-select:focus { border-color: var(--accent); }

/* Show deleted machines: a switch */
.fb-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap, 44px); cursor: pointer; }
.fb-track {
  position: relative; flex: none; width: 52px; height: 32px; border-radius: var(--pill, 999px);
  border: 1px solid var(--line-strong); background: var(--surface-2); transition: background-color .15s, border-color .15s;
}
.fb-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background-color .15s;
}
.fb-switch input:checked + .fb-track { background: var(--accent); border-color: var(--accent); }
.fb-switch input:checked + .fb-track::after { transform: translateX(20px); background: var(--on-accent); }

/* Nice-to-haves: one row per active filter, two real radios */
.fb-nice-list { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.fb-nicerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 0; border: 0; }
.fb-nicerow > legend { float: left; min-width: 18em; padding: 0; margin-right: 4px; font-size: var(--fs-body, 17px); }
/* a radio drawn as a ring (and a dot when chosen) at the left of a 44 px label; the real radio covers the label */
.fb-radio {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap, 44px);
  padding: 0 16px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--pill, 999px);
  cursor: pointer; font-size: var(--fs-body, 17px);
}
.fb-radio::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); }
.fb-radio::after {
  content: ""; position: absolute; left: 18px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--accent); opacity: 0;
}
.fb-radio input {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; border-radius: inherit;
}
.fb-radio:has(input:checked) { border-color: var(--accent); background: var(--tint-accent); }
.fb-radio:has(input:checked)::before { border-color: var(--accent); }
.fb-radio:has(input:checked)::after { opacity: 1; }
.fb-radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ the list under the bar */

.list-split { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) {
  .list-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
  .list-split > :only-child { grid-column: 1 / -1; }  /* no detail panel: the list takes the whole width */
}
.list-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; transition: opacity .15s; }
.list-body.htmx-request { opacity: .55; transition-delay: .12s; }
/* the one line above the cards: "78 combines match · 274 more need checking" */
.list-count { font-size: var(--fs-body, 17px); line-height: 24px; color: var(--text); }
/* "Show 20 more": the next page's cards take its place (list.html) */
.list-more {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 20px;
  border: 1px solid var(--line-strong); border-radius: var(--radius, 16px); background: var(--surface);
  color: var(--accent); font-size: var(--fs-body, 17px); font-weight: 500;
}
.list-more.htmx-request { opacity: .6; pointer-events: none; }
/* the Needs-checking group's explanation, inside it */
.check-group > .cg-why { padding: 0 16px 12px; font-size: var(--fs-small, 15px); color: var(--muted); max-width: 80ch; }
/* the detail panel sticks under the bar, not under the topbar (list.html keeps --fbar-h at the bar's height) */
@media (min-width: 1024px) {
  .list-split > .detail {
    top: calc(var(--topbar-h, 0px) + var(--fbar-h, 56px) + 8px);
    max-height: calc(100vh - var(--topbar-h, 0px) - var(--fbar-h, 56px) - 16px);
  }
  @supports (height: 100dvh) {
    .list-split > .detail { max-height: calc(100dvh - var(--topbar-h, 0px) - var(--fbar-h, 56px) - 16px); }
  }
}

/* hover only where there is a pointer that hovers: on the iPad a tapped button would stay "hovered" */
@media (hover: hover) {
  .fb-item:hover { outline-color: var(--accent); }
  .fb-x:hover, .fb-plain:hover { color: var(--text); background: var(--tint-accent); }
  .fb-plain:hover { color: var(--accent); }
  .fb-save:hover { background: var(--tint-accent); color: var(--accent); }
  .fb-sg:hover, .fb-chip:hover, .fb-rowopt:hover, .fb-radio:hover { color: var(--text); border-color: var(--accent); }
  .fb-done:hover { background: var(--accent-hover, var(--accent)); }
  .list-more:hover { border-color: var(--accent); background: var(--tint-accent); color: var(--accent); }
}

@media (max-width: 1180px) {
  .fb-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* phones: the bar scrolls with the page (two or three rows would cover it), popovers span the bar */
  .fbar { position: relative; top: auto; }
  .fb-item { position: static; }
  .fb-panel, .fb-panel.fb-right { top: calc(100% + 4px); left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  .fb-sheet-grid, .fb-grid2 { grid-template-columns: minmax(0, 1fr); }
  .fb-sheet-grid > .fb-field:first-child, .fb-span { grid-column: auto; }
  .fb-nicerow > legend { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-btn .ic, .fb-track, .fb-track::after, .list-body { transition: none; }
}