/* /my-account/ — the customer panel ([fbk_account], web/wp/mu-plugins/fbk-account.php, classes fbw-acct-…), ported
   from the approved Design canvas «My account redesign» (account.css there, 2026-10-19): side nav + content, white
   page, soft blocks only for the plan banner, white cards with a hairline, yellow only as the marker (mini brick in
   the nav, the kicker, the icon tile) and on the one accent button. Brand tokens only (fbw.css / Fancy Framework).
   The block at the end styles the logged-out view (the 3.0 template «Contact · Log in and register»). */

/* the panel's section is white (canvas), whatever modifier the pasted section carries */
.fbw .fbw-section.fbw-account-wrap { background: var(--white); padding-block: var(--space-l) var(--space-section); }

.fbw .fbw-acct { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-xl); align-items: start; color: var(--text-color); }
.fbw .fbw-acct p { margin: 0; }
.fbw .fbw-acct h1, .fbw .fbw-acct h2, .fbw .fbw-acct h3 { margin: 0; color: var(--heading-color); text-wrap: balance; }
.fbw .fbw-acct-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }

/* ---- side: who + nav ---------------------------------------------------------------------------------------- */
.fbw .fbw-acct__side { display: flex; flex-direction: column; gap: var(--space-m); min-width: 0; }
.fbw .fbw-acct__who { display: flex; align-items: center; gap: 0.75rem; }
.fbw .fbw-acct__avatar { inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--base-ultra-light); display: grid; place-items: center; font-weight: 600; color: var(--heading-color); flex: none; }
.fbw .fbw-acct__name { font-weight: 600; color: var(--heading-color); line-height: 1.3; }
.fbw .fbw-acct__plan-name { font-size: var(--text-xs); }
.fbw .fbw-acct-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fbw .fbw-acct-nav a {
  display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 10px 12px; border-radius: var(--fbw-radius-btn);
  text-decoration: none; font-weight: 500; font-size: var(--text-s); color: var(--text-color); position: relative;
  transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1), color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fbw .fbw-acct-nav a:hover { background: var(--base-ultra-light); color: var(--heading-color); }
.fbw .fbw-acct-nav a[aria-current="page"] { background: var(--base-ultra-light); color: var(--heading-color); }
/* the brand mini brick marks the current section */
.fbw .fbw-acct-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 50%; translate: 0 -50%; inline-size: 6px; block-size: 14px; border-radius: 2px; background: var(--primary); }
.fbw .fbw-acct-nav__sep { block-size: 1px; background: var(--fbw-line-soft); margin: 8px 12px; }

/* ---- main column ---------------------------------------------------------------------------------------------- */
.fbw .fbw-acct__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-l); }
.fbw .fbw-acct-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.fbw .fbw-acct-head h1 { font-size: var(--h2); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.fbw .fbw-acct-head p { margin-top: 0.5rem; font-size: var(--text-l); }
.fbw .fbw-acct-sec { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.fbw .fbw-acct-sec--roomy { gap: 1.25rem; }
.fbw .fbw-acct-sec__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.fbw .fbw-acct-sec h2, .fbw .fbw-acct-tilecard h2 { font-size: var(--h5); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.fbw .fbw-acct .fbw-acct-h3, .fbw .fbw-acct .fbw-acct-steps h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.fbw .fbw-acct-muted { font-size: var(--text-s); color: var(--text-color); }
.fbw .fbw-acct-hint { font-size: var(--text-xs); color: var(--text-color); }
.fbw .fbw-acct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.fbw .fbw-acct-row--links, .fbw .fbw-acct-row--wide { gap: 0.75rem 1.25rem; }
.fbw .fbw-acct-split { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; }
.fbw .fbw-acct-split--center { align-items: center; }
.fbw .fbw-acct-titled { display: flex; align-items: flex-start; gap: 1rem; flex: 1 1 20rem; min-width: 0; }
.fbw .fbw-acct-titled > div { display: flex; flex-direction: column; gap: 0.25rem; }
.fbw .fbw-acct-divided { padding-top: 1.25rem; border-top: 1px solid var(--fbw-line-soft); }
.fbw .fbw-acct-empty { padding: var(--space-m); border-radius: var(--radius-s); background: var(--base-ultra-light); font-size: var(--text-s); }

/* cards */
.fbw .fbw-acct-card { background: var(--white); border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); padding: calc(var(--space-m) + 0.25rem); }
.fbw .fbw-acct-card--strong { border: 2px solid var(--base-ultra-dark); }

/* plan banner (soft block) */
.fbw .fbw-acct-banner { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding: calc(var(--space-m) + 0.25rem) 2rem; border-radius: var(--radius); background: var(--base-ultra-light); }
.fbw .fbw-acct-banner__txt { display: flex; flex-direction: column; gap: 0.375rem; max-width: 35rem; }
.fbw .fbw-acct-banner__t { font-size: var(--h4); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.fbw .fbw-acct-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); font-weight: 500; color: var(--text-color); }
.fbw .fbw-acct-kicker::before { content: ""; inline-size: 6px; block-size: 10px; border-radius: 2px; background: var(--primary); flex: none; }
.fbw .fbw-acct-price { font-size: var(--h3); font-weight: 700; letter-spacing: -0.02em; color: var(--heading-color); line-height: 1.1; white-space: nowrap; }
.fbw .fbw-acct-price span { font-size: var(--text-m); font-weight: 500; color: var(--text-color); letter-spacing: 0; }
.fbw .fbw-acct-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--fbw-line-soft); }
.fbw .fbw-acct-facts dt { font-size: var(--text-xs); color: var(--text-color); }
.fbw .fbw-acct-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--heading-color); }

/* badges: «Active» / «Paid» carry the brand mini brick instead of a coloured dot */
/* .fbw-acct-badge = the shared .fbw-badge pill (fbw.css), white with a hairline; --ok adds the mini brick */
.fbw .fbw-acct-badge--ok::before { content: ""; inline-size: 5px; block-size: 8px; border-radius: 2px; background: var(--primary); flex: none; }

/* icon tile with the accent block behind one piece */
.fbw .fbw-acct-tile { inline-size: 44px; block-size: 44px; border-radius: var(--fbw-radius-btn); background: var(--base-ultra-light); display: grid; place-items: center; color: var(--heading-color); position: relative; flex: none; }
.fbw .fbw-acct-tile::before { content: ""; position: absolute; inline-size: 12px; block-size: 18px; border-radius: 3px; background: var(--primary); right: 8px; bottom: 7px; }
.fbw .fbw-acct-tile .fbw-acct-icon { inline-size: 24px; block-size: 24px; position: relative; }
.fbw .fbw-acct-tilecard { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }

/* ---- buttons: .fbw-btn is the shared button (fbw.css): 48 px, 1 px, 12 px, 350 ms swap ------------------------ */
.fbw .fbw-acct .fbw-btn .fbw-acct-icon { inline-size: 18px; block-size: 18px; }
/* a button that reads as a link (opens a dialog, toggles a list) */
.fbw .fbw-acct-linkbtn {
  padding: 4px 0; border: 0; background: none; cursor: pointer; font: 500 var(--text-s)/1.4 var(--font-sans); color: var(--heading-color);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--border-color-strong); text-underline-offset: 4px;
  transition: text-decoration-color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fbw .fbw-acct-linkbtn:hover { text-decoration-color: var(--heading-color); }

/* ---- how you copy: segmented controls ---------------------------------------------------------------------- */
.fbw .fbw-acct-prefs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem 2rem; }
.fbw .fbw-acct-prefs--stack { flex-direction: column; align-items: stretch; }
.fbw .fbw-acct-pref { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.fbw .fbw-acct-pref__l { font-size: var(--text-xs); font-weight: 600; color: var(--heading-color); }
/* .fbw-acct-seg is the shared segmented control (fbw.css) */
.fbw .fbw-acct-saved { display: inline-flex; align-items: center; gap: 6px; min-block-size: 1.25rem; font-size: var(--text-xs); color: var(--text-color); }
.fbw .fbw-acct-saved .fbw-acct-icon { inline-size: 16px; block-size: 16px; }

/* ---- fields and forms --------------------------------------------------------------------------------------- */
.fbw .fbw-acct-form { display: flex; flex-direction: column; gap: 1.25rem; }
.fbw .fbw-acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.fbw .fbw-acct-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fbw .fbw-acct-field--full { grid-column: 1 / -1; max-inline-size: calc(50% - 0.75rem); }
.fbw .fbw-acct-field label, .fbw .fbw-acct-field__label { font-size: var(--text-s); font-weight: 600; color: var(--heading-color); }
.fbw .fbw-acct-field input {
  min-height: 48px; padding: 10px 14px; border-radius: calc(var(--radius) * 0.4); border: 1px solid var(--border-color-strong);
  font: 400 var(--text-m)/1.4 var(--font-sans); color: var(--heading-color); background: var(--white); inline-size: 100%; box-sizing: border-box;
}
.fbw .fbw-acct-field input[readonly] { background: var(--base-ultra-light); border-color: var(--fbw-line); }
.fbw .fbw-acct-field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.fbw .fbw-acct-field__err { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--heading-color); }
.fbw .fbw-acct-field__err .fbw-acct-icon, .fbw .fbw-acct-notice--error .fbw-acct-icon { color: var(--danger); inline-size: 16px; block-size: 16px; margin-top: 2px; }
.fbw .fbw-acct-notice { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem; border-radius: var(--fbw-radius-btn); font-size: var(--text-s); color: var(--heading-color); background: var(--base-ultra-light); }
.fbw .fbw-acct-notice--error { background: var(--white); border: 1px solid var(--danger); }
.fbw .fbw-acct-notice .fbw-acct-icon { margin-top: 2px; }

/* license key */
.fbw .fbw-acct-keyrow { display: flex; gap: 0.5rem; align-items: stretch; }
.fbw .fbw-acct-keyrow input { flex: 1; letter-spacing: 0.06em; font-weight: 500; }
.fbw .fbw-acct-keyrow .fbw-btn { min-inline-size: 8.5rem; padding-inline: 1rem; }
.fbw .fbw-acct-keybtn__idle, .fbw .fbw-acct-keybtn__done { display: inline-flex; align-items: center; gap: 0.5rem; }
.fbw .fbw-acct-keybtn__done, .fbw .fbw-acct .is-done .fbw-acct-keybtn__idle { display: none; }
.fbw .fbw-acct .is-done .fbw-acct-keybtn__done { display: inline-flex; }
.fbw .fbw-acct-keymeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; }
.fbw .fbw-acct-locked { display: flex; align-items: center; gap: 0.625rem; min-height: 48px; padding: 10px 14px; border-radius: calc(var(--radius) * 0.4); border: 1px dashed var(--border-color-strong); background: var(--base-ultra-light); font-size: var(--text-s); }
.fbw .fbw-acct-locked .fbw-acct-icon { inline-size: 18px; block-size: 18px; color: var(--heading-color); }

/* ---- lists: recent copies, plugin elements ------------------------------------------------------------------ */
.fbw .fbw-acct-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.fbw .fbw-acct-item { display: flex; align-items: center; gap: 1rem; padding: 14px 20px; border-top: 1px solid var(--fbw-line-soft); }
.fbw .fbw-acct-item:first-child { border-top: 0; }
.fbw .fbw-acct-item[hidden] { display: none; }
.fbw .fbw-acct-item__thumb { inline-size: 88px; block-size: 55px; border-radius: calc(var(--radius) * 0.4); object-fit: cover; object-position: top; background: var(--base-ultra-light); flex: none; border: 1px solid var(--fbw-line-soft); }
.fbw .fbw-acct-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fbw .fbw-acct .fbw-acct-item__name { font-weight: 600; color: var(--heading-color); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.fbw .fbw-acct .fbw-acct-item__name:hover { text-decoration-color: var(--heading-color); }
.fbw .fbw-acct-item__meta, .fbw .fbw-acct-item__fw { font-size: var(--text-xs); color: var(--text-color); }
.fbw .fbw-acct-item__fw { white-space: nowrap; }

/* ---- favorites grid ----------------------------------------------------------------------------------------- */
.fbw .fbw-acct-favs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.fbw .fbw-acct-favs[hidden], .fbw .fbw-acct-fav[hidden], .fbw .fbw-acct-empty[hidden] { display: none; }
.fbw .fbw-acct-fav { display: flex; flex-direction: column; gap: 0.625rem; position: relative; min-width: 0; }
.fbw .fbw-acct-fav__frame { border-radius: var(--radius-s); overflow: hidden; background: var(--base-ultra-light); border: 1px solid var(--fbw-line-soft); aspect-ratio: 16 / 10; }
.fbw .fbw-acct-fav__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; display: block; }
.fbw .fbw-acct .fbw-acct-fav__name { font-weight: 600; font-size: var(--text-s); color: var(--heading-color); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 350ms cubic-bezier(0.4, 0, 0.2, 1); }
.fbw .fbw-acct .fbw-acct-fav__name:hover { text-decoration-color: var(--heading-color); }
.fbw .fbw-acct-fav__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: var(--text-xs); }
.fbw .fbw-acct-fav__heart {
  position: absolute; top: 8px; right: 8px; inline-size: 36px; block-size: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--white); box-shadow: var(--fbw-shadow-s); display: grid; place-items: center; color: var(--heading-color);
  transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1), color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fbw .fbw-acct-fav__heart:hover { background: var(--base-ultra-dark); color: var(--white); }
.fbw .fbw-acct-fav__heart .fbw-acct-icon { inline-size: 18px; block-size: 18px; }
.fbw .fbw-acct-fav__heart:not(.is-on) svg { fill: none; }

/* ---- plugin: steps ------------------------------------------------------------------------------------------ */
.fbw .fbw-acct-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.fbw .fbw-acct-steps > li { display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-start; }

/* ---- invoices table ------------------------------------------------------------------------------------------ */
.fbw .fbw-acct-table { overflow-x: auto; border: 1px solid var(--fbw-line-soft); border-radius: var(--radius); background: var(--white); }
.fbw .fbw-acct-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-s); }
.fbw .fbw-acct-table :is(th, td) { text-align: start; padding: 14px 20px; border-top: 1px solid var(--fbw-line-soft); white-space: nowrap; }
.fbw .fbw-acct-table thead th { border-top: 0; font-size: var(--text-xs); font-weight: 600; color: var(--text-color); background: var(--base-ultra-light); }
.fbw .fbw-acct-table td { color: var(--heading-color); }
.fbw .fbw-acct-table__end { text-align: end !important; }

/* ---- dialogs (the library's .fbw-lib-dialog) and the toast's «Undo» ------------------------------------------ */
.fbw .fbw-acct-dialog .fbw-lib-dialog__inner > p { margin: 0; }
.fbw .fbw-acct-dialog form { display: contents; }
.fbw-lib-toast .fbw-acct-undo { margin-inline-start: 0.375rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- tablet and phone ------------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .fbw .fbw-acct { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
  /* the nav becomes one scrollable row */
  .fbw .fbw-acct-nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .fbw .fbw-acct-nav a { white-space: nowrap; }
  .fbw .fbw-acct-nav a[aria-current="page"]::before { left: 50%; top: auto; bottom: 0; translate: -50% 0; inline-size: 14px; block-size: 4px; }
  .fbw .fbw-acct-nav__sep { display: none; }
  .fbw .fbw-acct-favs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .fbw .fbw-acct-head .fbw-btn, .fbw .fbw-acct-banner .fbw-btn { inline-size: 100%; }
  .fbw .fbw-acct-grid, .fbw .fbw-acct-steps, .fbw .fbw-acct-facts { grid-template-columns: minmax(0, 1fr); }
  .fbw .fbw-acct-field--full { max-inline-size: none; }
  .fbw .fbw-acct-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .fbw .fbw-acct-card { padding: 1.25rem; }
  .fbw .fbw-acct-banner { padding: 1.5rem; }
  /* a copied template on a phone: thumbnail + name on one row, framework and button below, full width */
  .fbw .fbw-acct-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px; }
  .fbw .fbw-acct-item__thumb { inline-size: 72px; block-size: 45px; grid-row: span 2; }
  .fbw .fbw-acct-item__body, .fbw .fbw-acct-item__fw { grid-column: 2; }
  .fbw .fbw-acct-item__fw { white-space: normal; }
  .fbw .fbw-acct-item .fbw-btn { grid-column: 1 / -1; inline-size: 100%; margin-top: 10px; }
  .fbw .fbw-acct-item:not(:has(.fbw-acct-item__thumb)) { display: flex; }
  .fbw .fbw-acct-prefs { gap: 1.25rem; }
  .fbw .fbw-acct-pref { inline-size: 100%; align-items: stretch; }
  .fbw .fbw-acct-seg { display: flex; inline-size: 100%; }
  .fbw .fbw-acct-seg button { flex: 1 1 auto; }
  .fbw .fbw-acct-keyrow { flex-direction: column; }
  .fbw .fbw-acct-keyrow .fbw-btn { inline-size: 100%; }
  .fbw .fbw-acct-row--links { flex-direction: column; align-items: flex-start; }
  .fbw .fbw-acct-split > .fbw-btn { inline-size: 100%; }
}

/* logged out: the 3.0 template «Contact · Log in and register» (login-register) in the web's brand (audit 2, M1 + B6;
   SISTEMA-UI «Formularios y campos» and «Control segmentado»). The library template stays as it is: only this CSS and
   the generator (page_account.py: brand mosaic instead of the stock photos) change it. Yellow never as text on white;
   the submit is the ink button M, because the header's «Start free» already holds this screen's yellow accent.
   `:root .fbw .fbk-logreg` outranks the template's own classes (fbk-form, fbk-tabs) without !important. */

/* tabs = the one segmented control: gray track, the chosen option white + shadow + mini brick; no yellow line */
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__menu {
  gap: 2px; padding: 3px; border: 1px solid var(--fbw-line-soft); border-radius: calc(var(--fbw-radius-btn) - 2px);
  background: var(--base-ultra-light);
}
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__menu .tab-indicator { display: none; }
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__tab {
  display: flex; align-items: center; justify-content: center; min-block-size: 34px; padding: 0.4rem 0.75rem;
  border: 0; border-radius: 0.5rem; background: transparent; box-shadow: none;
  font: 500 var(--text-xs)/1.2 var(--font-sans); color: var(--text-color); cursor: pointer;
  transition: background-color var(--fbw-t-s) var(--fbw-ease-color), color var(--fbw-t-s) var(--fbw-ease-color), box-shadow var(--fbw-t-s) var(--fbw-ease-color);
}
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__tab > * { font: inherit; color: inherit; }
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__tab:hover { color: var(--heading-color); }
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__tab:is(.brx-open, [aria-selected="true"]) { background: var(--white); color: var(--heading-color); box-shadow: var(--fbw-shadow-s); }
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__tab::before {
  content: ""; flex: none; inline-size: 0; block-size: 8px; margin-inline-end: 0; border-radius: 1.5px; background: var(--primary);
  transition: inline-size var(--fbw-t-s) var(--fbw-ease-color), margin var(--fbw-t-s) var(--fbw-ease-color);
}
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__tab:is(.brx-open, [aria-selected="true"])::before { inline-size: 5px; margin-inline-end: 7px; }

.fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-intro__title { font-size: var(--h2); }

/* fields: 48 px, radius 8, strong border; labels above in 600 ink; the required mark in text color, never yellow */
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form .form-group > label { font-size: var(--text-s); font-weight: 600; color: var(--heading-color); }
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form label.required::after { color: var(--text-color); }
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form :is(input[type="text"], input[type="email"], input[type="password"]) {
  block-size: 48px; padding: 10px 14px; font-size: var(--text-m);
  border: 1px solid var(--border-color-strong); border-radius: 8px;   /* the rule's 8 px: --radius-s is 14 px inside fbk-ui */
}
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form :is(input[type="text"], input[type="email"], input[type="password"]):is(:user-invalid, [aria-invalid="true"]) {
  border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger);
}
/* checkbox: 20 px square, radius 6, ink when checked with the white check */
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form input[type="checkbox"] {
  inline-size: 20px; block-size: 20px; flex: none; border: 1px solid var(--border-color-strong); border-radius: 6px;
  background-color: var(--white); accent-color: var(--base-ultra-dark);
}
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form input[type="checkbox"]:checked {
  background: var(--base-ultra-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--base-ultra-dark);
}
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form .options-wrapper label { font-size: var(--text-s); color: var(--heading-color); }

/* submit = the ink FBK Button M: 500, 0.75em 1.5em, no tracking, 350 ms colour */
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form button[type="submit"] {
  background: var(--base-ultra-dark); color: var(--white); border: 1px solid var(--base-ultra-dark); border-radius: var(--fbw-radius-btn);
  font-weight: 500; padding: 0.75em 1.5em; letter-spacing: normal; line-height: 1.2;
  transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1), color 350ms cubic-bezier(0.4, 0, 0.2, 1), border-color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form button[type="submit"]:hover { background: var(--primary); border-color: var(--primary); color: var(--base-ultra-dark); }
:root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form button[type="submit"]::before, :root .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-form button[type="submit"]::after { display: none; }
.fbw .fbk-logreg__forgot:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) a { display: inline-block; padding-block: 4px; color: var(--heading-color); }
.fbw .fbk-logreg__forgot:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) a:hover { color: var(--heading-color); text-decoration-color: var(--heading-color); }

/* the brand mosaic instead of the stock photo (page_account.py `mosaic()`): a real capture of the library and what
   a free account gives. It fills the media half; under 992 px the form stands alone (no picture above a log-in) */
.fbw .fbk-logreg__media:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbw-logreg-mosaic { position: absolute; inset: 0; aspect-ratio: auto; }
.fbw .fbw-logreg-mosaic .fbw-mosaic__a { background: var(--base-ultra-light); }
.fbw .fbw-logreg-mosaic .fbw-mosaic__a img { object-position: center top; }
.fbw .fbw-logreg-mosaic .fbw-mosaic__c { background: var(--base-ultra-light); }
.fbw .fbw-logreg-mosaic .fbw-mosaic__d { background: var(--primary-ultra-light); }
.fbw .fbw-logreg-mosaic .fbw-mosaic__e { padding: 0; }
@media (max-width: 991px) {
  .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__media { display: none; }
}

/* phones: no mosaic beside the card, so no fixed height to match it (it left a white gap under «Log in») */
@media (max-width: 991px) { .fbw .fbk-logreg:where(:not(.fbw-demo-palette, .fbw-demo-palette *)) .fbk-logreg__card { min-height: 0; } }