/* HIMART Commerce adaptive content contract v1.4
   ------------------------------------------------
   Himart-only responsive containment and journey geometry.

   Ownership
   - Applies only to himart.html runtime (.himart-commerce-page.hm-wide-himart-test).
   - REUSE is explicitly excluded and continues to use its page-specific component CSS.
   - All Himart journey circles use ONE shared diameter derived from the actual content rail.
   - Runtime grouping capsules may wrap 2/3/4 nodes, but grouping can never change node size.
   - Capsule geometry is content-driven: the shell measures the real inner row, then adds
     the SAME inset on top/right/bottom/left. No hand-authored cluster-width formula remains.
   - Circle typography scales from the circle itself.
   - <=1024px responsive journey geometry is owned by himart-fluid-responsive-guard.css.
   - At >=1600px the 03 principle divider aligns to the left chapter-title baseline while
     preserving the canonical divider -> label/title spacing.

   This file is loaded after the shared editorial contract and is the final Himart-only
   authority for desktop/adaptive content geometry. */

/* ---------- 1. HIMART CONTENT CONTAINMENT ---------- */
html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
#live-main :is(
  .hm-wide-right-rail,
  .narrative-block,
  .principle-grid,
  .design-rule,
  .data-list,
  .data-card,
  .data-viz,
  .flow-area,
  .flow-groups,
  .flow-group,
  .flow-row,
  .journey-stage-flow,
  .journey-flow-block,
  .journey-signal-subsection,
  .journey-redesign-subsection,
  .journey-role-block,
  .journey-more,
  .journey-more-inner,
  .wide-flow-cluster,
  .wide-flow-cluster-inner,
  .journey-role-grid,
  .prototype-case-list,
  .prototype-case,
  .prototype-case-visual
){
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
#live-main :is(.hm-wide-right-rail,.data-viz,.flow-area,.flow-groups,.journey-stage-flow,.journey-more-inner){
  width:100%!important;
}

html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
#live-main :is(img,video,svg,canvas){
  max-width:100%;
}

html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
#journey :is(.flow-label,.wide-flow-cluster-label,.group-label){
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:keep-all!important;
  box-sizing:border-box!important;
}

/* ---------- 2. JOURNEY: ONE DIAMETER + ONE CAPSULE INSET ---------- */
html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
#journey{
  --hm-hj-gap:clamp(6px,.72vw,10px);
  --hm-hj-arrow:clamp(14px,1.35vw,20px);
  --hm-hj-cluster-inset:clamp(12px,.95vw,18px);
  --hm-hj-cluster-border-total:2px;
}

/* The actual content rail is the only sizing reference. Four equal circles, three arrows,
   six sequence gaps and one capsule shell must fit inside that rail. The capsule itself
   is NOT given a calculated width below; its real DOM contents determine its width. */
html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
#journey .hm-wide-right-rail{
  container-type:inline-size!important;
  container-name:hm-himart-journey!important;
  --hm-hj-node-size:min(
    292px,
    calc((100cqw - var(--hm-hj-arrow) - var(--hm-hj-arrow) - var(--hm-hj-arrow) - var(--hm-hj-gap) - var(--hm-hj-gap) - var(--hm-hj-gap) - var(--hm-hj-gap) - var(--hm-hj-gap) - var(--hm-hj-gap) - var(--hm-hj-cluster-inset) - var(--hm-hj-cluster-inset) - var(--hm-hj-cluster-border-total)) / 4)
  );
}

/* Legacy fixed line lengths such as 552/852/1152px are never allowed to establish width. */
html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
#journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .flow-group{
  --line-left:0px!important;
  --line-width:100%!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
#journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .flow-group::before{
  left:0!important;
  width:100%!important;
  max-width:100%!important;
}

/* Desktop/tablet-wide geometry. The narrow contract starts at 1024px and is intentionally
   kept in the separate responsive guard so two layout grammars never compete. */
@media (min-width:1025px){
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) :is(.flow-row,.journey-flow-row){
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:var(--hm-hj-gap)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* One immutable node diameter everywhere: FLOW, SIGNALS, REDESIGN, grouped or direct. */
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .flow-node{
    flex:0 0 var(--hm-hj-node-size)!important;
    width:var(--hm-hj-node-size)!important;
    min-width:var(--hm-hj-node-size)!important;
    max-width:var(--hm-hj-node-size)!important;
    height:var(--hm-hj-node-size)!important;
    min-height:var(--hm-hj-node-size)!important;
    max-height:var(--hm-hj-node-size)!important;
    aspect-ratio:1/1!important;
    margin:0!important;
    padding:clamp(12px,1.35vw,22px)!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    container-type:inline-size!important;
  }

  /* Every arrow has one immutable width. Explicit margin/padding reset is important:
     historical journey bundles used several arrow widths/gaps and those values must not
     silently enlarge the real capsule contents. */
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .flow-arrow{
    position:relative!important;
    flex:0 0 var(--hm-hj-arrow)!important;
    width:var(--hm-hj-arrow)!important;
    min-width:var(--hm-hj-arrow)!important;
    max-width:var(--hm-hj-arrow)!important;
    height:clamp(30px,3vw,44px)!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .flow-arrow::before{
    width:clamp(10px,1.05vw,16px)!important;
    height:clamp(10px,1.05vw,16px)!important;
  }

  /* CANONICAL CAPSULE GEOMETRY
     --------------------------
     Previous versions calculated the outer width from a guessed node count. When the
     runtime grouping or an old gap rule differed by even one unit, the inner row could
     overflow to the right: top/bottom/left looked correct while the right inset collapsed.

     The shell now sizes itself from the ACTUAL .wide-flow-cluster-inner max-content width.
     content-box makes the four padding values true geometric insets. Therefore 2-, 3- and
     4-node capsules all get the exact same visual distance from circle tangent to shell. */
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .wide-flow-cluster{
    position:relative!important;
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:max-content!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:var(--hm-hj-cluster-inset)!important;
    border-width:1px!important;
    border-style:solid!important;
    border-radius:999px!important;
    box-sizing:content-box!important;
    overflow:visible!important;
  }

  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .wide-flow-cluster-inner{
    display:flex!important;
    flex:0 0 auto!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:var(--hm-hj-gap)!important;
    width:max-content!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--hm-hj-node-size)!important;
    min-height:var(--hm-hj-node-size)!important;
    max-height:var(--hm-hj-node-size)!important;
    margin:0!important;
    padding:0!important;
    box-sizing:content-box!important;
  }

  /* The label only masks the top border. It never participates in shell sizing. */
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .wide-flow-cluster-label{
    position:absolute!important;
    top:0!important;
    left:50%!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    padding:0 clamp(8px,.75vw,12px)!important;
    background:#000!important;
    line-height:1.35!important;
    text-align:center!important;
    z-index:2!important;
  }

  /* If a legacy absolute journey-row-group survives a runtime pass while a canonical
     cluster exists in the same row, never draw a second competing tablet shell. */
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey .journey-flow-block :is(.flow-row,.journey-flow-row):has(> .wide-flow-cluster) > .journey-row-group{
    display:none!important;
  }

  /* Typography follows each circle's own inline size. */
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .flow-node .hm-card-no{
    margin:0 0 clamp(7px,4.8cqi,14px)!important;
    font-size:clamp(9px,5cqi,12px)!important;
    line-height:1.2!important;
  }
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .flow-node h4{
    margin:0!important;
    max-width:100%!important;
    font-size:clamp(15px,10.2cqi,26px)!important;
    line-height:1.18!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  html body.himart-page-body.himart-commerce-page.hm-wide-himart-test:not(.reuse-current)
  #journey :is(.journey-flow-block,.journey-signal-subsection,.journey-redesign-subsection) .flow-node p{
    margin:clamp(7px,5cqi,14px) 0 0!important;
    max-width:86%!important;
    font-size:clamp(10px,5.7cqi,14px)!important;
    line-height:1.4!important;
    word-break:keep-all!important;
    overflow-wrap:break-word!important;
  }
}

/* ---------- 3. 03 PRINCIPLE DIVIDER / TITLE RHYTHM ---------- */
@media (min-width:1600px){
  /* The divider itself shares the left 03 title baseline. FAMILIARITY starts the
     canonical 40px below the divider; alignment must never be achieved by deleting
     the title inset. */
  html body.himart-page-body.himart-commerce-page.hm-wide-editorial-test.hm-wide-himart-test:not(.reuse-current)
  #live-main > #journey.hm-section > .hm-wrap > .hm-wide-right-rail > .principle-grid:first-child{
    margin-top:0!important;
    padding-top:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  html body.himart-page-body.himart-commerce-page.hm-wide-editorial-test.hm-wide-himart-test:not(.reuse-current)
  #live-main > #journey.hm-section > .hm-wrap > .hm-wide-right-rail > .principle-grid:first-child > .principle-item{
    margin-top:0!important;
    border-top:1px solid var(--hm-line-weak)!important;
    padding-top:var(--hm-editorial-line-to-title,var(--hm-space-component,40px))!important;
  }
}