/* /style-families/ (web/build/page_components.py, the «Style families» half; 2026-10-22, the owner's canvas
   «Style families and components» with its composition fixed). Loaded on every page like all pages/*.css, so every
   rule is scoped to an fbw-sf- class or to .fbw-demo--lab: the home's demo (.fbw-demo without --lab) is untouched.
   The pieces themselves are fbw.css «Style families demo» (the library's fbk-ui 1:1); nothing here changes a look. */

/* ---------- Hero mosaic: the dominant brick lists every option with its choices (it repeated the demo's pieces) */
.fbw .fbw-sf-mosaic > .fbw-mosaic__a { place-items: center stretch; }
.fbw .fbw-sf-axes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; inline-size: 100%; }
.fbw .fbw-sf-axes li { display: grid; gap: 2px; padding-block-end: 0.625rem; border-block-end: 1px solid var(--fbw-line-soft); }
.fbw .fbw-sf-axes li:last-child { padding-block-end: 0; border-block-end: 0; }
.fbw .fbw-sf-mosaic :is(.fbw-sf-axes, .fbw-mosaic__d) .fbw-mosaic__t { font-size: var(--text-xs); font-weight: 500; }
/* e: one real piece, Outline · White, on the ink brick */
.fbw .fbw-sf-mosaic .fbw-mosaic__e .fbw-mosaic__pad { gap: var(--space-xs); }

/* ---------- A fixed sample: the stage's rules (tone, look, shape, size, hover) without the stage's box ---------- */
:root .fbw .fbw-sf-spec.fbw-demo__stage { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0; border: 0; border-radius: 0; background: none; }
/* Blob is a per-component option (icon boxes), not a live switch: the library's bubble, round on hover */
.fbw .fbw-sf-spec[data-shape="blob"] { --_radius: 70% 30% 30% 70% / 70% 40% 40% 40%; }
.fbw .fbw-sf-spec[data-shape="blob"] .fbw-piece:hover { --_radius: 50%; }
.fbw .fbw-sf-spec--chip .fbw-piece { font-size: var(--text-xs); }

/* ---------- The live demo as ONE block (owner, canvas: «debemos mejorar la composición»: the stage was much taller
   than its pieces, an empty band under them). Now the stage and the controls sit side by side with the same height,
   and the controls are compact (label beside its switch) so that height is close to what the pieces need. The stage
   is two rows of two components; each row takes half the height, and its two cells share one track centered in it:
   the labels of a row start at the same y, the air is split above and below, and changing Size never moves the page. */
:root .fbw .fbw-demo--lab { display: grid; grid-template-columns: minmax(0, 1fr) 27rem; align-items: stretch; gap: var(--space-m);
  padding: 0; border: 0; border-radius: 0; background: none; }
:root .fbw .fbw-demo--lab .fbw-sf-stage { --_sf-div: var(--fbw-line-soft);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0; padding: 0; justify-items: stretch; align-items: stretch; border-radius: var(--fbw-radius-l); overflow: hidden; }
.fbw .fbw-sf-stage[data-tone="white"] { --_sf-div: color-mix(in srgb, var(--white) 24%, transparent); }
/* a row: two columns with the divider drawn between them (the cells don't fill the row's height, the line does) */
.fbw .fbw-sf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; align-items: start;
  column-gap: calc(2 * var(--space-m)); padding: var(--space-m) var(--space-l);
  background: linear-gradient(var(--_sf-div), var(--_sf-div)) center / 1px 100% no-repeat; }
.fbw .fbw-sf-row + .fbw-sf-row { border-block-start: 1px solid var(--_sf-div); }
.fbw .fbw-sf-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); min-inline-size: 0; }
.fbw .fbw-sf-stage .fbw-sf-cell .fbw-demo__row { justify-content: flex-start; align-content: center; }
/* every cell keeps the room its pieces take at Size L, so S · M · L never change the stage's height (no jump; on
   phones the controls sit under the stage). In em of the stage's text, the unit the pieces are sized in (fbw.css):
   an L box is 3em; a check is 0.5625 of the list's text, 1.6875em at L. The share chips are always two lines
   (Share · Post, then Copy link; at L they never fit one), 4.9em + 4px at L, so they don't reflow on a size change */
.fbw .fbw-sf-stage .fbw-sf-cell > .fbw-demo__row { min-block-size: 3em; }
.fbw .fbw-sf-share { display: grid; align-content: center; gap: calc(var(--_gap) + var(--_box) - var(--_size)); min-block-size: calc(4.9em + 4px); }
.fbw .fbw-sf-ck li { min-block-size: 1.6875em; }
.fbw .fbw-sf-k { font-size: var(--text-xs); font-weight: 500; line-height: 1.3; color: var(--text-color); }
/* FBK Icon item: the piece, a title and a line */
.fbw .fbw-sf-ii { display: flex; align-items: flex-start; gap: 0.875rem; max-inline-size: 21rem; }
.fbw .fbw-sf-ii p { margin: 0; }
.fbw .fbw-sf-ii__t { font-size: var(--text-m); font-weight: 600; line-height: 1.3; color: var(--heading-color); margin-block-end: 0.25rem !important; }
.fbw .fbw-sf-ii__p { font-size: var(--text-s); line-height: 1.5; color: var(--text-color); }
/* FBK Check list: the house check, a small box in the list's text (S 18 · M 22 · L 27 px, like the library) */
.fbw .fbw-sf-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.fbw .fbw-sf-ck li { display: flex; align-items: center; gap: 0.625rem; font-size: var(--text-s); line-height: 1.4; color: var(--heading-color); }
.fbw .fbw-sf-ck .fbw-piece { font-size: 0.5625em; }
.fbw .fbw-sf-ck .fbw-icon { stroke-width: 2.75; }
/* White: the stage shows its photo (fbw.css), so the words over it turn white */
.fbw .fbw-sf-stage[data-tone="white"] :is(.fbw-sf-k, .fbw-sf-ii__p) { color: color-mix(in srgb, var(--white) 84%, transparent); }
.fbw .fbw-sf-stage[data-tone="white"] :is(.fbw-sf-ii__t, .fbw-sf-ck li) { color: var(--white); }
/* the controls: the five switches (the web's one segmented control), each label beside its switch, every switch as
   wide as the column so the right edges line up; the state under them, at the bottom of the panel */
:root .fbw .fbw-demo--lab .fbw-demo__controls { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0.625rem;
  padding: var(--space-m); border: 1px solid var(--fbw-line-soft); border-radius: var(--fbw-radius-l); background: var(--white); }
:root .fbw .fbw-demo--lab .fbw-demo__group { flex: none; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: var(--space-s); }
.fbw .fbw-sf-sum { display: grid; gap: 2px; margin: auto 0 0; padding-block-start: var(--space-s); border-block-start: 1px solid var(--fbw-line-soft);
  font-size: var(--text-xs); line-height: 1.45; color: var(--text-color); }
.fbw .fbw-sf-sum strong { font-weight: 600; color: var(--heading-color); }

@media (max-width: 1023px) {
  /* the controls go under the stage, in full rows with the label above (the home's rule) */
  :root .fbw .fbw-demo--lab { grid-template-columns: minmax(0, 1fr); }
  :root .fbw .fbw-demo--lab .fbw-demo__controls { flex-direction: row; flex-wrap: wrap; gap: var(--space-s) 0.75rem; }
  :root .fbw .fbw-demo--lab .fbw-demo__group { flex: 1 1 auto; grid-template-columns: none; gap: 0.35rem; align-content: start; }
  .fbw .fbw-sf-sum { flex: 1 1 100%; }
}
@media (max-width: 767px) {
  .fbw .fbw-sf-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-m); padding: var(--space-m); background: none; }
  .fbw .fbw-sf-row > .fbw-sf-cell + .fbw-sf-cell { padding-block-start: var(--space-m); border-block-start: 1px solid var(--_sf-div); }
  :root .fbw .fbw-demo--lab .fbw-demo__controls { padding: var(--space-s); }
  :root .fbw .fbw-demo--lab .fbw-demo__group { flex-basis: 100%; }
}

/* ---------- The five options, one by one: each family with all its options side by side ---------- */
.fbw .fbw-sf-fams { display: grid; }
.fbw .fbw-sf-fam { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-m) var(--space-xl);
  align-items: start; padding-block: var(--space-l); border-block-start: 1px solid var(--fbw-line-soft); }
.fbw .fbw-sf-fam:first-child { padding-block-start: 0; border-block-start: 0; }
.fbw .fbw-sf-fam:last-child { padding-block-end: 0; }
.fbw .fbw-sf-fam__h { display: grid; gap: var(--space-xs); }
.fbw .fbw-sf-fam__h h3 { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; font-size: var(--h4); line-height: 1.15; letter-spacing: -0.02em; }
.fbw .fbw-sf-fam__n { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; color: var(--text-color); font-variant-numeric: tabular-nums; }
.fbw .fbw-sf-fam__h p { margin: 0; font-size: var(--text-s); line-height: 1.55; color: var(--text-color); }
.fbw .fbw-sf-fam__try { color: var(--heading-color); font-weight: 500; }
.fbw .fbw-sf-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-s); }
.fbw .fbw-sf-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fbw .fbw-sf-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fbw .fbw-sf-opt { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-block-size: 10rem; padding: var(--space-m) var(--space-s) var(--space-s);
  border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); background: var(--white); text-align: center; }
.fbw .fbw-sf-opt__row { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-block-end: var(--space-xs); }
.fbw .fbw-sf-opt__l { font-size: var(--text-s); font-weight: 600; line-height: 1.3; color: var(--heading-color); }
.fbw .fbw-sf-opt__s { font-size: var(--text-xs); line-height: 1.35; color: var(--text-color); }
/* white tiles with the soft edge (a white box on a white section): on gray, Soft's tint and Elevated's surface vanished */
.fbw .fbw-sf-opt--dark { background: var(--base-ultra-dark); border-color: var(--base-ultra-dark); }
.fbw .fbw-sf-opt--dark .fbw-sf-opt__l { color: var(--white); }
.fbw .fbw-sf-opt--dark .fbw-sf-opt__s { color: #bfbfbf; }
@media (max-width: 1023px) {
  .fbw .fbw-sf-fam { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* two per row; an odd last option takes the whole row, so no row is half empty. Sizes stay three across */
  .fbw .fbw-sf-opts, .fbw .fbw-sf-opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
  .fbw .fbw-sf-opts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fbw #size .fbw-sf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fbw #size .fbw-sf-opts > :last-child:nth-child(odd) { grid-column: auto; }
  .fbw .fbw-sf-opt { min-block-size: 8.5rem; padding: var(--space-s) 0.625rem; }
}

/* ---------- The pieces that read them ---------- */
.fbw .fbw-sf-readers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-s); }
.fbw .fbw-sf-readers li { display: flex; align-items: center; gap: 0.875rem; padding: var(--space-s) var(--space-m) var(--space-s) var(--space-s);
  border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); background: var(--white); }
/* every sample takes the S box's width, so the names start at the same x with or without a box (Plain) */
.fbw .fbw-sf-readers .fbw-sf-spec { flex: none; min-inline-size: 2em; }
.fbw .fbw-sf-readers .fbw-piece { pointer-events: none; }
.fbw .fbw-sf-readers li > span:last-child { display: grid; gap: 2px; min-inline-size: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--text-color); }
.fbw .fbw-sf-readers strong { font-size: var(--text-s); font-weight: 600; line-height: 1.3; color: var(--heading-color); }
@media (max-width: 1023px) { .fbw .fbw-sf-readers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .fbw .fbw-sf-readers { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Change them site-wide (a soft section: the white boxes go without an edge) ---------- */
.fbw .fbw-sf-head > .fbw-stack > p { font-size: var(--text-l); line-height: 1.55; }
.fbw .fbw-sf-vars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
.fbw .fbw-sf-vars li { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-m); border-radius: var(--radius); background: var(--white); }
.fbw .fbw-sf-vars code { justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--base-ultra-light); font-size: var(--text-s); font-weight: 500; line-height: 1.3; color: var(--heading-color); }
.fbw .fbw-sf-vars p { margin: 0; font-size: var(--text-s); line-height: 1.5; color: var(--text-color); }
@media (max-width: 767px) { .fbw .fbw-sf-vars { grid-template-columns: minmax(0, 1fr); } }