/* Home width and the hydrogen-storage input row.
   Load after /styles/experience.css. The storage rules use IDs because
   /calc-kit/kit.css is attached later and would beat a single class.
   The home sample heading string lives in the page template, not here. */

/* One home measure inside main. The rail stays in the other app column.
   From 1500px the shell widens .page to --content-wide, while home sections
   stay at --content-max, so only the purpose row reached the right edge. */
#pg-home {
  width: min(100%, var(--content-max));
  max-width: var(--content-max);
  margin-inline: auto;
}

#pg-home > .home-intro {
  width: 100%;
  max-width: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  position: static;
}

#pg-home > .home-intro h1 {
  max-width: none;
  margin: 0;
  font-size: var(--fs-page);
  font-weight: var(--fw-title);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

#pg-home > .home-intro p {
  max-width: none;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* The purpose row is the nav between the records and the price section.
   The calculator links inside .home-workbench keep the existing tool grid. */
#pg-home > nav.home-tools {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: static;
  clear: both;
  margin: 0 0 var(--sp-6);
}

#pg-home > nav.home-tools > .home-tool {
  min-width: 0;
}

/* Storage volume: the single mass field. 360px fits a grouped number and its unit. */
#pane-storage > .kit-card > .kit-field {
  width: min(100%, 360px);
  max-width: 360px;
  min-width: 0;
}

#pane-storage > .kit-card > .kit-field .kit-control {
  width: 100%;
  min-height: 44px;
}

/* Custom state: mass, pressure, temperature, density. Two columns from the kit's 640px break. */
#pane-custom > .kit-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--sp-4);
}

#pane-custom > .kit-card > :not(.kit-field) {
  flex: 1 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#pane-custom > .kit-card > .kit-detail-toggle {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

#pane-custom > .kit-card > .kit-field {
  flex: 1 1 100%;
  width: min(100%, 360px);
  max-width: 360px;
  min-width: 0;
}

#pane-custom > .kit-card > .kit-field .kit-control {
  width: 100%;
  min-height: 44px;
}

@media (min-width: 641px) {
  #pane-custom > .kit-card > .kit-field {
    flex: 0 0 calc(50% - var(--sp-2));
    width: min(360px, calc(50% - var(--sp-2)));
    max-width: 360px;
  }
}