/* Contract room (2026-10-09): minimizable sheet, discussion-first detail,
   match on top, filter drawer, multi-state picker. Phone-first (<=899px). */

/* ---------- list header: filter button ---------- */
.fx-filterbtn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--fx-line, #d9e0ea);
  background: #fff; color: var(--fx-navy, #060d18); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fx-filterbtn[aria-expanded="true"] { background: var(--fx-navy, #060d18); color: #fff; border-color: var(--fx-navy, #060d18); }
.fx-filterbtn[aria-expanded="true"] svg { stroke: #fff; }
.fx-cap { align-items: center; }
.fx-cap-t { flex: 1; min-width: 0; }

/* ---------- filter drawer ---------- */
.fx-fscrim { display: none; }
.fx-drawer-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 22px;
  background: #f0f2f5; border: 0; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 2; }
.fx-drawer-foot { display: none; }
.fx.filters-open { overflow: hidden; }
.fx.filters-open .fx-fscrim { display: block; position: fixed; inset: 0; background: rgba(12, 22, 38, .45); z-index: 1090; }
.fx.filters-open .fx-search.fx-drawer { transform: none; visibility: visible; }
.fx-search.fx-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); z-index: 1091;
  border-radius: 0; border: 0; border-left: 1px solid var(--fx-line, #d9e0ea); margin: 0;
  transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility .22s;
  overflow-y: auto; overscroll-behavior: contain; padding: 54px 18px 18px; }
.fx-search.fx-drawer .fx-drawer-x { display: inline-flex; }
.fx-search.fx-drawer .fx-drawer-foot { display: block; position: sticky; bottom: 0; background: #fff; padding: 12px 0 4px; }
.fx-search.fx-drawer .fx-drawer-foot .fx-btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .fx-search.fx-drawer { transition: none; } }

/* ---------- multi-state picker ---------- */
.fx-wherebtn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--fx-line, #d9e0ea);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--fx-ink2, #4b5361); cursor: pointer; min-height: 40px; }
.fx-fl.on .fx-wherebtn { border-color: var(--fx-navy, #060d18); color: var(--fx-navy, #060d18); }
.fx-wherepanel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--fx-line, #d9e0ea); border-radius: 12px; padding: 10px; background: #fff; }
.fx-wherepanel[hidden] { display: none; }
.fx-state { border: 1px solid var(--fx-line, #d9e0ea); background: #f7f8fa; border-radius: 8px; min-width: 52px;
  padding: 8px 6px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--fx-ink2, #4b5361); }
.fx-state.on { background: var(--fx-navy, #060d18); border-color: var(--fx-navy, #060d18); color: #fff; }
.fx-wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fx-wchips[hidden] { display: none; }
.fx-wherewrap { flex-wrap: wrap; }
.fx-wherewrap .fx-wherepanel, .fx-wherewrap .fx-wchips { flex: 1 1 100%; }

/* ---------- sheet header buttons ---------- */
.fx-hbtn { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 22px; background: #f0f2f5; border: 0;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #182231; }
.fx-hbtn[aria-pressed="true"] { background: var(--fx-navy, #060d18); color: #fff; }
.fx-hbtn[aria-pressed="true"] svg { stroke: #fff; }

/* ---------- minimized mini-bar ---------- */
.fx-minibar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1002; display: flex; gap: 8px; align-items: center;
  background: var(--fx-navy, #060d18); color: #fff; border-radius: 14px; padding: 8px 8px 8px 16px;
  box-shadow: 0 8px 28px rgba(6, 13, 24, .35); }
.fx-minibar[hidden] { display: none; }
.fx-minibar-main { all: unset; flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; cursor: pointer; box-sizing: border-box; }
.fx-minibar-main:focus-visible { outline: 3px solid var(--fx-focus, #8ab4ff); outline-offset: 2px; border-radius: 8px; }
.fx-minibar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.fx-minibar-pct { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #9fe0b8; }
.fx-minibar-pct[hidden] { display: none; }
.fx-minibar-expand, .fx-minibar-x { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 22px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.fx-minibar-expand { background: rgba(255, 255, 255, .14); color: #fff; }
.fx-minibar-x { background: transparent; color: #c7d0dd; }
.fx-minibar-x svg { stroke: #c7d0dd; }
.fx.min .fx-panel { transform: translateY(105%); visibility: hidden; }
.fx.min .fx-scrim { display: none; }
.fx.min .fx-split { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) {
  .fx.min .fx-panel { transform: translateY(105%); visibility: hidden; }
}

/* ---------- match pill + popover ---------- */
.fx-pill.match { cursor: pointer; font-weight: 700; color: var(--fx-match, #0f6b3a); border-color: #bfe3cd; background: #eef8f1; }
.fx-matchpop { position: absolute; top: 118px; left: 16px; right: 16px; z-index: 30; background: #fff;
  border: 1px solid var(--fx-line, #d9e0ea); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 12px 34px rgba(6, 13, 24, .18); display: flex; flex-direction: column; gap: 10px; }
.fx-matchpop-big { font-size: 20px; font-weight: 700; color: var(--fx-match, #0f6b3a); }
.fx-matchpop ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--fx-ink2, #4b5361); }
.fx-matchpop-note { margin: 0; font-size: 13px; color: var(--fx-muted, #6b7686); line-height: 1.5; }
.fx-matchpop-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 18px;
  background: #f0f2f5; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- role picker (Prime / Sub / 1099) ---------- */
.fx-rolepick { display: inline-flex; border: 1px solid var(--fx-line, #d9e0ea); border-radius: 999px; overflow: hidden; }
.fx-rolepick-b { border: 0; background: #fff; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--fx-ink2, #4b5361);
  cursor: pointer; min-height: 44px; }
.fx-rolepick-b + .fx-rolepick-b { border-left: 1px solid var(--fx-line, #d9e0ea); }
.fx-rolepick-b.on { background: var(--fx-navy, #060d18); color: #fff; }

/* ---------- discussion (Facebook/LinkedIn-style thread) ---------- */
.fx-disc-hidden { display: none; }
.fx-disc { display: flex; flex-direction: column; gap: 4px; }
.fx-disc-list { display: flex; flex-direction: column; }
.fx-disc-empty { color: var(--fx-muted, #6b7686); font-size: 15px; padding: 12px 4px; }
.fx-dc { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--fx-line, #e3e8ef); }
.fx-dc:last-child { border-bottom: 0; }
.fx-dc-reply { margin-left: 34px; padding: 10px 0; }
.fx-dav { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--fx-pale, #e8edf4);
  color: var(--fx-navy, #060d18); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.fx-dc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fx-dc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.fx-dc-head strong { color: var(--fx-ink, #15181d); }
.fx-dc-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #eef8f1; color: #0f6b3a; border-radius: 999px; padding: 2px 8px; }
.fx-dc-time { font-size: 13px; color: var(--fx-muted, #6b7686); }
.fx-dc-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fx-ink, #15181d); overflow-wrap: anywhere; }
.fx-dc-acts { display: flex; gap: 14px; align-items: center; }
.fx-dc-like, .fx-dc-rep { border: 0; background: none; padding: 6px 0; font-size: 14px; font-weight: 600;
  color: var(--fx-muted, #6b7686); cursor: pointer; }
.fx-dc-like.on { color: #c2255c; }
.fx-dc-rbox { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fx-dc-rbox textarea, .fx-dc-composer textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  border: 1px solid var(--fx-line, #d9e0ea); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.fx-dc-composer { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--fx-line, #e3e8ef); }
.fx-dc-as { font-size: 13px; color: var(--fx-muted, #6b7686); }

/* ---------- who's in: role filter chips ---------- */
.fx-rolechips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fx-rolechips .fx-fchip.on { border-color: var(--fx-navy, #060d18); background: var(--fx-navy, #060d18); color: #fff; }

/* ---------- phone tuning ---------- */
@media (max-width: 899px) {
  .fx-p-head { align-items: center; }
  .fx-matchpop { top: 108px; left: 12px; right: 12px; }
  .fx-acts { gap: 8px; }
  .fx-rolepick-b { padding: 10px 12px; }
  .fx-minibar { left: 8px; right: 8px; bottom: 8px; }
}