/* Local deviations from flexadmin-ui only; the kit (app.css) owns the look.
   Every rule says why it exists and must not override a kit rule. */

/* Reflow at 320 px: a long unbreakable text (a source title in a citation) wraps. The kit wraps
   only the titles of the list of steps. */
.step, .citations { overflow-wrap: anywhere; }

/* The probe of js/obal.js opens and closes both menus; without transitions nothing of it is ever
   painted (set only for the duration of the probe). */
html.fx-probing *, html.fx-probing *::before, html.fx-probing *::after {
  transition: none !important;
  animation: none !important;
}

/* Menus without working scripts (V-4, L-3). js/obal.js verifies the kit's scripts and marks
   <html>: `fx-menu` = layout.js really opens the menus, `fx-dropdown` = Bootstrap's dropdown is
   available for the user menu. Without a mark the menus are blocks in the page flow, so the
   navigation and the logout stay visible and reachable. layout.js makes a hidden sidebar
   `inert`; the sidebar is therefore shown in the flow only while it is not (`:not([inert])`).
   The fixed header is out of the flow: <body> reserves its height and `.main` gives its own
   offset up. */
@media (max-width: 1199.98px) {
  html:not(.fx-menu) body { padding-top: var(--header-height); }
  html:not(.fx-menu) .main { margin-top: 0; }
  html:not(.fx-menu) body:not(.sidebar-open) .sidebar:not([inert]) {
    position: static;
    transform: none;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-border);
    box-shadow: none;
  }
  html:not(.fx-menu):has(body:not(.sidebar-open) .sidebar:not([inert])) .sidebar-toggle { display: none; }
}

/* Below 768 px the header actions are replaced by .mobile-header-menu (needs layout.js). */
@media (max-width: 767.98px) {
  html:not(.fx-menu) .mobile-header-menu {
    display: block;
    position: static;
  }
  html:not(.fx-menu) .mobile-menu-toggle,
  html:not(.fx-menu) .mobile-header-menu .theme-toggle { display: none; }
}

/* From 768 px the logout is in the user menu (needs Bootstrap's dropdown); without it the
   mobile menu is shown in the flow instead (the kit hides it with !important). */
@media (min-width: 768px) {
  html:not(.fx-dropdown) body { padding-top: var(--header-height); }
  html:not(.fx-dropdown) .main { margin-top: 0; }
  html:not(.fx-dropdown) .mobile-header-menu {
    display: block !important;
    position: static;
    animation: none;
  }
  html:not(.fx-dropdown) .user-dropdown,
  html:not(.fx-dropdown) .mobile-header-menu .theme-toggle { display: none; }
}

/* The fixed sidebar (>= 1200 px) covers the left edge; the menu in the flow starts beside it.
   Only a page that has the sidebar (the administrator): the participant's top bar has none. */
@media (min-width: 1200px) {
  html:not(.fx-dropdown):has(.sidebar) body:not(.sidebar-hidden) .mobile-header-menu {
    margin-left: var(--sidebar-width);
  }
}

/* Bootstrap floats every <legend> (width 100%) and clears only the next sibling. The kit
   un-floats only the legend of `.fxu-answer-rows` and `.fxu-journal` (fxu-forms.css); the plain
   fieldsets of the text and prediction steps and the components that append their block after
   the hidden native rows need the same. */
fieldset > legend { float: none; }

/* Reflow at 320 px (back office): Django renders `form.as_p` fields without `form-control`, and a
   bare <textarea> keeps its 40-column width and sticks out of the card. Cap it to the card. */
.card-body textarea { max-width: 100%; }