/* /components/ and /style-families/ — page-specific additions on top of fbw.css (never edit fbw.css here). */

/* ---------- The index (2026-10-22, canvas «Style families and components»): search, category chips, one grid ---------- */
.fbw .fbw-cmp { display: grid; gap: var(--space-m); }
/* without script every card shows and the tools stay hidden (fbw.js adds .fbw-cmp--js) */
.fbw .fbw-cmp:not(.fbw-cmp--js) .fbw-cmp-tools { display: none; }
.fbw .fbw-cmp-tools { display: grid; gap: var(--space-s); }
.fbw .fbw-cmp-chips { margin: 0; }
.fbw .fbw-cmp-count { margin: 0; font-size: var(--text-s); font-weight: 600; color: var(--heading-color); }
.fbw .fbw-cmp-empty { margin: 0; padding: var(--space-xl) var(--space-l); text-align: center; border: 1px dashed var(--fbw-line); border-radius: var(--radius); }
.fbw .fbw-cmp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
.fbw .fbw-cmp-item { display: flex; scroll-margin-top: var(--space-xxl); }
.fbw .fbw-cmp-item[hidden] { display: none; }
/* the card: the template card (fbw.css .fbw-card, house hover with the brackets in the picture) plus its text */
.fbw .fbw-cmp-card { flex: 1 1 auto; }
.fbw .fbw-cmp-card .fbw-card__frame img { object-position: center; }
.fbw .fbw-cmp-card__body { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1 1 auto; }
.fbw .fbw-cmp-card__cat { font-size: var(--text-xs); color: var(--text-color); }
.fbw .fbw-cmp-card .fbw-card__title { margin: 0; font-size: var(--text-l); }
.fbw .fbw-cmp-card__desc { font-size: var(--text-s); line-height: 1.5; color: var(--text-color); }
.fbw .fbw-cmp-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); margin-block-start: auto; padding-block-start: var(--space-xs); font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-cmp-card__meta b { font-weight: 600; color: var(--heading-color); }
/* a card reached from a link (#cmp-<slug>, the template page's «What's inside») shows where it is */
.fbw .fbw-cmp-item:target .fbw-card__frame { outline: 2px solid var(--base-ultra-dark); outline-offset: -2px; }
@media (max-width: 1200px) { .fbw .fbw-cmp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fbw .fbw-cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fbw .fbw-cmp-grid { grid-template-columns: minmax(0, 1fr); } }

/* A4 (2026-10-20, owner: never a half-empty row). An intro that is the whole section: title left, lead right
   (FBK Intro «2 columns»); one column under 768 */
.fbw .fbw-heading.fbw-cmp-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-cmp-cols > p { margin: 0; }
/* an intro with a link on the right: its lead keeps the lead size of the other intros */
.fbw .fbw-cmp-row > .fbw-stack > p { font-size: var(--text-l); line-height: 1.55; }
@media (max-width: 767px) { .fbw .fbw-heading.fbw-cmp-cols { grid-template-columns: minmax(0, 1fr); } }
/* a long link («Why style families…») stays on the right instead of wrapping under the text */
@media (min-width: 768px) {
  .fbw .fbw-cmp-row { flex-wrap: nowrap; }
  .fbw .fbw-cmp-row > .fbw-stack { flex: 1 1 auto; }
  .fbw .fbw-cmp-row > a { flex: 0 1 auto; max-width: 22rem; }
}

/* ---------- Component pages (/components/<slug>/, page_component_button.py) ---------- */
/* Brand = the templates' demo purple (fb-30's Fancy Framework) inside the live demos, so a component looks as it does
   in the library; the web keeps its yellow. The library's root variables that derive from --primary are computed at
   :root, so they are restated here too */
.fbw .fbw-demo-palette {
  --primary: #7c3aed; --primary-dark: #632ebe; --primary-light: #ebe1fc; --primary-ultra-light: #f8f5fe; --text-on-primary: #ffffff;
  --fbk-accent: var(--primary); --fbk-text-hover: var(--fbk-accent); --fbk-accent-on-dark: color-mix(in srgb, var(--primary) 50%, var(--white));
  --focus-ring-color: var(--primary);
  /* the library's hover time (the web sets its own on body.fbw: audit 2) */
  --fbk-hover: 0.4s;
}
.fbw .fbw-cmpage-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-cmpage-facts b { font-weight: 600; color: var(--heading-color); }
/* the playground: the families demo's frame and segmented controls (fbw.css .fbw-demo); the stage is a real
   fbk-section, so the button adapts on Dark and Brand exactly as in a template */
.fbw .fbw-bplay .fbw-bplay__stage.fbk-section { display: grid; place-items: center; min-block-size: 14rem; padding: var(--space-xl) var(--space-l);
  border-radius: var(--radius); border: 1px solid var(--fbw-line-soft); background: var(--fbk-bg); transition: background-color var(--fbw-t-s) var(--fbw-ease-color); }
.fbw .fbw-bplay .fbw-bplay__stage.fbk-section--brand { --fbk-bg: var(--primary); }
.fbw .fbw-bplay__reset { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--text-s); }
/* the options: a plain table, the description under the option's name */
.fbw .fbw-cmpage-opts { overflow-x: auto; max-inline-size: 100%; /* the container wraps (flex column): without it the table's min width widened the whole line, 8 px past the gutter at 390 */ border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); background: var(--white); }
.fbw .fbw-cmpage-opts table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-s); }
.fbw .fbw-cmpage-opts :is(th, td) { padding: var(--space-s) var(--space-m); text-align: start; vertical-align: top; border-block-end: 1px solid var(--fbw-line-soft); }
.fbw .fbw-cmpage-opts tbody tr:last-child :is(th, td) { border-block-end: 0; }
.fbw .fbw-cmpage-opts thead th { font-size: var(--text-xs); font-weight: 600; color: var(--text-color); background: var(--base-ultra-light); }
.fbw .fbw-cmpage-opts tbody th { font-weight: 600; color: var(--heading-color); inline-size: 34%; }
.fbw .fbw-cmpage-opts__desc { display: block; margin-block-start: 4px; font-weight: 400; color: var(--text-color); line-height: 1.5; }
.fbw .fbw-cmpage-opts td:last-child { white-space: nowrap; }
.fbw .fbw-cmpage-used { list-style: none; margin: 0; padding: 0; }
.fbw .fbw-cmp-grid.fbw-cmp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .fbw .fbw-cmp-grid.fbw-cmp-grid--3 { grid-template-columns: minmax(0, 1fr); } }
/* a component page's H1 is short («FBK Button»): the interior pages' H1 size, not the template page's compact one,
   so no section H2 outranks it (SISTEMA-UI «Jerarquía de títulos») */
.fbw .fbw-cmpage-hero .fbw-single-hero__text h1 { font-size: var(--fbw-h1-child); line-height: 1.05; letter-spacing: -0.03em; }

/* ---------- Index: sub-components named in their parent, and «Seen best inside a template» (owner, 2026-10-22) ---------- */
.fbw .fbw-cmp-card__subs { font-size: var(--text-s); color: var(--heading-color); }
.fbw .fbw-cmp-block[hidden] { display: none; }
.fbw .fbw-cmp-more { display: grid; gap: var(--space-m); margin-block-start: var(--space-xl); padding-block-start: var(--space-xl); border-block-start: 1px solid var(--fbw-line-soft); }
.fbw .fbw-cmp-more .fbw-heading h2 { font-size: var(--h3); }
.fbw .fbw-cmp-more .fbw-heading p { margin: 0; }
.fbw .fbw-cmp-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
/* a row is a small text card that is a link: the house hover of a text card (fbw.css a.fbw-feature) */
.fbw .fbw-cmp-row { display: flex; flex-direction: column; gap: 4px; block-size: 100%; padding: var(--space-m); border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); background: var(--white); color: inherit; text-decoration: none; }
.fbw .fbw-cmp-row__cat { font-size: var(--text-xs); color: var(--text-color); }
.fbw .fbw-cmp-row__title { margin: 0; font-size: var(--text-m); font-weight: 600; color: var(--heading-color); }
.fbw .fbw-cmp-row__desc { font-size: var(--text-s); line-height: 1.5; color: var(--text-color); }
.fbw .fbw-cmp-row__go { margin-block-start: auto; padding-block-start: var(--space-xs); font-size: var(--text-s); font-weight: 600; color: var(--heading-color); }
.fbw .fbw-cmp-row__go::after { content: " →"; }
@media (max-width: 1000px) { .fbw .fbw-cmp-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fbw .fbw-cmp-rows { grid-template-columns: minmax(0, 1fr); } }