/* TOOL-UX-001 compact, tool-first density layer.
   Payload Guard is the hierarchy reference; NAMI_LIGHT_TOOL_V1 remains the visual language. */

body[data-tool-ux="compact-v1"] {
  --tool-ux-title-size:clamp(2.05rem,3.35vw,3rem);
  --tool-ux-header-gap:.55rem;
}

body[data-tool-ux="compact-v1"] .masthead,
body[data-tool-ux="compact-v1"] .hero {
  position:relative;
}

body[data-tool-ux="compact-v1"] .masthead h1,
body[data-tool-ux="compact-v1"] .hero h1 {
  max-width:850px !important;
  margin:0 !important;
  font-size:var(--tool-ux-title-size) !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
  line-height:1.02 !important;
}

body[data-tool-ux="compact-v1"] .masthead .eyebrow,
body[data-tool-ux="compact-v1"] .hero .eyebrow {
  margin:0 0 .38rem !important;
  font-size:.7rem !important;
  letter-spacing:.1em !important;
}

body[data-tool-ux="compact-v1"] .masthead .lede,
body[data-tool-ux="compact-v1"] .hero .hero-copy {
  max-width:780px !important;
  margin:.48rem 0 0 !important;
  font-size:.96rem !important;
  line-height:1.48 !important;
}

body[data-tool-ux="compact-v1"] .masthead .surface-header-support,
body[data-tool-ux="compact-v1"] .hero .surface-header-support {
  position:absolute !important;
  top:1rem;
  right:0;
  z-index:2;
  margin:0 !important;
}

body.moq-tool-page[data-tool-ux="compact-v1"] > header.masthead {
  display:block !important;
  padding:1.05rem 7rem .65rem 0 !important;
  margin-bottom:.55rem !important;
}

body.moq-tool-page[data-tool-ux="compact-v1"] > main {
  padding-bottom:2.5rem;
}

body.moq-tool-page[data-tool-ux="compact-v1"] #planner-form > h2 {
  margin:.65rem 0 .5rem !important;
  font-size:1.12rem !important;
}

body.moq-tool-page[data-tool-ux="compact-v1"] .assumptions {
  gap:.72rem !important;
  padding:.9rem !important;
}

body.moq-tool-page[data-tool-ux="compact-v1"] .planning-boundary {
  margin:.9rem 0 1.25rem !important;
}

body.tile-tool-page[data-tool-ux="compact-v1"] .shell {
  padding:1.05rem 0 3rem;
}

body.tile-tool-page[data-tool-ux="compact-v1"] .masthead {
  display:block;
  min-height:0;
  margin-bottom:.7rem;
  padding-right:7rem;
}

body.tile-tool-page[data-tool-ux="compact-v1"] .inputs-card {
  padding:1.15rem;
}

body.tile-tool-page[data-tool-ux="compact-v1"] .card-head {
  margin-bottom:.9rem;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .shell {
  padding:1.05rem 0 3rem !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .hero {
  display:block !important;
  padding:.05rem 7rem .75rem 0 !important;
  margin:0 0 .65rem !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .hero-meta {
  position:absolute;
  top:0;
  right:0;
  width:max-content;
  display:block;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .hero .surface-header-support {
  position:static !important;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .workspace {
  padding-top:.65rem;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .card-head {
  padding:1rem 1.15rem;
}

body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .card-body {
  padding:1.15rem;
}

@media (max-width:680px) {
  body[data-tool-ux="compact-v1"] {
    --tool-ux-title-size:clamp(2rem,9vw,2.45rem);
  }

  body.moq-tool-page[data-tool-ux="compact-v1"] > header.masthead,
  body.tile-tool-page[data-tool-ux="compact-v1"] .masthead,
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .hero {
    display:block !important;
    padding-right:0 !important;
  }

  body[data-tool-ux="compact-v1"] .masthead .eyebrow,
  body[data-tool-ux="compact-v1"] .hero .eyebrow {
    max-width:calc(100% - 7rem);
    min-height:2rem;
  }

  body[data-tool-ux="compact-v1"] .masthead .surface-header-support,
  body[data-tool-ux="compact-v1"] .hero .surface-header-support {
    top:-.15rem;
  }

  body.tile-tool-page[data-tool-ux="compact-v1"] .shell,
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .shell {
    padding-top:.65rem !important;
  }

  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .hero-meta {
    top:.2rem;
    right:0;
  }

  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .card-head,
  body[data-nami-design-system="NAMI_LIGHT_TOOL_V1"][data-tool-ux="compact-v1"] .card-body {
    padding:.9rem;
  }
}