/*
 * Shared route layout contract.
 *
 * Every deep view keeps the same fixed shell: a compact neutral header, a
 * visible Back control, and one scroll owner below it. Feature styles may
 * still own their cards, colours and data layout, but they must not recreate
 * route chrome or add a second top offset.
 */

:root {
  --cid-route-header-height: var(--cid-shell-header-height, 50px);
  --cid-route-inline-gap: clamp(12px, 4vw, 24px);
  --cid-route-top-gap: 8px;
}

body[data-cid-dedicated-view] .site-header {
  background: #fff !important;
  border-bottom: 1px solid #e5ebf3 !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .08) !important;
}

body[data-cid-dedicated-view] .site-header .logo {
  color: #172033 !important;
}

body[data-cid-dedicated-view] #cidSectionContext {
  margin: 0 !important;
}

body[data-cid-dedicated-view] .section-context-button {
  color: #172033 !important;
}

/*
 * The host begins directly below the fixed header. Vertical rhythm belongs
 * to the first content block, which prevents a route from accumulating host
 * padding plus component padding.
 */
body[data-cid-dedicated-view] #categoriesView,
body[data-cid-dedicated-view] #croixViewContainer,
body[data-cid-dedicated-view] #tableauxViewContainer,
body[data-cid-dedicated-view] #results,
body[data-cid-dedicated-view] #profileViewContainer,
body[data-cid-dedicated-view] #resultatAideViewContainer,
body[data-cid-dedicated-view] #historyViewContainer,
body[data-cid-dedicated-view] #globalStatisticsViewContainer {
  padding-top: 0 !important;
}

body[data-cid-dedicated-view="calculator"] #matrixCalculatorPanel {
  padding-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="wallet"] .cid-wallet-view-container {
  padding-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="matrice"].matrix-level-one #matrixPageTitle {
  padding-top: 8px !important;
  padding-bottom: 4px !important;
}

body[data-cid-dedicated-view="matrice"].matrix-level-one #results {
  padding-top: 132px !important;
}

body[data-cid-dedicated-view="matrice"] .matrix-level {
  padding-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="categories"] .categories-view-inner {
  padding-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="history"] .cid-publication-history {
  padding-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="history"] .cid-history-panel {
  padding-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="history"] .cid-publication-history__header {
  margin-top: 0 !important;
}

body[data-cid-dedicated-view="tableaux"]
  #tableauxViewContainer > #tableauxSectionsOverview,
body[data-cid-dedicated-view="tableaux"]
  #tableauxViewContainer > #tableauxSectionDetail,
body[data-cid-dedicated-view="tableaux"]
  #tableauxViewContainer > .tableaux-page-header {
  padding-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="global-statistics"] .global-statistics-shell {
  padding-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="resultat-aide"] .resultat-aide-panel {
  margin-top: var(--cid-route-top-gap) !important;
}

body[data-cid-dedicated-view="anticipe"] #anticipationViewContainer {
  padding-top: var(--cid-route-top-gap) !important;
}

/*
 * All route-level back controls share the same hit area and touch contract.
 * The visual component remains free to choose its icon treatment.
 */
body[data-cid-dedicated-view] [data-cid-back-button],
body[data-cid-dedicated-view] .matrix-back-button,
body[data-cid-dedicated-view] .global-statistics-back,
body[data-cid-dedicated-view] .cid-virtual-chat-back {
  min-width: 44px !important;
  min-height: 44px !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

button,
a,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body[data-cid-dedicated-view] button,
body[data-cid-dedicated-view] [role="button"] {
  min-width: 44px !important;
  min-height: 44px !important;
}

[role="button"] {
  cursor: pointer;
}

@media (max-width: 520px) {
  body[data-cid-dedicated-view="matrice"].matrix-level-one #results {
    padding-top: 124px !important;
  }

  body[data-cid-dedicated-view="history"] .cid-publication-history__header {
    width: calc(100% - 24px) !important;
    padding: 10px 12px 8px !important;
  }

  body[data-cid-dedicated-view="global-statistics"] .global-statistics-shell {
    padding-top: var(--cid-route-top-gap) !important;
  }
}