/* Fancy Bricks web 3.0 — /frameworks/ and its three children. Brand classes only (fbw-), auto-enqueued by slug. */

/* .fbw-hero--plain lives in fbw.css (shared by every child page; review 2026-10-19, R12) */

.fbw .fbw-chip code { margin-inline-start: 0.4em; font-family: var(--font-mono); font-weight: 400; /* code is the one monospace exception (owner, 2026-10-19) */
  font-size: 0.875em; color: var(--heading-color); }

/* «Can I switch later?» (A4, 2026-10-20): the three variable chips stand on the right of the intro, stacked, so the
   row is never half empty; below 768 the row wraps and they sit under the text */
.fbw .fbw-fw-chips { flex-direction: column; align-items: flex-start; }
/* «Coming from 1.0 or 2.0» (A4): the section is its intro, so title left and lead right; one column under 768 */
.fbw .fbw-heading.fbw-fw-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-s) var(--space-xxl);
  align-items: start; max-width: none; }
.fbw .fbw-heading.fbw-fw-cols > p { margin: 0; }
.fbw .fbw-fw-row > .fbw-stack > p { font-size: var(--text-l); line-height: 1.55; }
@media (max-width: 767px) { .fbw .fbw-heading.fbw-fw-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Redesign from the canvas «Frameworks and comparisons» (2026-10-22; page_frameworks.py) ---------- */
/* the three steps: one template → converted → your variables (white framed, dark, soft) */
.fbw .fbw-fw-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--space-s); }
.fbw .fbw-fw-flow__b { display: flex; flex-direction: column; gap: 4px; padding: var(--space-m); border-radius: var(--radius); font-size: var(--text-s); line-height: 1.45; }
.fbw .fbw-fw-flow__b b { font-size: var(--text-m); color: var(--heading-color); }
.fbw .fbw-fw-flow__b--frame { background: var(--white); border: 1px solid var(--fbw-line-soft); }
.fbw .fbw-fw-flow__b--dark { background: var(--base-ultra-dark); color: #bfbfbf; }
.fbw .fbw-fw-flow__b--dark b { color: var(--white); }
.fbw .fbw-fw-flow__b--light { background: var(--base-ultra-light); }
.fbw .fbw-fw-flow__n { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; margin-block-end: 4px; border-radius: 50%; background: var(--primary); color: var(--base-ultra-dark); font-weight: 600; font-size: var(--text-xs); }
.fbw .fbw-fw-flow__a { display: grid; place-items: center; color: var(--text-color); }
.fbw .fbw-fw-flow__a .fbw-icon { inline-size: 1.5rem; block-size: 1.5rem; }
@media (max-width: 767px) {
  .fbw .fbw-fw-flow { grid-template-columns: minmax(0, 1fr); }
  .fbw .fbw-fw-flow__a { rotate: 90deg; }
}
.fbw .fbw-fw-same { margin: 0; }
.fbw .fbw-fw-same .fbw-chip code, .fbw .fbw-chips .fbw-chip code { margin: 0; }
.fbw .fbw-fw-meta { font-size: var(--text-xs); color: var(--text-color); margin-block-start: -4px; }

/* the comparison tables: a white box with the soft edge; on a phone the table scrolls inside it */
.fbw .fbw-fw-table { min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); background: var(--white); }
.fbw .fbw-fw-table table { inline-size: 100%; min-inline-size: 40rem; border-collapse: collapse; font-size: var(--text-s); }
.fbw .fbw-fw-table--conv table { min-inline-size: 0; }
.fbw .fbw-fw-table :is(th, td) { padding: 0.85rem var(--space-m); text-align: start; vertical-align: top; border-block-end: 1px solid var(--fbw-line-soft); }
.fbw .fbw-fw-table tbody tr:last-child :is(th, td) { border-block-end: 0; }
.fbw .fbw-fw-table thead th { font-size: var(--text-xs); font-weight: 600; color: var(--text-color); background: var(--base-ultra-light); }
.fbw .fbw-fw-table tbody th { font-weight: 600; color: var(--heading-color); }
.fbw .fbw-fw-table code { font-family: var(--font-mono); font-size: 0.92em; color: var(--heading-color); }
.fbw .fbw-fw-yes { font-weight: 600; color: var(--heading-color); }
.fbw .fbw-fw-yes::before { content: ""; display: inline-block; inline-size: 5px; block-size: 8px; margin-inline-end: 7px; border-radius: 1.5px; background: var(--primary); vertical-align: 1px; }
.fbw .fbw-fw-no { color: var(--text-color); }
.fbw .fbw-fw-table:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--base-ultra-dark); outline-offset: 2px; }

/* static boxes (at a glance, what it adds): the house white box, icon tile left */
.fbw .fbw-fw-boxes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.fbw .fbw-fw-boxes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fbw .fbw-fw-box { flex-direction: row; align-items: flex-start; gap: var(--space-s); }
.fbw .fbw-fw-box h3 { margin: 0 0 4px; font-size: var(--text-m); }
.fbw .fbw-fw-box p { margin: 0; font-size: var(--text-s); line-height: 1.5; }
.fbw :is(.fbw-fw-box, .fbw-fw-know, .fbw-fw-qa, .fbw-fw-chat) code { font-family: var(--font-mono); font-size: 0.9em; color: var(--heading-color); }
@media (max-width: 1023px) { .fbw .fbw-fw-boxes--3 { grid-template-columns: minmax(0, 1fr); } }

/* «Good to know»: a soft note box, not a card */
.fbw .fbw-fw-know { display: flex; gap: var(--space-s); align-items: flex-start; padding: var(--space-m); border-radius: var(--radius); background: var(--primary-ultra-light); }
.fbw .fbw-fw-know b { color: var(--heading-color); }
.fbw .fbw-fw-know p { margin: 4px 0 0; font-size: var(--text-s); line-height: 1.5; }
.fbw .fbw-fw-know .fbw-link { display: inline-flex; margin-block-start: var(--space-xs); }
.fbw .fbw-fw-conv { align-items: start; }

/* categories: 4 × 4 small linked cards, the house hover of a text card */
.fbw .fbw-fw-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-s); }
.fbw a.fbw-fw-cat { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-s) var(--space-m); font-weight: 600; color: var(--heading-color); text-decoration: none; border-radius: var(--radius-inside, calc(var(--radius) * 0.5)); }
.fbw a.fbw-fw-cat .fbw-icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; transition: translate var(--fbw-t-s) var(--ease-brand); }
.fbw a.fbw-fw-cat:is(:hover, :focus-visible) .fbw-icon { translate: 3px 0; }
.fbw a.fbw-fw-cat { --fbw-hb-inset: 5px; --fbw-hb-w: 8px; --fbw-hb-r: 6px; --fbw-hb-b: 2px; }
@media (max-width: 1023px) { .fbw .fbw-fw-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* two answers side by side */
.fbw .fbw-fw-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.fbw .fbw-fw-qa__item h2 { margin: 0; font-size: var(--h4); }
.fbw .fbw-fw-qa__item p { margin: 0; }
.fbw .fbw-fw-qa__item .fbw-link { margin-block-start: auto; padding-block-start: var(--space-xs); }
@media (max-width: 767px) { .fbw .fbw-fw-qa { grid-template-columns: minmax(0, 1fr); } }

/* Ask your AI: abilities as code chips, the draft one outlined; an example exchange */
.fbw .fbw-chip code { font-family: var(--font-mono); font-size: 0.9em; }
.fbw .fbw-chip--draft { border-style: dashed; }
.fbw .fbw-fw-off { display: inline-flex; align-items: center; gap: 0.5em; }
.fbw .fbw-fw-off::before { content: ""; inline-size: 1.75rem; block-size: 1rem; border-radius: 999px; background: var(--fbw-line); box-shadow: inset 0.125rem 0 0 0.125rem var(--white); flex: none; }
.fbw .fbw-fw-chat { display: grid; gap: var(--space-s); padding: var(--space-l); border-radius: var(--fbw-radius-l); background: var(--white); border: 1px solid var(--fbw-line-soft); }
.fbw .fbw-fw-chat__m { margin: 0; max-inline-size: 85%; padding: var(--space-s) var(--space-m); border-radius: var(--radius); background: var(--base-ultra-light); color: var(--heading-color); font-size: var(--text-s); line-height: 1.5; }
.fbw .fbw-fw-chat__m span { display: block; margin-block-end: 2px; font-size: var(--text-xs); color: var(--text-color); }
.fbw .fbw-fw-chat__m--you { justify-self: end; background: var(--base-ultra-dark); color: var(--white); }
.fbw .fbw-fw-chat__m--you span { color: #bfbfbf; }
.fbw .fbw-fw-chat__m code { font-family: var(--font-mono); font-size: 0.9em; color: inherit; }
.fbw .fbw-fw-chat__draft { display: grid; gap: 6px; padding: var(--space-m); border-radius: var(--radius); border: 1px dashed var(--border-color-strong); font-size: var(--text-s); }
.fbw .fbw-fw-chat__draft b { color: var(--heading-color); }
.fbw .fbw-fw-chat__draft code { font-family: var(--font-mono); font-size: 0.9em; }
.fbw .fbw-fw-chat__acts { display: flex; gap: var(--space-xs); margin-block-start: 4px; }
.fbw .fbw-fw-chat__acts i { font-style: normal; font-size: var(--text-xs); font-weight: 600; padding: 6px 12px; border-radius: var(--fbw-radius-btn); border: 1px solid var(--border-color-strong); color: var(--heading-color); }
.fbw .fbw-fw-chat__acts i:first-child { background: var(--base-ultra-dark); border-color: var(--base-ultra-dark); color: var(--white); }
.fbw .fbw-fw-why { align-items: center; }
.fbw .fbw-fw-hl { font-weight: 600; color: var(--heading-color); }
.fbw .fbw-fw-hl::before { content: ""; display: inline-block; inline-size: 5px; block-size: 8px; margin-inline-end: 7px; border-radius: 1.5px; background: var(--primary); vertical-align: 1px; }