/*
 * Finobazaar Projects – directory, record pages, developer profiles.
 * Uses the theme's tokens when present, with brand values as fallbacks.
 * The status "ledger" is the one distinctive element: two plain questions
 * (did Finobazaar check it? is an approval officially recorded?) answered
 * side by side, each with what it means. Works without projects.js.
 */
.fbj {
	--fbj-blue: var(--fb-brand-blue, #105de1);
	--fbj-blue-dark: var(--fb-brand-blue-dark, #0848b8);
	--fbj-surface: var(--fb-brand-blue-surface, #f3f7ff);
	--fbj-ink: var(--fb-brand-black, #111);
	--fbj-text: var(--fb-text, #202020);
	--fbj-muted: var(--fb-text-2, #5f6368);
	--fbj-line: var(--fb-border, #e3e8f0);
	--fbj-ok: var(--fb-ok, #1e6b3f);
	--fbj-ok-bg: var(--fb-ok-bg, #e9f5ee);
	--fbj-warn: var(--fb-warn, #7f5200);
	--fbj-warn-bg: var(--fb-warn-bg, #fdf0d2);
	--fbj-err: var(--fb-error, #a12a2a);
	--fbj-err-bg: var(--fb-error-bg, #fbeaea);
	--fbj-r: 12px;
	color: var(--fbj-text);
	margin: 0 0 2rem;
	overflow-wrap: anywhere;
}
.fbj h2 { color: var(--fbj-ink); font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 .75rem; }
.fbj h3 { font-size: 1.0625rem; margin: 1.25rem 0 .5rem; }
.fbj a:not(.fb-btn) { color: var(--fbj-blue-dark); text-underline-offset: 2px; }
.fbj a.fb-btn { color: var(--fb-btn-fg, #fff); text-decoration: none; }
.fbj a.fb-btn--outline { color: var(--fb-btn-fg, var(--fbj-blue-dark)); }
.fbj a:focus-visible, .fbj button:focus-visible, .fbj input:focus-visible, .fbj select:focus-visible, .fbj textarea:focus-visible, .fbj summary:focus-visible, .fbj [tabindex]:focus-visible { outline: 3px solid var(--fbj-blue); outline-offset: 2px; }
.fbj-muted { color: var(--fbj-muted); }
.fbj-small { font-size: .875rem; }
.fbj-lead { font-size: 1.0625rem; margin: 0 0 1.25rem; max-width: 62ch; }
.fbj-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fbj-kicker { color: var(--fbj-muted); font-weight: 600; margin: 0 0 .25rem; }
.fbj-part-of { margin: 0 0 .5rem; }

/* Notices and bars */
.fbj-notice { border-radius: var(--fbj-r); padding: .75rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.fbj-notice p { margin: 0; }
.fbj .fbj-notice ul { margin: .5rem 0 0 1.25rem; padding-inline-start: 0; }
.fbj-notice--ok { background: var(--fbj-ok-bg); border-color: #bfe0cc; color: var(--fbj-ok); }
.fbj-notice--error { background: var(--fbj-err-bg); border-color: #efc4c4; color: var(--fbj-err); }
.fbj-bar { border-radius: var(--fbj-r); padding: .75rem 1rem; margin: 0 0 1rem; }
.fbj-bar p { margin: 0; }
.fbj-bar--warn { background: var(--fbj-warn-bg); color: var(--fbj-warn); }
.fbj-bar--muted { background: #eef0f3; color: var(--fbj-text); }

/* Tabs */
.fbj-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.fbj-tabs__tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--fbj-line); border-radius: 999px; background: #fff; color: var(--fbj-text) !important; text-decoration: none; font-weight: 600; }
.fbj-tabs__tab[aria-current="page"] { background: var(--fbj-ink); border-color: var(--fbj-ink); color: #fff !important; }

/* Filters and forms */
.fbj-filters { background: var(--fbj-surface); border: 1px solid var(--fbj-line); border-radius: var(--fbj-r); padding: 1rem; margin: 0 0 1.5rem; }
.fbj-filters__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; margin: .75rem 0 0; }
.fbj-filters__row--main { margin-top: 0; grid-template-columns: 1fr; }
.fbj-filters__more summary { cursor: pointer; font-weight: 600; margin: .75rem 0 0; min-height: 32px; }
.fbj-filters__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0 0; }
.fbj-field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; }
.fbj-filters .fbj-field { margin: 0; }
.fbj-field > label, .fbj-field legend { font-weight: 600; color: var(--fbj-ink); }
.fbj-field input:not([type=checkbox]):not([type=radio]), .fbj-field select, .fbj-field textarea { min-height: 44px; padding: .5rem .75rem; border: 1px solid #c5ccd8; border-radius: 8px; background: #fff; font: inherit; width: 100%; max-width: 100%; box-sizing: border-box; }
.fbj-field textarea { min-height: 6rem; }
.fbj-field__err { color: var(--fbj-err); margin: -.6rem 0 1rem; font-size: .875rem; }
.fbj-check, .fbj-radio { display: flex; gap: .5rem; align-items: flex-start; min-height: 32px; margin: 0 0 .25rem; }
.fbj-check input, .fbj-radio input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: 0 0 auto; }
.fbj-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1rem; border: 0; padding: 0; margin: .75rem 0 0; }
.fbj .fbl-sel__btn { white-space: nowrap; flex: 0 0 auto; }
.fbj .fbl-sel__pinrow input { min-width: 0; }

/* Cards */
.fbj ul.fbj-grid, .fbj ul.fbj-chips, .fbj .fbj-trail ol, .fbj ul.fbj-approvals, .fbj ul.fbj-plans, .fbj ul.fbj-devlist, .fbj ul.fbj-plain, .fbj ul.fbj-gallery__list { list-style: none; margin: 0; padding: 0; padding-inline-start: 0; margin-inline-start: 0; }
.fbj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; }
.fbj-card { display: flex; flex-direction: column; border: 1px solid var(--fbj-line); border-radius: var(--fbj-r); overflow: hidden; background: #fff; }
.fbj-card__media { display: block; aspect-ratio: 16 / 10; background: var(--fbj-surface); }
.fbj-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbj-card__media.is-empty { display: flex; align-items: center; justify-content: center; text-decoration: none; background: repeating-linear-gradient(135deg, var(--fbj-surface), var(--fbj-surface) 10px, #fff 10px, #fff 20px); }
.fbj-card__noimg { color: var(--fbj-muted); font-weight: 600; padding: 0 1rem; text-align: center; }
.fbj-card__body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.fbj-card__body p { margin: 0; }
.fbj-card__type { color: var(--fbj-muted); font-size: .875rem; }
.fbj-card__title { font-size: 1.0625rem; line-height: 1.35; margin: 0; }
.fbj-card__title a { text-decoration: none; }
.fbj-card__loc, .fbj-card__dev { color: var(--fbj-muted); font-size: .9375rem; }
.fbj-card__facts { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-weight: 600; }
.fbj-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fbj-chips--status { margin-top: .35rem !important; }
.fbj-chip { display: inline-flex; align-items: center; min-height: 28px; padding: .15rem .65rem; border-radius: 999px; border: 1px solid var(--fbj-line); background: #fff; font-size: .8125rem; line-height: 1.3; }
.fbj-chip--ok { background: var(--fbj-ok-bg); border-color: #bfe0cc; color: var(--fbj-ok); font-weight: 600; }
.fbj-chip--plain { background: #f4f5f7; color: var(--fbj-muted); }

/* Trail */
.fbj-trail ol { display: flex; flex-wrap: wrap; font-size: .9375rem; margin: 0 0 1rem !important; }
.fbj-trail li + li::before { content: "›"; color: var(--fbj-muted); margin: 0 .5rem; }
.fbj-trail a { display: inline-block; min-height: 24px; }

/* The ledger: what was checked and what is officially recorded */
.fbj-ledger { margin: 1rem 0 1.5rem; }
.fbj-ledger dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--fbj-line); border-radius: var(--fbj-r); overflow: hidden; margin: 0; background: #fff; }
.fbj-ledger__row { padding: .9rem 1rem; border-bottom: 1px solid var(--fbj-line); border-right: 1px solid var(--fbj-line); display: flex; flex-direction: column; gap: .3rem; border-top: 4px solid transparent; }
.fbj-ledger dt { font-size: .8125rem; color: var(--fbj-muted); font-weight: 600; }
.fbj-ledger dd { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.fbj-ledger dd strong { color: var(--fbj-ink); font-size: 1.0625rem; }
.fbj-ledger dd span { font-size: .875rem; color: var(--fbj-muted); }
.fbj-ledger__row--verified, .fbj-ledger__row--official { border-top-color: var(--fbj-ok); }
.fbj-ledger__row--verified dd strong, .fbj-ledger__row--official dd strong { color: var(--fbj-ok); }
.fbj-ledger__row--pending { border-top-color: #e0a100; }
.fbj-ledger__row--unverified, .fbj-ledger__row--stated, .fbj-ledger__row--none { border-top-color: #c5ccd8; }
.fbj-ledger__scope { color: var(--fbj-text) !important; }
.fbj-ledger dd a { display: inline-flex; min-height: 24px; align-items: center; font-size: .875rem; }

/* Sections */
.fbj-sec { margin: 0 0 1.5rem; }
.fbj-src { color: var(--fbj-muted); font-size: .8125rem; }
.fbj-src a { min-height: 24px; display: inline-block; }
.fbj-facts { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.fbj-facts th, .fbj-facts td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--fbj-line); vertical-align: top; }
.fbj-facts thead th { font-size: .8125rem; color: var(--fbj-muted); }
.fbj-facts tbody th { font-weight: 600; width: 30%; }
.fbj-approval { border: 1px solid var(--fbj-line); border-radius: var(--fbj-r); padding: .75rem 1rem; margin: 0 0 .75rem; }
.fbj-approval.is-official { border-left: 4px solid var(--fbj-ok); }
.fbj-approval__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .5rem; }
.fbj-approval__dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem 1rem; margin: 0; }
.fbj-approval__dl dt { font-size: .8125rem; color: var(--fbj-muted); }
.fbj-approval__dl dd { margin: 0; }
.fbj-plans li, .fbj-devlist li { padding: .5rem 0; border-bottom: 1px solid var(--fbj-line); display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.fbj-plans a, .fbj-devlist a { min-height: 24px; display: inline-flex; align-items: center; font-weight: 600; }
.fbj-dev__name { font-size: 1.0625rem; margin: 0 0 .5rem; }
.fbj-gallery__list { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: .5rem; border-radius: var(--fbj-r); }
.fbj-gallery__list li { scroll-snap-align: start; }
.fbj-gallery figure { margin: 0; }
.fbj-gallery img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--fbj-r); display: block; }
.fbj-gallery figcaption { font-size: .8125rem; color: var(--fbj-muted); margin: .25rem 0 0; }

/* Boxes and forms on the record page */
.fbj-box { border: 1px solid var(--fbj-line); border-radius: var(--fbj-r); padding: 1rem; margin: 0 0 1rem; background: #fff; }
.fbj .fbj-box > :first-child { margin-top: 0; }
.fbj-fix > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.fbj-fix[open] > summary { margin-bottom: .75rem; }
.fbj-empty { background: var(--fbj-surface); border-radius: var(--fbj-r); padding: 1rem; }
.fbj-pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0; }
.fbj-pager a { min-height: 44px; display: inline-flex; align-items: center; }
.fbj-disclaimer { border-top: 1px solid var(--fbj-line); margin: 2rem 0 0; padding: 1rem 0 0; color: var(--fbj-muted); }
.fbj-disclaimer h2 { font-size: 1rem; margin-top: 0; }

@media (max-width: 40rem) {
	.fbj-facts thead { display: none; }
	.fbj-facts tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--fbj-line); padding: .4rem 0; }
	.fbj-facts th, .fbj-facts td { border: 0; padding: .2rem .25rem; }
	.fbj-facts tbody th { width: auto; }
	.fbj-facts td.fbj-src { grid-column: 1 / -1; }
	.fbj-ledger__row { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fbj-gallery__list { scroll-behavior: auto; }
}

/* Stand-alone links: a full finger-sized target on phones. */
.fbj a.fbj-tap { display: inline-flex; align-items: center; min-height: 44px; }

/* Status ledger: two readable columns; an odd last cell takes the full row; one column on phones. */
.fbj-ledger__row:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 600px) { .fbj-ledger dl { grid-template-columns: 1fr; } }
/* No photo: a slim band instead of an empty picture frame. */
.fbj-card__media.is-empty { aspect-ratio: auto; height: 12px; }

/* Directory filters: a "Filters" toggle on phones; always open on wider screens. */
.fbj-filterbox { margin: 0 0 1rem; }
.fbj-filterbox__toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--fbj-line); border-radius: 999px; background: #fff; font-weight: 600; cursor: pointer; margin: 0 0 .75rem; }
@media (min-width: 48em) {
	.fbj-filterbox__toggle { display: none; }
}
/* Cards keep their own height: a card without a photo does not stretch to its neighbour's. */
.fbj-grid { align-items: start; }