/* Interface density: Balanced and Compact (rebrand PR B, docs/brand/INTERFACE_DENSITY.md).
 *
 * Comfortable is the approved look, and nothing in this sheet matches it: every rule requires
 * html[data-density="balanced"] or html[data-density="compact"], which the mh-density-boot script
 * in index.html sets before the first stylesheet loads. The values are the tokens of
 * density-tokens.css, generated from core/ui_density.py; this sheet only maps them onto surfaces.
 * A one-off distance the tokens do not name is written as its Comfortable value times
 * --mh-density-ratio, so it shrinks by the same share as everything else.
 *
 * Why one cascade layer with !important. The approved look and the parity sheets before it set
 * these properties with id selectors and !important. An !important declaration inside a cascade
 * layer outranks every unlayered one, whatever its specificity or position, so this sheet wins
 * from its slot just before approved-style.css without joining the specificity race. A browser
 * without cascade layers ignores the whole block and shows Comfortable.
 *
 * Never here: a font size, transform, zoom, or any size that takes a control below the 44 px hit
 * target (tests/test_ci_ui_density.py and scripts/miniapp_density_visual.js check it).
 */

@layer mh-density {
  /* ------------------------------------------------------------------ tokens
     Re-point the geometry tokens the approved look and the shared components already read. */
  html:is([data-density="balanced"], [data-density="compact"]) body {
    --ap-button-h: var(--mh-density-control-h) !important;
    --ap-icon: var(--mh-density-icon) !important;
    --ap-radius: var(--mh-density-radius-card) !important;
    --mh-space-1: var(--mh-density-space-1) !important;
    --mh-space-2: var(--mh-density-space-2) !important;
    --mh-space-3: var(--mh-density-space-3) !important;
    --mh-space-4: var(--mh-density-space-4) !important;
    --mh-space-5: var(--mh-density-space-5) !important;
    --mh-space-6: var(--mh-density-space-6) !important;
    --mh-space-7: var(--mh-density-space-7) !important;
    --mh-page-gutter: var(--mh-density-page-gutter) !important;
    --mh-section-gap: var(--mh-density-section-gap) !important;
    --mh-component-gap: var(--mh-density-space-3) !important;
    --mh-card-pad: var(--mh-density-card-pad-y) !important;
    --mh-row-pad-y: var(--mh-density-list-card-pad-y) !important;
    --mh-row-pad-x: var(--mh-density-card-pad-x) !important;
    --mh-lh-body: var(--mh-density-leading-body) !important;
    --mh-geo-surface: var(--mh-density-radius-card) !important;
    --mh-geo-flush: calc(var(--mh-density-radius-card) - 1px) !important;
    --mh-geo-inner: var(--mh-density-space-3) !important;
    --mh-geo-list-gap: var(--mh-density-list-gap) !important;
    --nav-height: var(--mh-density-nav-h) !important;
    --bottom-tab-height: var(--mh-density-nav-h) !important;
    --mh-bottom-nav-h: var(--mh-density-nav-h) !important;
    line-height: var(--mh-density-leading-body) !important;
  }

  /* -------------------------------------------------------------- app shell */
  html:is([data-density="balanced"], [data-density="compact"]) .mh-header {
    /* the safe-area term stays; a full-bleed view keeps its zero gutter */
    padding-top: calc(var(--mh-density-header-pad-y) + var(--safe-top, 0px)) !important;
    padding-bottom: var(--mh-density-header-pad-y) !important;
    padding-inline: min(var(--screen-pad-x, 16px), var(--mh-density-page-gutter)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) :is(.mh-logo, .mh-logo-img) {
    width: var(--mh-density-brand-mark) !important;
    height: var(--mh-density-brand-mark) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .app-main {
    padding-top: var(--mh-density-page-top) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .bottom-nav-item {
    min-height: var(--mh-density-nav-item-h) !important;
    padding: calc(6px * var(--mh-density-ratio)) 2px calc(4px * var(--mh-density-ratio)) !important;
    gap: calc(4px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .bottom-nav-svg {
    width: var(--mh-density-nav-icon) !important;
    height: var(--mh-density-nav-icon) !important;
  }

  /* ------------------------------------------------------------ page heads */
  html:is([data-density="balanced"], [data-density="compact"]) .mj-screen-head {
    row-gap: var(--mh-density-stack-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-page-header__title {
    line-height: var(--mh-density-leading-title) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) #view-jobs .mj-screen-head {
    margin-bottom: var(--mh-density-space-1) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) #view-saved .mj-screen-head {
    margin-bottom: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) :is(#view-news, #view-account) .mj-screen-head {
    margin-bottom: var(--mh-density-space-4) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) #view-career .mj-screen-head {
    margin-bottom: var(--mh-density-space-5) !important;
  }

  /* -------------------------------------------------- segmented controls */
  html:is([data-density="balanced"], [data-density="compact"]) :is(.mh-saved-segments, .mj-sector-rail):not(.mj-filter-chips) {
    padding: var(--mh-density-segment-pad) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) #view-saved .mh-saved-segments {
    margin-bottom: var(--mh-density-space-3) !important;
  }

  /* ---------------------------------------------------------------- Jobs */
  html:is([data-density="balanced"], [data-density="compact"]) .mj-search-block {
    gap: var(--mh-density-stack-gap) !important;
    margin-bottom: var(--mh-density-space-1) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-role-toggle {
    padding: calc(10px * var(--mh-density-ratio)) calc(12px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .jobs-result-count {
    margin-bottom: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-list-v2 {
    gap: var(--mh-density-list-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-offer-card__open {
    padding-top: var(--mh-density-list-card-pad-y) !important;
    padding-bottom: var(--mh-density-list-card-pad-y) !important;
    padding-left: var(--mh-density-card-pad-x) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-card-v2__body {
    gap: var(--mh-density-card-gap) !important;
    margin-bottom: var(--mh-density-space-1) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-card-v2__identity {
    margin-bottom: var(--mh-density-space-1) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-card-v2__title {
    line-height: var(--mh-density-leading-title) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-card-v2__company {
    line-height: calc(1 + 0.55 * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-card-v2__chips {
    gap: var(--mh-density-inline-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) :is(.job-chip, .mh-news-card__tag) {
    min-height: calc(24px * var(--mh-density-ratio)) !important;
    padding-top: var(--mh-density-tag-pad-y) !important;
    padding-bottom: var(--mh-density-tag-pad-y) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-card-v2__rows {
    margin-top: var(--mh-density-space-2) !important;
    margin-bottom: calc(6px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-offer-card__save {
    top: var(--mh-density-list-card-pad-y) !important;
    right: calc(12px * var(--mh-density-ratio)) !important;
  }

  /* ---------------------------------------------------------- Job detail */
  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-top {
    padding-bottom: var(--mh-density-space-3) !important;
    margin-bottom: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-card-v2 {
    padding: var(--mh-density-card-pad-y) var(--mh-density-card-pad-x) calc(18px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-card-v2 .mj-detail-header {
    padding-bottom: var(--mh-density-section-gap) !important;
    margin-bottom: var(--mh-density-space-6) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-title-v2 {
    margin-bottom: calc(10px * var(--mh-density-ratio)) !important;
    line-height: var(--mh-density-leading-title) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-detail-company {
    margin-bottom: var(--mh-density-space-4) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-detail-compensation {
    gap: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-card-v2 .job-detail-section {
    margin-bottom: var(--mh-density-section-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-section-title {
    margin-bottom: calc(10px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-detail-facts-grid {
    margin-bottom: var(--mh-density-space-4) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-detail-fact {
    padding-top: var(--mh-density-row-pad-y) !important;
    padding-bottom: var(--mh-density-row-pad-y) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) :is(.mj-detail-missing, .job-detail-missing-desc) {
    padding: calc(10px * var(--mh-density-ratio)) calc(12px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-missing-desc {
    margin-bottom: var(--mh-density-space-3) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-card-v2 .mj-detail-missing {
    margin-bottom: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-desc {
    margin-bottom: calc(10px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-dock {
    margin-top: var(--mh-density-section-gap) !important;
    padding-top: var(--mh-density-card-pad-y) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-actions-kicker {
    margin-bottom: var(--mh-density-stack-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .job-detail-actions-row {
    gap: var(--mh-density-stack-gap) !important;
  }

  /* --------------------------------------------------------------- Saved */
  html:is([data-density="balanced"], [data-density="compact"]) .mj-empty-card {
    padding: var(--mh-density-card-pad-y) var(--mh-density-card-pad-x) !important;
    gap: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-empty-icon {
    margin-bottom: var(--mh-density-space-3) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-empty-card :is(.mh-button, .mj-btn-primary) {
    margin-top: calc(14px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-pro-tip {
    padding: calc(14px * var(--mh-density-ratio)) var(--mh-density-space-4) !important;
    margin-top: var(--mh-density-section-gap) !important;
  }

  /* ---------------------------------------------------------------- News */
  html:is([data-density="balanced"], [data-density="compact"]) .mh-news-list {
    gap: var(--mh-density-list-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-news-card {
    padding: var(--mh-density-card-pad-y) var(--mh-density-card-pad-x) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-news-card__meta {
    margin-bottom: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-news-card__title {
    margin-bottom: calc(6px * var(--mh-density-ratio)) !important;
    line-height: var(--mh-density-leading-title) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-news-card__summary {
    margin-bottom: var(--mh-density-card-gap) !important;
    line-height: calc(1 + 0.65 * var(--mh-density-ratio)) !important;
  }

  /* -------------------------------------------------------------- Career */
  html:is([data-density="balanced"], [data-density="compact"]) .mh-career-kicker {
    margin-top: calc(18px * var(--mh-density-ratio)) !important;
    margin-bottom: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-career-kicker:first-child {
    margin-top: calc(6px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-career-tools {
    gap: var(--mh-density-space-4) !important;
    margin-bottom: var(--mh-density-section-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-career-card {
    padding: var(--mh-density-card-pad-y) var(--mh-density-card-pad-x) !important;
    gap: var(--mh-density-space-3) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-career-tool__icon {
    width: var(--mh-density-tile) !important;
    height: var(--mh-density-tile) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-career-card__title {
    line-height: var(--mh-density-leading-title) !important;
  }

  /* ------------------------------------------------------------- Account */
  html:is([data-density="balanced"], [data-density="compact"]) .mj-account-profile {
    padding: var(--mh-density-card-pad-y) var(--mh-density-card-pad-x) !important;
    gap: calc(14px * var(--mh-density-ratio)) !important;
    margin-bottom: var(--mh-density-section-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-account-avatar {
    width: calc(52px * (1 + var(--mh-density-ratio)) / 2) !important;
    height: calc(52px * (1 + var(--mh-density-ratio)) / 2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-account-section {
    margin-bottom: var(--mh-density-section-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-account-section__title {
    margin-bottom: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-info-card {
    padding: var(--mh-density-card-pad-y) var(--mh-density-card-pad-x) !important;
    gap: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) #view-account .mj-info-card:not(:last-child) {
    margin-bottom: var(--mh-density-space-3) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) :is(.mj-info-card, .mj-empty-card) :is(h3, .mj-empty-title) {
    margin-bottom: calc(6px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-premium-card p {
    margin-bottom: var(--mh-density-space-2) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mh-account-privacy-card p {
    margin-bottom: calc(10px * var(--mh-density-ratio)) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-settings-list {
    padding: var(--mh-density-card-pad-y) var(--mh-density-card-pad-x) !important;
    gap: var(--mh-density-card-gap) !important;
  }

  html:is([data-density="balanced"], [data-density="compact"]) .mj-settings-row {
    padding-top: var(--mh-density-row-pad-y) !important;
    padding-bottom: var(--mh-density-row-pad-y) !important;
  }
}