/* Settings modal (spec: docs/superpowers/specs/2026-09-05-settings-modal-design.md).
   Unhashed backend asset: invalidate /css/backend/v2/settings-modal.css* on deploy.

   Tokens: the host modal and every embedded tab page read the same variables, so both
   documents sit on ONE surface per theme by construction. The app's own
   --color-background-content-lighter differs between pages (white on the lists, #f3f3f3 on
   the account pages in the light theme), which is why these are defined here instead. */

.lf-settings-modal,
body.lf-embed {
  --lfs-surface: #2c2c30;
  --lfs-surface-2: #35353b;
  --lfs-text: #ececec;
  --lfs-muted: #a6a7b3;   /* 5.0:1 on surface-2 (was #9a9ba6 at 4.4) */
  --lfs-border: rgba(255, 255, 255, 0.09);
  --lfs-accent: #6056fc;
  --lfs-accent-soft: rgba(96, 86, 252, 0.18);
  --lfs-accent-text: #b9b3ff;
}
html.light .lf-settings-modal,
html.light body.lf-embed {
  --lfs-surface: #fbfbfd;
  --lfs-surface-2: #f2f2f6;
  --lfs-text: #24292f;
  --lfs-muted: #5d6373;   /* 5.4:1 on surface-2 (was #6b7280 at 4.3) */
  --lfs-border: rgba(24, 24, 48, 0.1);
  --lfs-accent-soft: rgba(96, 86, 252, 0.1);
  --lfs-accent-text: #4a40e6;
}

/* ---------------------------------------------------------------------------------------
   Part 1: a page rendered in embed mode inside the modal's iframe (body.lf-embed).
   The page keeps its own controllers and markup; only presentation changes, and only here.
   --------------------------------------------------------------------------------------- */

body.lf-embed,
html.light body.lf-embed {
  background: var(--lfs-surface) !important;
  color: var(--lfs-text);
}

/* the page container: full panel width, modest padding, no sidebar offsets */
body.lf-embed .container.padding-top-50.padding-left-50,
body.lf-embed .container-alerts .container.padding-top-50.padding-left-50,
body.lf-embed .container-report-branding .container.padding-top-50.padding-left-50 {
  width: auto;
  max-width: none;
  padding: 8px 32px 32px 32px;
  margin: 0;
}
/* The alerts and integrations shells keep the app side bar's gutter (margin-left 82-90px and
   margin-right 68px), which inside the frame is dead space on both sides: the table measured
   709px in an 874px panel. The panel supplies its own padding. */
body.lf-embed .containerGeneral {
  /* important because style.css's own narrow-viewport rules use it (margin-right: 75px) */
  margin: 0 !important;
  padding: 8px 32px 32px 32px;
}

body.lf-embed section.cd-faq,
body.lf-embed .cd-faq-items-new {
  margin: 0;
  padding: 0;
  /* style.css gives .cd-faq width:90% + a 100px left margin for the standalone page, which
     left every pane 80px short of the panel inside the modal (measured 729px in an 874px
     frame). The panel already provides the gutter. */
  width: 100%;
  max-width: none;
}

/* one surface: the legacy pages nest a white card (tab-content > tab-pane > li) on a grey
   page; inside the modal they become plain sections separated by hairlines. The theme file
   paints these with long class chains and an id (#globalChartContent), so every selector here
   is anchored on that id to outrank them in both themes. */
body.lf-embed #globalChartContent,
body.lf-embed #globalChartContent .tab-pane,
body.lf-embed #globalChartContent ul.cd-faq-group,
body.lf-embed #globalChartContent ul.cd-faq-group > li,
body.lf-embed #globalChartContent .cd-faq-content,
body.lf-embed #globalChart.nav-tabs:not(.usage-container-overall),
html.light body.lf-embed #globalChartContent,
html.light body.lf-embed #globalChartContent .tab-pane,
html.light body.lf-embed #globalChartContent ul.cd-faq-group,
html.light body.lf-embed #globalChartContent ul.cd-faq-group > li,
html.light body.lf-embed #globalChartContent .cd-faq-content,
html.light body.lf-embed #globalChart.nav-tabs:not(.usage-container-overall) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.lf-embed ul.cd-faq-group {
  margin: 0;
  padding: 20px 0 8px;
  border-top: 1px solid var(--lfs-border);
}
body.lf-embed ul.cd-faq-group:first-child {
  border-top: 0;
  padding-top: 0;
}
body.lf-embed ul.cd-faq-group li.content-visible,
body.lf-embed .cd-faq-content {
  padding: 0 !important;
  margin: 0 !important;
}
body.lf-embed .cd-faq-trigger,
body.lf-embed .cd-close-panel {
  display: none !important;
}

/* type scale: 22 / 15 / 14 / 12, weight carries the hierarchy */
body.lf-embed h1 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 10px 0 18px;
  color: var(--lfs-text) !important;
}
body.lf-embed .cd-faq-title h4 {
  margin: 0 0 12px;
  line-height: 1.4;
}
body.lf-embed .cd-faq-title h4 a,
body.lf-embed .cd-faq-title h4 a:hover {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lfs-muted) !important;
  text-decoration: none;
  cursor: default;
}
body.lf-embed h3,
body.lf-embed h3.title-head {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
body.lf-embed h4 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
body.lf-embed .paragraph,
body.lf-embed .description-plan,
body.lf-embed .description-plan-sm,
body.lf-embed p {
  font-size: 14px;
  line-height: 1.5;
}
body.lf-embed .content-grey,
body.lf-embed .description-plan {
  color: var(--lfs-muted) !important;
}

/* forms: label + field on one row, fields sized like the rest of the app's newer pages */
body.lf-embed .form-horizontal .form-group {
  display: flex;
  align-items: center;
  margin: 0 0 12px;
}
body.lf-embed .form-horizontal .form-group .control-label {
  flex: 0 0 180px;
  width: 180px;
  padding: 0 12px 0 0;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lfs-muted) !important;
  white-space: nowrap;
}
body.lf-embed .form-horizontal .form-group [class*="col-"]:not(.control-label) {
  float: none;
  flex: 1 1 auto;
  width: auto;
  max-width: 440px;
  padding: 0;
}
body.lf-embed .form-control {
  height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 22px;
  border-radius: 6px;
  box-shadow: none;
}
body.lf-embed textarea.form-control {
  height: auto;
}

/* One field spec for every tab and every inner form (measured 2026-09-05: page fields were 36px
   r4, channel forms 46px r10 with 12px uppercase labels, integration forms 48px r0 with their
   fields squeezed to 168px by the row layout above, branding 13px labels, and every error
   message rendered in the body colour because the theme catch-all out-ranks .channel-field__error). */
html body.lf-embed .form-control,
html body.lf-embed .form-group-lg .form-control,
html body.lf-embed .channel-config input.channel-field__input,
html body.lf-embed .channel-config select.channel-field__input {
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  line-height: 36px !important;
  border-radius: 6px !important;
  border-width: 1px !important;
  box-shadow: none !important;
  width: 100%;
}
html body.lf-embed textarea.form-control {
  height: auto !important;
  min-height: 76px;
  padding: 8px 12px !important;
  line-height: 1.5 !important;
}
html body.lf-embed .form-control::placeholder,
html body.lf-embed .channel-field__input::placeholder {
  color: var(--lfs-muted) !important;
  opacity: 1;
  font-size: 14px;
}
html body.lf-embed .form-control:focus,
html body.lf-embed .channel-config input.channel-field__input:focus,
html body.lf-embed .channel-config select.channel-field__input:focus {
  outline: 0;
  border-color: var(--lfs-accent) !important;
  box-shadow: 0 0 0 3px var(--lfs-accent-soft) !important;
}
/* stacked labels (inner forms, branding): one style, the same as the panel's section titles.
   Row labels (.control-label, .team-settings-label) keep their 13px muted style above. */
html body.lf-embed .channel-field__label,
html body.lf-embed .modal .title-box,
html body.lf-embed .report-branding-form > .form-group > label:not(.brand-toggle) {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lfs-muted) !important;
}
html body.lf-embed .channel-field { margin-bottom: 14px; }
html body.lf-embed .report-branding-form label.brand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
/* inner modals stack label over field: the row layout is for the page forms only */
body.lf-embed .modal .form-horizontal .form-group {
  display: block;
  margin: 0 0 14px;
}
body.lf-embed .modal .form-horizontal .form-group .control-label,
body.lf-embed .modal .form-horizontal .form-group [class*="col-"]:not(.control-label) {
  flex: none;
  float: none;   /* a floated .col-sm-12 with width:auto shrinks to its content (173px) */
  width: 100%;
  max-width: none;
  padding: 0;
}
body.lf-embed .modal .input_container { width: 100%; }
body.lf-embed .modal .form-group > .col-sm-12 > .title-box { margin-bottom: 0; }
body.lf-embed .modal .form-group + .form-group-lg { margin-top: -8px; }
html body.lf-embed .channel-field__error,
html body.lf-embed .error-span.red,
html body.lf-embed .error-span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #e0364f !important;
}
body.lf-embed .form-horizontal .center-block,
body.lf-embed .form-horizontal .col-xs-2,
body.lf-embed .form-horizontal .col-xs-3 {
  float: none;
  width: auto;
  padding: 0;
}

/* buttons: the pages use btn-lg + btn-block + a 3d shadow; inside the panel they are ordinary */
body.lf-embed .btn:not(.delete):not(.edit-button):not(.small),
body.lf-embed .btn.btn-lg,
body.lf-embed .btn.btn-block,
body.lf-embed .btn.button-3d {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: none;
  text-transform: none;
}
/* hover: the pages' own .cta-blue.white-section:hover rule is empty and the theme catch-alls flatten
   .btn-default, so no button inside the panel reacted to the pointer. One rule for every button. */
body.lf-embed .btn:not(.delete):not(.edit-button),
body.lf-embed .button.cta,
body.lf-embed .collapsible-header {
  transition: filter 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out;
}
body.lf-embed .btn:not(.delete):not(.edit-button):not([disabled]):hover,
body.lf-embed .button.cta:not([disabled]):hover {
  filter: brightness(1.12);
}
html.light body.lf-embed .btn:not(.delete):not(.edit-button):not([disabled]):hover,
html.light body.lf-embed .button.cta:not([disabled]):hover {
  filter: brightness(0.94);
}
@media (hover: hover) {
  body.lf-embed .collapsible-header:hover {
    background: var(--lfs-surface-2);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
body.lf-embed .btn.btn-sm,
body.lf-embed .btn.copy-api-key {
  padding: 4px 8px;
  font-size: 12px;
}
/* the copy buttons' background came from a rule the two engines resolve differently (Chromium
   #6b6b6b, Firefox #2b2a33, on which the black clippy.svg vanished); pin it to the panel tokens */
html body.lf-embed .btn.copy-api-key {
  background: var(--lfs-surface-2) !important;
  border: 1px solid var(--lfs-border) !important;
}
html:not(.light) body.lf-embed .btn.copy-api-key img {
  filter: invert(1) opacity(0.85);
}
body.lf-embed .rounded-button {
  border-radius: 6px;
}

/* API key row and the team id row */
body.lf-embed .apiContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
/* the key and its copy button belong together: one bordered field, the button inside its right
   edge. The key is long (apikey_ + a uuid), so it wraps instead of overflowing on a phone. */
body.lf-embed .apikey-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}
html body.lf-embed .apikey-row #apiValue {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--lfs-text) !important;
  background: var(--lfs-surface-2);
  border: 1px solid var(--lfs-border);
  border-radius: 6px;
  overflow-wrap: anywhere;
  user-select: all;
}
html body.lf-embed .apikey-row .btn.copy-api-key {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: var(--lfs-text) !important;
  background: var(--lfs-surface-2) !important;
  border: 1px solid var(--lfs-border) !important;
  border-radius: 6px !important;
}
html:not(.light) body.lf-embed .apikey-row .btn.copy-api-key img { filter: invert(1) opacity(0.85); }
html body.lf-embed .apikey-row .btn.copy-api-key.copied {
  color: #fff !important;
  background: var(--lfs-accent) !important;
  border-color: transparent !important;
}
html body.lf-embed .apikey-row .btn.copy-api-key.copied img { filter: invert(1); }
html body.lf-embed .apikey-row .btn.copy-api-key.copy-failed { border-color: #e0364f !important; }
body.lf-embed #regenerateAPI { margin-top: 4px; }
body.lf-embed .apiContainer > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}
body.lf-embed .apiContainer h4 {
  margin: 0;
}
body.lf-embed .apiContainer #apiValue,
body.lf-embed code#apiValue {
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border: 1px solid var(--lfs-border);
  border-radius: 6px;
  background: var(--lfs-surface-2);
  word-break: break-all;
}
body.lf-embed .usekey-panel {
  margin-top: 24px;
}

/* plan page: collapsible rows */
body.lf-embed .collapsible {
  border-top: 1px solid var(--lfs-border);
}
body.lf-embed .collapsible-header {
  padding: 12px 0;
  cursor: pointer;
}
body.lf-embed .collapsible-header h3.title-head.padding-title {
  padding: 0;
  margin: 0;
  font-size: 15px;
}
body.lf-embed .caret-plan {
  font-size: 10px;
  color: var(--lfs-muted);
}
body.lf-embed .plan-span,
body.lf-embed .plan-header-name {
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
}
body.lf-embed .collapsible-content .cd-faq-content {
  padding: 4px 0 16px !important;
}
/* plan cards: the page draws a gradient header, a gradient "Upgrade" button and floated
   columns; inside the panel each service is one bordered box with a plain primary button */
body.lf-embed #plan .downgradeContainer,
body.lf-embed #plan .upgradeContainer,
body.lf-embed #plan .manage-subscription {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
body.lf-embed #plan .downgradeContainer > [class*="col-"],
body.lf-embed #plan .upgradeContainer > [class*="col-"],
body.lf-embed #plan .manage-subscription > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
  flex: 1 1 320px;
  max-width: 100%;
}
body.lf-embed .card-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* the page reserves 350px for a marketing-size card; in the panel it is as tall as its text */
  min-height: 0 !important;
  height: auto !important;
  background: var(--lfs-surface-2) !important;
  border: 1px solid var(--lfs-border) !important;
  border-radius: 8px;
  box-shadow: none !important;
  padding: 16px;
  max-width: 480px;
}
body.lf-embed .card-root .plan-header {
  background: none !important;
  background-image: none !important;
  padding: 0 0 10px;
  border: 0;
  min-height: 0;
  height: auto;
}
body.lf-embed .card-root .plan-title .plan-span {
  display: inline-block;
  background: var(--lfs-accent-soft);
  color: var(--lfs-accent-text) !important;
  border: 0;
}
body.lf-embed .card-root .card-body,
body.lf-embed .card-root .column-layout,
body.lf-embed .card-root .column-layout-column,
body.lf-embed .card-root .column-layout-module {
  padding: 0;
  margin: 0;
  min-height: 0;
  height: auto;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}
body.lf-embed .card-root .card-body > div {
  text-align: left;
}
body.lf-embed .card-root .buttons-container > br { display: none; }
body.lf-embed .card-root .description-plan {
  margin: 0 0 14px;
  text-align: left;
}
/* the page separates the two actions with a <br>, which becomes a flex item and centres the
   button while squashing the link; stack them at the card's left edge instead */
body.lf-embed .card-root .buttons-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
body.lf-embed .card-root .buttons-container > br { display: none; }
/* a.rounded-button is a full-width 48px-min marketing pill; inside the card it is an ordinary button */
html body.lf-embed .card-root .buttons-container > .btn,
html body.lf-embed .card-root a.rounded-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 6px !important;
}
html body.lf-embed .card-root .show-downgrade-subscription {
  display: inline-block;
  height: auto;
  line-height: 18px;
}
body.lf-embed .upgrade-btn,
body.lf-embed .card-root .btn {
  background: var(--lfs-accent) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
  padding: 8px 16px !important;
  border: 0;
  border-radius: 6px;
  box-shadow: none !important;
}
/* plan: the "Manage your subscription" panel the Downgrade link reveals. The page stacks it out
   of floated cols with a marketing-size gradient button (.frontend-button.btn-lg.button-3d);
   inside the panel it is a bordered box beside the card with two ordinary buttons. */
body.lf-embed #plan .manage-subscription {
  display: block;
  flex: 1 1 320px;
  max-width: 460px;
  padding: 16px 18px;
  border: 1px solid var(--lfs-border);
  border-radius: 8px;
  background: var(--lfs-surface-2);
}
body.lf-embed #plan .manage-subscription > br { display: none; }
body.lf-embed #plan .manage-subscription > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
  max-width: none;
}
body.lf-embed #plan .manage-subscription h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lfs-text) !important;
}
body.lf-embed #plan .manage-subscription .paragraph,
body.lf-embed #plan .manage-subscription .description-plan,
body.lf-embed #plan .manage-subscription .description-plan-sm {
  display: block;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lfs-muted) !important;
}
body.lf-embed #plan .manage-subscription .description-plan-sm {
  margin: 4px 0 0;
  font-size: 12px;
}
html body.lf-embed #plan .manage-subscription .btn,
html body.lf-embed #plan .manage-subscription a.btn.frontend-button {
  display: inline-block;
  width: auto;
  margin: 0 0 14px;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 20px !important;
  border-radius: 6px !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none;
}
html body.lf-embed #plan .manage-subscription #downgrade.btn-secondary {
  color: var(--lfs-text) !important;
  background: transparent !important;
  border: 1px solid var(--lfs-border) !important;
}
html body.lf-embed #plan .manage-subscription a#upgrade.btn {
  color: #fff !important;
  background: var(--lfs-accent) !important;
  border: 1px solid transparent !important;
}
/* the generic popup (showPopupModal: "Error! Passwords don't match"): the page's version is a
   near-empty 500px box with the button far away from the text */
html body.lf-embed .modal-limits .modal-dialog {
  max-width: 440px;
  margin: 12vh auto;
}
html body.lf-embed .modal-limits .modal-content {
  padding: 0;
  border: 1px solid var(--lfs-border);
  border-radius: 10px;
  background: var(--lfs-surface);
}
html body.lf-embed .modal-limits .modal-header {
  padding: 18px 20px 0;
  border: 0;
  min-height: 0;
}
html body.lf-embed .modal-limits .modal-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--lfs-text) !important;
}
html body.lf-embed .modal-limits .modal-body {
  padding: 10px 20px 4px;
  min-height: 0;
}
html body.lf-embed .modal-limits .modal-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lfs-text) !important;
}
html body.lf-embed .modal-limits .modal-footer {
  padding: 12px 20px 18px;
  border: 0;
  text-align: right;
  background: transparent;
}
html body.lf-embed .modal-limits .modal-footer .btn {
  margin: 0;
  padding: 8px 18px !important;
  font-size: 14px !important;
  min-width: 80px;
}
/* a disabled field must read as one (Profile: the email address) */
html body.lf-embed .form-control[disabled],
html body.lf-embed .form-control.disabled,
html body.lf-embed .form-control[readonly] {
  color: var(--lfs-muted) !important;
  background: var(--lfs-surface-2) !important;
  border-style: dashed !important;
  cursor: not-allowed;
  opacity: 1;
}
body.lf-embed .show-downgrade-subscription {
  font-size: 13px;
  color: var(--lfs-muted) !important;
  text-decoration: underline;
}

/* usage page: three fixed-width panels (406px) do not fit a 880px panel; stack them */
body.lf-embed .usage-container .panel,
body.lf-embed .usage-container .downgradeContainer .panel,
body.lf-embed .usage-container .header-container,
body.lf-embed .usage-container .header-content {
  display: block;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
}
body.lf-embed .usage-container .panel,
body.lf-embed .usage-container .downgradeContainer .panel {
  margin: 0 0 12px !important;
  padding: 16px !important;
  background: var(--lfs-surface-2) !important;
  border: 1px solid var(--lfs-border);
  border-radius: 8px;
}
body.lf-embed .usage-container-overall.nav-tabs {
  margin-bottom: 16px;
}
body.lf-embed .ai-usage-content { padding-top: 8px; }
/* the plan card's header holds only the plan pill; the page reserves a marketing-size block */
body.lf-embed .card-root .plan-header {
  min-height: 0 !important;
  padding: 0 0 4px !important;
}
body.lf-embed .card-root .card-body { padding: 0 !important; }
/* the pill and the paragraph each carry marketing-size padding of their own (16px/22px);
   in the panel the card's own 16px is the only padding that should show */
body.lf-embed .card-root .plan-header .plan-title { padding: 0 !important; }
body.lf-embed .card-root .description-plan { padding: 0 !important; }
/* the ul.nav-tabs wraps its own .tab-content after the floated li tabs; without a clear the
   content's first row sits on top of the tabs and swallows their clicks (found by the click sweep) */
body.lf-embed .nav-tabs > .tab-content,
body.lf-embed .usage-container-overall > .tab-content {
  clear: both;
  padding-top: 8px;
}
body.lf-embed .usage-container .list-of-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
body.lf-embed .usage-container .list-of-boxes > .panel {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* the first tile puts its heading beside a donut: heading on top, donut and figures underneath */
body.lf-embed .usage-container .list-of-boxes > .panel > .row-flex {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.lf-embed .usage-container .list-of-boxes > .panel .chart-canvas-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.lf-embed .usage-container .list-of-boxes .header-container h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lfs-muted) !important;
}
body.lf-embed .usage-container .downgradeContainer > .col-xs-12,
body.lf-embed .usage-container .downgradeContainer > .col-xs-6,
body.lf-embed .usage-container > .col-xs-12,
body.lf-embed .usage-container > .col-xs-6 {
  float: none;
  width: 100%;
  padding: 0;
}
body.lf-embed .usage-container .row-flex.second-row > .panel {
  width: 100% !important;
  margin: 12px 0 0 !important;
}

/* Text colour repairs, measured 2026-09-05 (contrast sweep, both themes):
   - dark: striped table rows painted white under light text (MCP list, 1.1:1)
   - dark: the branding preview is a white "paper" mockup; its footer text followed the theme (1.2:1)
   - dark: the bootstrap-switch OFF handle is light with light text (1.0:1)
   - dark: accent links on the dark surface at 2.7:1; the red error text at 3.1:1
   - light: the inner modals' close glyph is dark on the purple circle (2.6:1) */
html body.lf-embed .table-striped > tbody > tr:nth-of-type(odd),
html body.lf-embed .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--lfs-surface-2) !important;
}
html body.lf-embed table.table td,
html body.lf-embed table.table th {
  color: var(--lfs-text) !important;
}
html body.lf-embed .brand-preview-page,
html body.lf-embed .brand-preview-page * {
  color: #4b5563 !important;
}
html body.lf-embed .brand-preview-page .bp-title { color: #111827 !important; }
html body.lf-embed .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  color: #1f1f2a !important;
  background: #e5e7eb !important;
}
html body.lf-embed .modal a:not(.btn):not(.button),
html body.lf-embed a.header-link-intro,
html body.lf-embed .usekey-panel a,
html body.lf-embed .channel-config__doclink,
html body.lf-embed .otlp-setup-guide-link {
  color: var(--lfs-accent-text) !important;
}
html:not(.light) body.lf-embed .channel-field__error,
html:not(.light) body.lf-embed .error-span,
html:not(.light) body.lf-embed .error-span.red {
  color: #ff7a8a !important;   /* 5.6:1 on the dark surface; #e0364f is 3.1:1 */
}
html body.lf-embed .modal .modal-header .close,
html body.lf-embed .modal .modal-header .close span {
  color: #fff !important;
  opacity: 1;
}
html body.lf-embed .ai-credits-balance-label { color: var(--lfs-muted) !important; }
html.light body.lf-embed .channel-field__error,
html.light body.lf-embed .error-span,
html.light body.lf-embed .error-span.red {
  color: #c1223a !important;   /* 5.2:1 on the light surface; #e0364f is 3.9:1 */
}

/* tables (invoices, cards, payments, channels, integrations) */
body.lf-embed table.table th,
body.lf-embed table.table td,
body.lf-embed table.tablesorter th,
body.lf-embed table.tablesorter td {
  font-size: 13px;
  padding: 8px 10px;
}

/* the loading rows the pages show while their own requests run */
body.lf-embed .loadingPage,
body.lf-embed .loadingCards {
  padding: 12px 0;
}

/* The panel is ~880px wide, so the pages' own narrow-viewport rules apply inside the frame.
   One of them floats the title block right; a block with overflow:hidden next to it (the team
   and alert cards) shrinks to zero width. Undo it and clear the content blocks. */
body.lf-embed .cd-faq-items-new {
  float: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.lf-embed .team-settings-content,
body.lf-embed .alert-settings-content,
body.lf-embed .report-branding-wrap,
body.lf-embed .usekey-panel {
  clear: both;
}

/* The Stripe notice used to render as two columns, the second of them bold, because the page
   splits it across a span and a strong. One block of quiet text beside the icon reads as a note
   rather than a warning. */
body.lf-embed .info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--lfs-border);
  border-radius: 8px;
  background: var(--lfs-surface-2);
}
body.lf-embed .info-box > svg {
  flex: 0 0 18px;
  margin-top: 2px;
  opacity: 0.7;
}
html body.lf-embed .info-box .info-box__text {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--lfs-muted) !important;
}

/* An empty section said nothing at all: the invoices pane rendered a heading and a blank page,
   because the controller reveals .noInvoices and only .noPayments existed in the markup. */
html body.lf-embed .noPayments {
  display: block;
  margin: 8px 0 0;
  padding: 28px 20px;
  border: 1px dashed var(--lfs-border);
  border-radius: 10px;
  text-align: center;
}
html body.lf-embed .noPayments h4 {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--lfs-muted) !important;
}

/* row action buttons (alerts, integrations): mask icons with no mask-size set, so any box
   growth tiles the glyph. Pin the box and the mask, add a hover surface. */
body.lf-embed .action-container-table .btn.delete,
body.lf-embed .action-container-table .btn.edit-button,
body.lf-embed .action-container .btn.delete,
body.lf-embed .action-container .btn.edit-button {
  display: inline-block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0 2px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.75;
  transition: opacity 120ms;
}
body.lf-embed .action-container-table .btn.delete:hover,
body.lf-embed .action-container-table .btn.edit-button:hover,
body.lf-embed .action-container .btn.delete:hover,
body.lf-embed .action-container .btn.edit-button:hover {
  opacity: 1;
  background-color: #c62828 !important;
}
body.lf-embed .action-container-table .btn.edit-button:hover,
body.lf-embed .action-container .btn.edit-button:hover {
  background-color: var(--lfs-accent) !important;
}
/* Six of the seven alert rows use .action-container and the email row alone uses
   .action-container-table, so only that one picked up the styling above: its delete button
   rendered smaller and further right than the rest of the column. Both classes now match. */
body.lf-embed .action-container-table,
body.lf-embed .action-container {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
/* The page-level "Go back" (#backbutton) belongs to the standalone page; the modal nav is the way
   back. Inside the add-channel / add-integration forms the create path shows "Save or Go Back"
   (Go Back = the channel-type picker) and the edit path "Save or Cancel"; in the modal both paths
   show Cancel, so the "or" never dangles. .cancelContainer.hidden is Bootstrap's .hidden
   (display:none !important, one class), out-specified here. */
body.lf-embed #backbutton,
body.lf-embed .buttonsContainer .buttonViewLater {
  display: none !important;
}
body.lf-embed .buttonsContainer .cancelContainer.hidden {
  display: block !important;
}

/* empty states the pages render as an h4 with an inline margin */
body.lf-embed .noPayments h4,
body.lf-embed .noCards h4,
body.lf-embed .noBillingData h4 {
  margin: 4px 0 !important;
  font-size: 14px;
  font-weight: 400;
  color: var(--lfs-muted) !important;
}

/* team settings: cards on the surface, calmer header, rem sizes pinned */
body.lf-embed .team-settings-card {
  background: var(--lfs-surface-2) !important;
  border: 1px solid var(--lfs-border);
  box-shadow: none !important;
  margin-bottom: 16px;
}
body.lf-embed .team-settings-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--lfs-border);
}
body.lf-embed .team-settings-card-header h4 {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--lfs-muted) !important;
}
body.lf-embed .team-settings-card-body {
  padding: 16px;
}
body.lf-embed .team-settings-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--lfs-muted) !important;
}
body.lf-embed .team-settings-value {
  flex: 1 1 auto;
  min-width: 0;
}
body.lf-embed .team-settings-value select.form-control {
  max-width: 440px;
}
body.lf-embed .team-settings-info {
  font-size: 13px;
  color: var(--lfs-muted) !important;
  margin: 0 0 16px;
}

/* report branding: form on the left, live preview pinned on the right; logo preview beside
   its dropzone instead of stacked full width */
body.lf-embed .report-branding-header {
  margin: 0 0 16px;
}
body.lf-embed .report-branding-title {
  font-size: 22px;
  font-weight: 600;
  margin: 10px 0 4px;
}
body.lf-embed .report-branding-desc {
  font-size: 14px;
  color: var(--lfs-muted) !important;
}
body.lf-embed .report-branding-wrap {
  max-width: none;
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
body.lf-embed .report-branding-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 32px;
  align-items: start;
}
body.lf-embed .report-branding-form > .form-group {
  grid-column: 1;
  margin: 0 0 18px;
}
/* :has() (Chrome 105+, Safari 15.4+, Firefox 121+): an older browser keeps every group in
   column 1 beside an empty right column, which is the standalone layout, not a defect. */
body.lf-embed .report-branding-form > .form-group:has(.brand-preview) {
  grid-column: 2;
  grid-row: 1 / span 9;
  position: sticky;
  top: 8px;
}
body.lf-embed .report-branding-form > #brandSave,
body.lf-embed .report-branding-form > #brandSaveStatus {
  grid-column: 1;
  justify-self: start;
  width: auto;
}
body.lf-embed .report-branding-form > .form-group:has(#brandLogoDrop) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "label label" "preview drop" "file file" "status status";
  column-gap: 16px;
  align-items: stretch;
}
body.lf-embed .report-branding-form > .form-group:has(#brandLogoDrop) > label { grid-area: label; }
body.lf-embed .report-branding-form > .form-group:has(#brandLogoDrop) > .brand-logo-preview { grid-area: preview; }
body.lf-embed .report-branding-form > .form-group:has(#brandLogoDrop) > .brand-logo-dropzone { grid-area: drop; padding: 18px !important; }
body.lf-embed .report-branding-form > .form-group:has(#brandLogoDrop) > #brandLogoFile { grid-area: file; }
body.lf-embed .report-branding-form > .form-group:has(#brandLogoDrop) > #brandSaveStatusLogo { grid-area: status; }
body.lf-embed .report-branding-form .brand-logo-preview img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 !important;
}
body.lf-embed .report-branding-form .form-control {
  max-width: 440px;
}
body.lf-embed .brand-preview {
  margin: 0;
}

/* payment: one page, two modal tabs. The bridge puts lf-section-<x> on <html> from ?section=. */
html.lf-section-cards body.lf-embed #billing-data,
html.lf-section-cards body.lf-embed #payment-history,
html.lf-section-billing body.lf-embed #card-details,
html.lf-section-billing body.lf-embed #all-cards {
  display: none !important;
}
html.lf-section-billing body.lf-embed #billing-data {
  border-top: 0;
  padding-top: 0;
}
body.lf-embed .cardContainer {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  row-gap: 8px;
  align-items: start;
}
body.lf-embed .cardContainer > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}
body.lf-embed .cardContainer h4 {
  margin: 0;
  line-height: 1.5;
}
body.lf-embed .cardContainer > .col-xs-1,
body.lf-embed .cardContainer > .col-xs-3:empty {
  display: none;
}
body.lf-embed ul.cd-faq-group .cd-faq-content > [class*="col-"],
body.lf-embed ul.cd-faq-group .cd-faq-content > .col-xs-12 > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
  margin: 8px 0 0;
}
body.lf-embed .cardContainer .billingaddress {
  font-weight: 400;
}
body.lf-embed .cardContainer .defaultcardnumber,
body.lf-embed .cardContainer h4:nth-child(2) {
  font-weight: 500;
}

/* Bootstrap modals opened INSIDE a tab (confirm, downgrade, channel and integration forms):
   sized for the panel, not for a full window */
body.lf-embed .modal-dialog,
body.lf-embed .modal-dialog.modal-dialog-small {
  max-width: 560px;
  margin: 40px auto;
}
body.lf-embed .modal-content {
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------------------------------------
   Part 2: the host modal (nav + iframe).
   --------------------------------------------------------------------------------------- */
.lf-settings-modal .modal-dialog.lf-settings-dialog {
  width: auto;
  max-width: 1100px;
  margin: 4vh auto;
}
/* open: a short scale-up and fade (Bootstrap's default is a 300ms slide from -25%) */
.modal.fade.lf-settings-modal .modal-dialog.lf-settings-dialog {
  opacity: 0;
  transform: scale(0.98);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
}
.modal.fade.lf-settings-modal.in .modal-dialog.lf-settings-dialog {
  opacity: 1;
  transform: none;
}
.lf-settings-content {
  display: flex;
  height: min(88vh, 900px);
  overflow: hidden;
  border: 1px solid var(--lfs-border);
  border-radius: 12px;
  background: var(--lfs-surface);
  color: var(--lfs-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.lf-settings-nav {
  position: relative;
  flex: 0 0 224px;
  width: 224px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 18px 10px 12px;
  border-right: 1px solid var(--lfs-border);
  background: var(--lfs-surface-2);
}
/* the active highlight is one element that slides between entries (offsetTop set by the controller) */
.lf-settings-indicator {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 34px;
  border-radius: 8px;
  background: var(--lfs-accent-soft);
  transform: translateY(-200px);
  pointer-events: none;
}
.lf-settings-indicator--settled {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), height 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-settings-search {
  flex: 0 0 auto;
  width: 100%;
  height: 32px;
  margin: 0 0 12px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 30px;
  color: var(--lfs-text);
  background: var(--lfs-surface);
  border: 1px solid var(--lfs-border);
  border-radius: 8px;
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.lf-settings-search::placeholder { color: var(--lfs-muted); opacity: 1; }
.lf-settings-search:focus {
  border-color: var(--lfs-accent);
  box-shadow: 0 0 0 3px var(--lfs-accent-soft);
}
.lf-settings-item--filtered,
.lf-settings-group--empty {
  display: none !important;
}
.lf-settings-modal--filtering .lf-settings-indicator,
.lf-settings-modal--filtering .lf-settings-item[aria-current="page"] + .lf-settings-subs {
  display: none;   /* while a search filters, neither the highlight nor the sub-links apply */
}
.lf-settings-subs {
  display: none;
  padding: 0 0 4px 22px;
}
.lf-settings-item[aria-current="page"] + .lf-settings-subs {
  display: block;
}
.lf-settings-sub {
  position: relative;
  display: block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--lfs-muted) !important;
  text-decoration: none !important;
}
.lf-settings-sub:hover,
.lf-settings-sub:focus-visible {
  color: var(--lfs-text) !important;
  background: var(--lfs-accent-soft);
  outline: none;
}
.lf-settings-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lfs-muted);
  margin: 4px 12px 14px;
}
.lf-settings-group {
  margin-bottom: 14px;
}
.lf-settings-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lfs-muted);
  margin: 0 12px 4px;
}
.lf-settings-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--lfs-text) !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 20px;
  transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lf-settings-item:hover,
.lf-settings-item:focus {
  background: var(--lfs-accent-soft);
  outline: none;
}
.lf-settings-item:focus-visible {
  box-shadow: 0 0 0 2px var(--lfs-accent);
}
.lf-settings-item[aria-current="page"] {
  background: transparent;   /* the sliding indicator paints it on desktop */
  color: var(--lfs-accent-text) !important;
  font-weight: 600;
}
.lf-settings-item[hidden] {
  display: none;
}
.lf-settings-links {
  margin-top: auto;
  border-top: 1px solid var(--lfs-border);
  padding-top: 10px;
}
.lf-settings-link {
  color: var(--lfs-muted) !important;
}
.lf-settings-ext {
  margin-left: auto;
  opacity: 0.7;
  font-size: 12px;
}
.lf-settings-panel {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  background: var(--lfs-surface);
}
.lf-settings-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  transition: opacity 160ms ease-out;
}
/* a new document fades in; the spinner and its text only appear once a load passes 300ms,
   so a fast tab switch reads as a crossfade, not a flash of spinner */
.lf-settings-panel.is-loading .lf-settings-frame {
  opacity: 0;
}
.lf-settings-loading > * {
  opacity: 0;
  animation: lf-settings-appear 120ms ease-out 300ms forwards;
}
@keyframes lf-settings-appear {
  to { opacity: 1; }
}
.lf-settings-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
  color: var(--lfs-muted);
  font-size: 22px;
  line-height: 32px;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1), color 120ms;
}
.lf-settings-close:hover {
  background: var(--lfs-accent-soft);
  color: var(--lfs-text);
}
.lf-settings-loading,
.lf-settings-error,
.lf-settings-unavailable {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  z-index: 1;
  color: var(--lfs-muted);
  font-size: 14px;
  background: var(--lfs-surface);
}
.lf-settings-loading[hidden],
.lf-settings-error[hidden],
.lf-settings-unavailable[hidden] {
  display: none;
}
.lf-settings-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--lfs-border);
  border-top-color: var(--lfs-accent);
  border-radius: 50%;
  animation: lf-settings-spin 800ms linear infinite;
}
@keyframes lf-settings-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lf-settings-spinner { animation-duration: 2s; }
  .lf-settings-item, .lf-settings-close, .lf-settings-indicator, .lf-settings-frame,
  .modal.fade.lf-settings-modal .modal-dialog.lf-settings-dialog { transition: none; }
  .lf-settings-loading > * { animation: none; opacity: 1; }
  body.lf-embed .modal-confirm.fade .modal-dialog { transition: none; }
}
/* the confirm dialog inside the frame opens like the channel forms (fade-scale), not a slide */
body.lf-embed .modal-confirm.fade .modal-dialog {
  transform: scale(0.96);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.lf-embed .modal-confirm.in .modal-dialog {
  transform: none;
}
.lf-settings-error p,
.lf-settings-unavailable p {
  margin: 0;
  color: var(--lfs-text);
}
.lf-settings-hint {
  color: var(--lfs-muted) !important;
  font-size: 13px;
}
.lf-settings-error .btn {
  margin: 0;
}
.lf-settings-open-page {
  color: var(--lfs-accent-text) !important;
  font-size: 13px;
}
@media (max-width: 768px) {
  .lf-settings-modal .modal-dialog.lf-settings-dialog {
    margin: 0;
    max-width: none;
  }
  .lf-settings-content {
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    border: 0;
    border-radius: 0;
  }
  .lf-settings-nav {
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 48px 8px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--lfs-border);
  }
  .lf-settings-heading,
  .lf-settings-group-label {
    display: none;
  }
  .lf-settings-group {
    display: flex;
    margin: 0;
  }
  .lf-settings-links {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
  }
  .lf-settings-item {
    white-space: nowrap;
  }
  .lf-settings-item[aria-current="page"] {
    background: var(--lfs-accent-soft);
  }
  .lf-settings-indicator,
  .lf-settings-search,
  .lf-settings-subs {
    display: none !important;
  }
  .lf-settings-close {
    top: 6px;
    right: 6px;
  }
  body.lf-embed .container.padding-top-50.padding-left-50,
  body.lf-embed .container-alerts .container.padding-top-50.padding-left-50,
  body.lf-embed .container-report-branding .container.padding-top-50.padding-left-50 {
    padding: 8px 16px 24px;
  }
  body.lf-embed .form-horizontal .form-group {
    flex-direction: column;
    align-items: stretch;
  }
  body.lf-embed .form-horizontal .form-group .control-label {
    flex-basis: auto;
    width: auto;
    margin-bottom: 4px;
  }
}

/* Embedded pages on a phone-sized frame (the frame is the viewport there, measured 2026-09-05 at 390px):
   the branding two-column grid, the usage three-tile grid, the AI credits row and the label/field rows
   all need to stack. Kept at the end of the file so it wins over the base rules above. */
@media (max-width: 600px) {
  body.lf-embed .report-branding-form {
    display: block;
  }
  body.lf-embed .report-branding-form > .form-group:has(.brand-preview) {
    position: static;
    margin: 0 0 18px;
  }
  body.lf-embed .report-branding-form > .form-group:has(#brandLogoDrop) {
    display: block;
  }
  body.lf-embed .report-branding-form .brand-logo-preview {
    margin: 0 0 10px;
  }
  body.lf-embed .usage-container .list-of-boxes {
    grid-template-columns: minmax(0, 1fr);
  }
  body.lf-embed .ai-credits-balance-row {
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
  }
  body.lf-embed .form-horizontal .form-group {
    display: block;
  }
  body.lf-embed .form-horizontal .form-group .control-label {
    width: auto;
    padding: 0 0 6px;
    white-space: normal;
  }
  body.lf-embed .form-horizontal .form-group [class*="col-"]:not(.control-label) {
    max-width: none;
    width: 100%;   /* .col-xs-6 is 50% at every width */
  }
  html body.lf-embed .modal .buttonsContainer {
    display: block;
  }
  /* the pages' own phone rules shrink their shells for the app's side bar (.cd-faq 75% + 85px,
     .containerGeneral margin-left 58px); there is no side bar inside the frame */
  html body.lf-embed .cd-faq {
    width: 100% !important;
    margin: 0 !important;
  }
  html body.lf-embed .containerGeneral {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* page tabs (Usage, Alerts): inline items instead of stacked boxes. NOT flex on the <ul>: on
     these pages the ul.nav-tabs also wraps the .tab-content, so flex lays the content out as columns. */
  body.lf-embed .nav-tabs > li {
    float: none;
    display: inline-block;
    width: auto;
    vertical-align: bottom;
  }
  body.lf-embed .nav-tabs > li > a {
    white-space: nowrap;
  }
  /* four tabs do not fit one phone row: pills, so the wrap reads as a group, not as stacked boxes */
  body.lf-embed .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 0;
  }
  body.lf-embed .nav-tabs > .tab-content {
    flex: 1 1 100%;
    /* a flex item's automatic minimum is its min-content, and the API keys pane holds two
       420px cards: without this the whole pane grew to 960px inside a 390px frame */
    min-width: 0;
  }
  body.lf-embed .nav-tabs > .tab-content > .tab-pane {
    min-width: 0;
  }
  /* one card per row on a phone, and the key sits above its Copy button */
  body.lf-embed .usekey-cards > .usekey-card {
    flex: 1 1 100%;
  }
  body.lf-embed .apikey-row {
    flex-wrap: wrap;
  }
  /* html-anchored: the base rule above is html-anchored too and would out-rank a plain one */
  html body.lf-embed .apikey-row .btn.copy-api-key {
    flex: 1 1 100%;
    /* a phone rule further down turns .btn into display:block, which kills the gap between
       the icon and the label */
    display: inline-flex !important;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px !important;
    line-height: 20px !important;
  }
  /* Regenerate sits under Copy: same width, so the two read as one stack. Its column is a
     flex item sized to its content (col-xs-3), hence the basis as well as the width. */
  body.lf-embed .apiContainer > [class*="col-"] {
    flex: 1 1 100%;
  }
  html body.lf-embed #regenerateAPI {
    display: block;
    width: 100%;
  }
  html body.lf-embed .nav-tabs > li > a {
    margin: 0;
    padding: 6px 12px !important;
    font-size: 13px;
    border: 1px solid var(--lfs-border) !important;
    border-radius: 999px !important;
    background: transparent !important;
  }
  html body.lf-embed .nav-tabs > li.active > a {
    color: var(--lfs-accent-text) !important;
    background: var(--lfs-accent-soft) !important;
    border-color: transparent !important;
  }
  /* empty states: the marketing-size heading does not fit a phone */
  body.lf-embed .containerGeneral h1,
  body.lf-embed .containerGeneral h2,
  body.lf-embed .container-alerts h1,
  body.lf-embed .container-alerts h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  /* inner modals: tighter body, stacked footer, full-width buttons */
  html body.lf-embed .modal .modal-body {
    padding: 16px !important;
  }
  body.lf-embed .modal .executeTriggerContainer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body.lf-embed .modal .executeTriggerContainer .orContainer {
    display: none;
  }
  html body.lf-embed .modal .executeTriggerContainer #saveChannel,
  html body.lf-embed .modal .buttonsContainer,
  html body.lf-embed .modal .buttonsContainer .cancelContainer,
  html body.lf-embed .modal .buttonsContainer .cancelContainer button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  html body.lf-embed .modal .executeTriggerContainer #saveChannel {
    font-size: 15px !important;
    padding: 10px 16px !important;
    line-height: 20px !important;
  }
  /* channel picker: icon and name on one line, description under it, the button full width */
  body.lf-embed .modal-add-alert-channel .alert-container {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }
  body.lf-embed .modal-add-alert-channel .alert-container .box-flex-100 {
    flex: 1 1 100%;
    order: 3;
  }
  body.lf-embed .modal-add-alert-channel .alert-container > a.btn {
    flex: 1 1 100%;
    order: 4;
    text-align: center;
  }
}