/* =========================================================
   v6 — Appendix findings as CARDS, matching the objective view
   (.ap-argcard: white surface, 1px border, 14px radius, 22px pad).
   Loaded AFTER v5/appendix.css so these win the cascade.
   ========================================================= */

/* space cards apart instead of the tight 2px dashed-divider list */
.apx-group__list { gap: 14px; }

/* each finding / heatmap / note block becomes a standalone card */
.apx-block {
  background: var(--ms-white);
  border: 1px solid var(--ms-border);
  border-radius: 14px;
  padding: 8px 22px 16px;
  border-top: 1px solid var(--ms-border); /* override dashed divider */
}
/* the heatmap block sits directly under .apx-group (not in the list) */
.apx-group > .apx-block { margin-top: 12px; }

/* neutralize the list first-child divider reset (all cards now bordered) */
.apx-group__list > .apx-block:first-child { border-top: 1px solid var(--ms-border); }

/* the label row already carries the card's top padding — trim its own */
.apx-block .apx-findlabel { padding-top: 8px; }

/* ---- match the objective reading column width (max-width 900 / 44px pad,
   centered) so appendix cards are the same width as .ap-argcard ---- */
.apx-page__header { padding-left: 0; padding-right: 0; }
.apx-page__inner { max-width: 900px; margin: 0 auto; padding: 0 44px; }
.apx-page__body { max-width: 900px; margin: 0 auto; padding: 8px 44px 40px; }

/* ---- filter chips: hover + selected simply tint the pill light gray ---- */
.apx-chip:hover:not(:disabled) { background: var(--ms-platinum); border-color: var(--ms-border); color: var(--ms-fg); }
.apx-chip.is-on { background: var(--ms-platinum); border-color: var(--ms-border); color: var(--ms-fg); }
.apx-chip.is-on .apx-chip__n { background: var(--ms-bg-alt); color: var(--ms-ink-4); }

/* ---- appendix category sub-nav (left index, mirrors argument items) ---- */
.apx-idxcat { justify-content: flex-start; }
.apx-idxcat .gl-bx-item__txt { flex: 1 1 auto; }
.apx-idxcat__n {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--ms-font-mono); font-size: 10px; font-weight: 700;
  color: var(--ms-fg-subtle);
}

/* ---- search moved out of the (now deleted) sticky header: sits top-right,
   scrolls with the page ---- */
.apx-page__body { padding-top: 16px; }
.apx-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.apx-toolbar .apx-search { flex: 0 0 300px; width: 300px; max-width: 100%; }

/* ---- flexible-search feedback: results bar + synonym hint ---- */
.apx-results-bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: -4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ms-border); }
.apx-results-bar__count { font-size: 13px; color: var(--ms-fg-muted); }
.apx-results-bar__count b { color: var(--ms-fg); font-weight: 700; }
.apx-results-bar__syn { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-left: auto; }
.apx-syntag { font-size: 11.5px; color: var(--ms-fg-subtle); }
.apx-syntag b { color: var(--ms-fg-muted); font-weight: 700; }

/* ---- ranked list ---- */
.apx-ranked { display: flex; flex-direction: column; gap: 14px; }
.apx-block--ranked { padding-top: 0; }

/* match strip at the top of each ranked card */
.apx-match { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 12px; margin-bottom: 4px; border-bottom: 1px dashed var(--ms-border); }
.apx-match__rel { display: flex; align-items: center; gap: 9px; }
.apx-relbar { position: relative; width: 88px; height: 6px; border-radius: var(--ms-radius-pill); background: var(--ms-bg-alt); overflow: hidden; }
.apx-relbar__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--ms-radius-pill); }
.apx-relbar--strong .apx-relbar__fill { background: var(--ms-green-2); }
.apx-relbar--good .apx-relbar__fill { background: var(--base-brand-green-4, #7cae9a); }
.apx-relbar--partial .apx-relbar__fill { background: var(--ms-ink-5); }
.apx-match__pct { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ms-fg-subtle); }

/* "matched on" chips */
.apx-why { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.apx-why__lab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ms-fg-subtle); margin-right: 2px; }
.apx-chip-why { display: inline-flex; align-items: center; gap: 6px; max-width: 340px; font-size: 12.5px; color: var(--ms-fg-muted); }
.apx-chip-why + .apx-chip-why { padding-left: 6px; border-left: 1px solid var(--ms-border); }
.apx-chip-why__t { display: none; }
.apx-chip-why__v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apx-chip-why__syn { color: var(--ms-fg-subtle); }
.apx-mk { background: #ffec00; color: var(--ms-fg); border-radius: 3px; padding: 0 2px; font-weight: 700; }