/* BridgeMD public inner pages: finder results, trial pages, account, legal and error pages.
   Same look as the homepage (see cv-tokens.css): Inter and Inter Display, white page, hairline tiles with
   radius 22, pill buttons, 50px fields with radius 14 and the accent focus ring. Scoped to body.fx.
   finder.detail.css (trial, study, thanks, applications) and finder.other.css (browse, condition, how,
   sign in, legal, error) extend this file. */

body.fx {
  --fx-ok: #17653a; --fx-ok-bg: #eaf6ef; --fx-warn: #8a5a00; --fx-warn-bg: #fff4e0; --fx-bad: #a43a2a; --fx-bad-bg: #fbebe8;
  --fx-ring: 0 0 0 3px rgba(18, 87, 176, .16);
  --fx-pad: 88px;                       /* space under the content, above the footer */
  --fx-h3: 22px; --fx-h3-lh: 28.6px;    /* h3 of the type scale, which steps down on tablet and phone */
  color: var(--cv-ink); font-feature-settings: normal;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
/* A plain white page. The shared public rule paints a blue haze at the top, which the new look drops. */
body.pub-marketing.fx { background: #fff; }
@media (max-width: 1199px) { body.fx { --fx-pad: 72px; --fx-h3: 21px; --fx-h3-lh: 27.3px; } }
@media (max-width: 767px) { body.fx { --fx-pad: 64px; --fx-h3: 20px; --fx-h3-lh: 26px; } }
/* The floating navigation is fixed and 86px tall, so every page starts below it. */
body.pub-marketing.fx .pub-main { flex: 1 0 auto; min-height: 0; padding-top: 120px; }
@media (max-width: 767px) { body.pub-marketing.fx .pub-main { padding-top: 104px; } }
body.fx :focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 3px; }
body.fx .ico { flex: none; }

/* ---------- Page frame and header ---------- */
.fx-wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--cv-w) + var(--cv-gut) * 2); margin: 0 auto; padding: 0 var(--cv-gut) var(--fx-pad); }
.fx-wrap.is-narrow { max-width: calc(760px + var(--cv-gut) * 2); }
.fx-wrap.is-auth { max-width: calc(520px + var(--cv-gut) * 2); }
.fx-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0 0 40px; }
.fx-head > * { margin: 0; }
.fx-head .cv-lead { max-width: 600px; }
.fx-wrap > .cv-head, .fx-head.cv-head { margin-bottom: 40px; }
.fx-title { max-width: 18em; text-wrap: balance; overflow-wrap: anywhere; }
/* Page titles use the h2 size of the type scale. The shared stylesheet sets sizes on some page h1s, so this is explicit. */
body.fx h1.cv-h2 { margin: 0; font-size: 46px; line-height: 50.6px; letter-spacing: -.03em; }
@media (max-width: 1199px) { body.fx h1.cv-h2 { font-size: 38px; line-height: 42px; } }
@media (max-width: 767px) { body.fx h1.cv-h2 { font-size: 32px; line-height: 35px; } }
.fx-title em { font-style: normal; color: var(--cv-accent); }
.fx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons. New markup uses cv-btn (cv-tokens.css); these add a small size, a full width and states. ---------- */
.cv-btn.fx-sm { height: 40px; padding: 4px 4px 4px 16px; gap: 10px; font-size: 14px; }
.cv-btn.fx-sm > i { width: 30px; height: 30px; }
.cv-btn.fx-sm > i svg { width: 14px; height: 14px; }
.cv-btn:not(:has(> i)) { padding-right: 22px; }
.cv-btn.fx-sm:not(:has(> i)) { padding-right: 16px; }
.cv-btn.fx-block { display: flex; width: 100%; justify-content: space-between; }
.cv-btn.fx-block:not(:has(> i)) { justify-content: center; }
.cv-btn:disabled, .cv-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cv-btn--accent:disabled:hover, .cv-btn--accent[disabled]:hover { background: var(--cv-accent); }
.cv-btn:disabled:hover > i, .cv-btn[disabled]:hover > i { transform: none; }
/* Buttons that other templates and macros still render as .btn get the same pill look. */
body.fx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--cv-r-pill);
  font: 500 15px/1 var(--cv-f); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background-color .25s var(--cv-ease), border-color .25s ease, color .25s ease; }
body.fx .btn-primary { background: var(--cv-accent); color: #fff; }
body.fx .btn-primary:hover { background: var(--cv-accent-d); color: #fff; box-shadow: none; text-decoration: none; }
body.fx .btn-ghost { background: transparent; border-color: var(--cv-line-2); color: var(--cv-ink); }
body.fx .btn-ghost:hover { background: rgba(10, 20, 40, .04); border-color: rgba(10, 20, 40, .4); color: var(--cv-ink); }
body.fx .btn-danger { background: var(--fx-bad); color: #fff; }
body.fx .btn-danger:hover { background: #8f2f20; color: #fff; }
body.fx .btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
body.fx .btn-lg { min-height: 50px; }
body.fx .btn-block { display: flex; width: 100%; }
body.fx .btn:disabled, body.fx .btn[disabled] { opacity: .5; cursor: not-allowed; }
body.fx .btn .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx .link-btn, .fx-link { border: 0; background: none; padding: 0; color: var(--cv-accent); font: 500 14px/1.4 var(--cv-f); cursor: pointer; }
body.fx .link-btn:hover, .fx-link:hover { color: var(--cv-accent-d); text-decoration: underline; text-underline-offset: 3px; }

body.fx textarea { border-radius: 14px; }

/* ---------- Search row: two fields and the button ---------- */
.fx-search { margin: 0; }
.fx-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; }
.fx-fieldwrap { position: relative; display: flex; min-width: 0; }
.fx-field { position: relative; display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; height: 50px; margin: 0; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--cv-line-2); border-radius: 14px; background: #fff; font-weight: 400; cursor: text; transition: border-color .2s ease, box-shadow .2s ease; }
.fx-field:hover { border-color: rgba(10, 20, 40, .34); }
.fx-field:focus-within { border-color: var(--cv-accent); box-shadow: var(--fx-ring); }
.fx-field .ico { width: 18px; height: 18px; fill: none; stroke: var(--cv-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.fx .fx-field input { flex: 1; width: auto; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; font: 400 15px/1.3 var(--cv-f); color: var(--cv-ink); }
body.fx .fx-field input:focus { border: 0; box-shadow: none; outline: 0; }
body.fx .fx-field input::placeholder { color: #6d7b93; }
.fx-fieldwrap .hero-suggest { top: calc(100% + 6px); z-index: 30; max-height: 340px; padding: 6px; border: 1px solid var(--cv-line-2); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -16px rgba(10, 20, 40, .28); }
.fx-fieldwrap .hero-suggest-item { min-height: 40px; padding: 9px 12px; border-radius: 10px; font-size: 15px; color: var(--cv-text); }
.fx-fieldwrap .hero-suggest-item:hover, .fx-fieldwrap .hero-suggest-item.is-active { background: var(--cv-surface); color: var(--cv-ink); }
.fx-fieldwrap .hero-suggest-tag { font-size: 11px; letter-spacing: 0; text-transform: none; background: var(--cv-surface-2); color: var(--cv-accent); }

/* ---------- Count line and filters ---------- */
.fx-bar-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 40px 0 16px; min-height: 40px; }
.fx-count { margin: 0; font: 400 15px/24px var(--cv-f); letter-spacing: -.005em; color: var(--cv-text); }
.fx-count b { color: var(--cv-ink); font-weight: 600; }
.fx-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--cv-r-pill); background: var(--cv-accent); color: #fff; font-size: 12px; font-weight: 600; }
.fx-badge[hidden] { display: none; }
.fx-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 24px; margin: 0 0 16px; padding: 24px 26px; background: var(--cv-surface); border: 1px solid var(--cv-line); border-radius: var(--cv-r-tile); animation: fx-open .25s var(--cv-ease); }
.fx-filters[hidden] { display: none; }
@keyframes fx-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx-filters { animation: none; } }
.fx-refine { display: contents; }
.fx-fg { display: grid; gap: 8px; min-width: 0; }
.fx-fg-wide { flex-basis: 100%; }
.fx-fg-end { margin-left: auto; align-self: flex-end; padding-bottom: 12px; }
.fx-fl { margin: 0; font: 500 13px/1.2 var(--cv-f); letter-spacing: 0; color: var(--cv-muted); }
.fx-select { margin: 0; height: 46px; min-width: 200px; padding: 0 36px 0 14px; border: 1px solid var(--cv-line-2); border-radius: 14px; background-color: #fff; font: 400 15px/1.3 var(--cv-f); color: var(--cv-ink); box-shadow: none; }
.fx-select:hover { border-color: rgba(10, 20, 40, .34); }
.fx-select:focus { border-color: var(--cv-accent); outline: 0; box-shadow: var(--fx-ring); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--cv-line-2); border-radius: var(--cv-r-pill); background: #fff; color: var(--cv-ink);
  font: 500 14px/1 var(--cv-f); letter-spacing: -.005em; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.fx-chip:hover { border-color: rgba(10, 20, 40, .4); }
.fx-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fx-chip::before { content: ""; width: 0; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231257b0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: width .2s ease; }
.fx-chip:has(input:checked) { background: var(--cv-surface-2); border-color: var(--cv-accent); color: var(--cv-accent-d); }
.fx-chip:has(input:checked)::before { width: 12px; }
.fx-chip:has(input:focus-visible) { outline: 2px solid var(--cv-accent); outline-offset: 2px; }
.fx-notice { margin: 0 0 16px; padding: 16px 22px; border-radius: 16px; background: var(--cv-surface); color: var(--cv-ink); font: 400 15px/24px var(--cv-f); }

/* ---------- Result cards. The whole card opens the study; its title is the link. ---------- */
.fx-list { display: grid; gap: var(--cv-gap); }
.fx-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; box-sizing: border-box; padding: 26px 28px; border: 1px solid var(--cv-line); border-radius: var(--cv-r-tile); background: #fff; transition: background-color .25s ease, border-color .25s ease; }
.fx-card[hidden] { display: none; }
.fx-card:hover { background: var(--cv-surface); border-color: var(--cv-line-2); }
.fx-card:has(.fx-card-link:focus-visible) { outline: 2px solid var(--cv-accent); outline-offset: 3px; }
.fx-card-title { margin: 0; }
.fx-card-link { color: var(--cv-ink); text-decoration: none; }
.fx-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.fx .fx-card-link:focus-visible { outline: 0; }
.fx-card:hover .fx-card-link { color: var(--cv-accent); }
.fx-card-sum { margin: 6px 0 0; font: 400 15px/24px var(--cv-f); letter-spacing: -.005em; color: var(--cv-text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 12px 0 0; font: 400 13px/19.5px var(--cv-f); color: var(--cv-muted); }
.fx-meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fx-meta .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-card-act { display: flex; align-items: center; justify-content: flex-end; }
/* The call to action is the same blue pill as the Search button, so every card reads as something to press. */
.fx-go-hint { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 5px 5px 5px 20px; border-radius: var(--cv-r-pill); background: var(--cv-accent); color: #fff; font: 500 15px/1 var(--cv-f); letter-spacing: -.01em; white-space: nowrap; transition: background-color .2s ease; }
.fx-go-hint .ico { box-sizing: border-box; width: 36px; height: 36px; padding: 10px; border-radius: 50%; background: #fff; color: var(--cv-accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--cv-ease); }
.fx-card:hover .fx-go-hint { background: var(--cv-accent-d); }
.fx-card:hover .fx-go-hint .ico { transform: translateX(2px); }
.fx-applied { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--cv-r-pill); background: var(--fx-ok-bg); font: 500 14px/1 var(--cv-f); color: var(--fx-ok); white-space: nowrap; }
.fx-applied .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fx-more { display: grid; justify-items: center; gap: 12px; margin: 32px 0 0; }
.fx-more[hidden] { display: none; }
.fx-more-n { margin: 0; font: 400 13px/19.5px var(--cv-f); color: var(--cv-muted); }
.fx-empty { margin: 40px 0 0; padding: 56px 28px; text-align: center; }
.fx-empty[hidden] { display: none; }
.fx-empty h2 { margin: 0 0 10px; }
.fx-empty p { margin: 0 auto 24px; max-width: 480px; }
.fx-noresults { padding: 24px; margin: 16px 0 0; font: 400 15px/24px var(--cv-f); color: var(--cv-text); }
.fx-foot-note { max-width: 640px; margin: 48px auto 0; text-align: center; font: 400 13px/19.5px var(--cv-f); color: var(--cv-muted); }

@media (max-width: 767px) {
  .fx-bar { grid-template-columns: minmax(0, 1fr); }
  .fx-bar > .cv-btn { width: 100%; justify-content: space-between; }
  .fx-bar-line { margin: 28px 0 14px; }
  .fx-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 22px 20px 20px; }
  .fx-card-sum { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .fx-card-act { justify-content: flex-start; margin-top: 16px; }
  .fx-filters { gap: 18px; padding: 20px 18px; }
  .fx-fg:not(.fx-fg-wide):not(.fx-fg-end) { flex: 1 1 calc(50% - 12px); }
  .fx-select { width: 100%; min-width: 0; padding: 0 30px 0 12px; font-size: 14px; }
  .fx-fg-end { margin-left: 0; }
  .fx-foot-note { margin-top: 36px; }
}