/*
 * First-paint shell lock.
 *
 * Only the document frame is covered here. Component surfaces keep their own
 * presentation and responsive rules. Every route keeps the same fixed
 * application chrome and scroll-surface contract while the browser owns the
 * current visual viewport.
 */
:root {
  /*
   * Keep the boot frame on the exact same viewport contract as the mounted
   * shell. The previous `height: auto` bootstrap state made fixed surfaces
   * resolve against a different document geometry on a cold load.
   */
  /*
   * `svh` is the stable mobile viewport. It prevents Safari's address-bar
   * animation from changing the shell height during the first paint.
   */
  --cid-shell-viewport-height: 100svh !important;
  --cid-visual-offset-top: 0px;
  --cid-visual-height: 100dvh;
  --cid-visual-bottom-extension: 0px;
}

html {
  width: 100% !important;
  height: var(--cid-shell-viewport-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
}

/* The inline bootstrap gate owns the first frame. Keep this fallback here as
 * well so a cached stylesheet or a delayed module cannot reveal a route early.
 */
html.cid-booting body > * {
  visibility: hidden !important;
}
html.cid-booting body {
  overflow: hidden !important;
  background: #fff !important;
}

html.cid-booting {
  background: #fff !important;
}

/*
 * The shell is intentionally hidden while Safari settles its visual
 * viewport. Keep the temporary cover opaque and full-frame; using the
 * measured bottom extension here briefly exposes the grey document canvas
 * before the real surface is ready.
 */
html.cid-booting::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  background: #fff !important;
}

/*
 * Keep the persistent chrome present even while the feed is hydrating. Only
 * the page content is hidden behind the white cover, so the header and the
 * bottom navigation never disappear during startup.
 */
html.cid-booting .site-header,
html.cid-booting .category-bar {
  visibility: visible !important;
  opacity: 1 !important;
}

/*
 * The squirrel is a brand asset, not a navigation state. Keep it out of the
 * critical startup path: the neutral boot cover lets the real Accueil shell
 * settle behind it and then reveals the homepage directly as one stable block.
 */
html.cid-booting #cidSplash {
  display: none !important;
}

/*
 * The startup cover must follow the same visual viewport as the real shell.
 * Without this, Safari can leave a grey strip below the white splash while
 * its address bar is expanded, making the final surface appear to "push"
 * the background when the feed finishes mounting.
 */
html.cid-booting #cidSplash {
  top: var(--cid-visual-offset-top, 0px) !important;
  right: 0 !important;
  bottom: calc(0px - var(--cid-visual-bottom-extension, 0px)) !important;
  left: 0 !important;
}

body {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: var(--cid-shell-viewport-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
}

/*
 * The pending shell must use the same dimensions as the ready shell. Keeping
 * this explicit prevents a first-paint-only height/overflow switch when the
 * splash gate is removed.
 */
html:not(.cid-render-ready),
html:not(.cid-render-ready) body {
  height: var(--cid-shell-viewport-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: hidden !important;
}

body > .site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 5000 !important;
  width: 100% !important;
  height: calc(var(--cid-layout-header-height, 50px) + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(var(--cid-layout-header-height, 50px) + env(safe-area-inset-top, 0px)) !important;
  max-height: calc(var(--cid-layout-header-height, 50px) + env(safe-area-inset-top, 0px)) !important;
  margin: 0 !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  box-sizing: border-box !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body > .site-header > .header-inner {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: var(--cid-layout-header-height, 50px) !important;
  min-height: var(--cid-layout-header-height, 50px) !important;
  box-sizing: border-box !important;
}

/* Accueil uses the same fixed scroll surface as every dedicated route. */
body:not([data-cid-dedicated-view]) #results {
  position: fixed !important;
  inset: calc(
    var(--cid-layout-header-height, 50px) +
    env(safe-area-inset-top, 0px)
  ) 0 0 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overflow-anchor: none !important;
}

/* Do not let an empty pre-mount surface create a phantom full-height tail. */
body:not([data-cid-dedicated-view]) #results:empty {
  min-height: 0 !important;
}

body:not([data-cid-dedicated-view]) .category-bar {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/*
 * Safari can expose a visual viewport offset while its browser chrome is
 * expanded. Keep the fixed shell aligned with that visible viewport. The
 * values are updated continuously by scroll-stability.js; they must not be
 * frozen after the first paint.
 */
body > .site-header {
  top: var(--cid-visual-offset-top, 0px) !important;
}

body:not([data-cid-dedicated-view]) #results,
body[data-cid-dedicated-view] #results,
body[data-cid-dedicated-view] #categoriesView,
body[data-cid-dedicated-view] #croixViewContainer,
body[data-cid-dedicated-view] #tableauxViewContainer,
body[data-cid-dedicated-view] #matrixCalculatorPanel,
body[data-cid-dedicated-view] #profileViewContainer,
body[data-cid-dedicated-view] #notificationCenter,
body[data-cid-dedicated-view] #historyViewContainer,
body[data-cid-dedicated-view] #globalStatisticsViewContainer,
body.croix-active #croixViewContainer,
body.tableaux-active #tableauxViewContainer,
.cid-layout-surface {
  top: calc(
    var(--cid-layout-header-height, 50px) +
    env(safe-area-inset-top, 0px) +
    var(--cid-visual-offset-top, 0px)
  ) !important;
  bottom: calc(0px - var(--cid-visual-bottom-extension, 0px)) !important;
}

body:not([data-cid-dedicated-view]) #results,
body.cid-facebook-feed-active #results,
#results:has(#cid-home-feed) {
  background: #fff !important;
  background-color: #fff !important;
}

#cid-home-feed {
  background: #fff !important;
  background-color: #fff !important;
  min-height: 100% !important;
}

body[data-cid-dedicated-view="virtual-assistant"]
  #virtualAssistantViewContainer {
  top: 0 !important;
  bottom: 0 !important;
}

body:not([data-cid-dedicated-view]) .category-bar,
body[data-cid-dedicated-view] .category-bar,
.category-bar {
  bottom: calc(0px - var(--cid-visual-bottom-extension, 0px)) !important;
}