/* ICODE ERP R81 · One-screen wizard + dynamic role architecture */
@media (min-width: 900px) and (min-height: 760px){
  html,body.erp-wizard-page{height:100%;overflow:hidden}
  .wizard-shell{height:100dvh;min-height:0;display:flex;flex-direction:column}
  .wizard-topbar{
    position:relative!important;top:auto!important;flex:0 0 54px!important;height:54px!important;
    padding:0 clamp(18px,3vw,42px)!important
  }
  .brand-mark{width:34px!important;height:34px!important;border-radius:10px!important}
  .wizard-main{
    width:min(1180px,calc(100% - 32px))!important;
    flex:1 1 auto;min-height:0;
    margin:0 auto!important;padding:12px 0 14px!important;
    display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px
  }
  .wizard-intro{max-width:920px!important;margin:0 auto!important}
  .wizard-intro .eyebrow{font-size:8px!important}
  .wizard-intro h1{
    font-size:clamp(30px,3.2vw,46px)!important;line-height:1!important;
    margin:6px 0 7px!important;letter-spacing:-.04em!important
  }
  .wizard-intro p{font-size:11px!important;line-height:1.45!important}
  .foundation-pills{margin-top:8px!important;gap:5px!important}
  .foundation-pills span{padding:4px 8px!important;font-size:8px!important}
  .alert{margin:0 0 7px!important;padding:8px 10px!important}
  .wizard-card{
    min-height:0!important;height:100%!important;
    display:flex!important;flex-direction:column!important;
    border-radius:19px!important
  }
  .step-progress{
    flex:0 0 48px;grid-template-columns:repeat(5,1fr)!important
  }
  .step-dot{min-height:48px!important;gap:6px!important;font-size:8px!important}
  .step-dot span{width:20px!important;height:20px!important;font-size:7px!important}
  .wizard-step{
    flex:1 1 auto;min-height:0!important;height:auto!important;
    padding:15px 28px 10px!important;overflow:hidden
  }
  .step-heading{margin-bottom:12px!important}
  .step-heading h2{font-size:20px!important}
  .step-heading>div{gap:8px!important}
  .wizard-actions{
    flex:0 0 55px;padding:7px 28px!important
  }
  .wizard-actions .btn{min-height:38px!important}
  .choice-grid{gap:10px!important}
  .choice-card{min-height:0!important}
  .country-card{height:130px!important;padding:14px!important}
  .choice-grid.compact .choice-card{height:90px!important;min-height:90px!important}
  .industry-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important
  }
  .industry-card{min-height:64px!important;padding:9px!important}
  .industry-icon{width:30px!important;height:30px!important}
  .select-panel{
    max-width:760px!important;margin:12px auto 0!important;padding:16px!important
  }
  .select-panel select{height:44px!important}
  .field-note{margin-top:7px!important}
}
@media (min-width: 900px) and (min-height: 760px) and (max-height: 860px){
  .wizard-intro p{display:none}
  .foundation-pills span:nth-child(n+5){display:none}
  .wizard-main{padding-top:8px!important}
  .wizard-intro h1{font-size:34px!important}
}

/* Dynamic experience chooser */
.experience-card{
  min-height:245px!important;
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto auto!important;
  align-items:start!important;
  padding:16px!important;
  overflow:hidden!important
}
.experience-card:has(input[value="enterprise"]),
.experience-card:has(input[value="flow"]){
  padding-inline-start:16px!important
}
.experience-card:has(input[value="enterprise"])::before,
.experience-card:has(input[value="flow"])::before{display:none!important}
.experience-card .choice-icon.large{
  grid-column:1;grid-row:1;width:48px!important;height:48px!important
}
.experience-card .choice-copy{grid-column:2;grid-row:1}
.experience-card>.radio-indicator{grid-column:3;grid-row:1}
.experience-card .experience-preview{
  grid-column:1/2;grid-row:2/4;
  width:230px;height:126px!important;margin:12px 0 0!important;
  align-self:stretch
}
.experience-card .experience-fit{
  grid-column:2/4;grid-row:2;
  display:grid;gap:3px;margin:12px 0 0 246px;min-width:0
}
.experience-fit b{font-size:11px;color:var(--ic-ink)}
.experience-fit small{font-size:9px;color:var(--ic-muted);line-height:1.35}
.experience-fit em{font-size:9px;color:var(--ic-copper-dark);font-style:normal;font-weight:800}
.experience-tags{
  grid-column:2/4;grid-row:3;
  display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0 246px
}
.experience-tags u{
  text-decoration:none;padding:4px 7px;border-radius:999px;background:#f1f4f6;
  color:#647680;font-size:8px;font-weight:800
}
.experience-card:has(input:checked) .experience-tags u{
  background:#fff;color:var(--ic-copper-dark);border:1px solid rgba(221,160,110,.25)
}
.experience-card .experience-preview{
  transform:translateZ(0);
  transition:transform .25s ease,box-shadow .25s ease
}
.experience-card:hover .experience-preview,
.experience-card:has(input:checked) .experience-preview{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 12px 25px rgba(16,45,58,.11)
}
.preview-enterprise>strong u:before{
  animation:r80EntPulse 2.4s ease-in-out infinite
}
.preview-enterprise>strong u:nth-child(2):before{animation-delay:.35s}
.preview-enterprise>strong u:nth-child(3):before{animation-delay:.7s}
.preview-flow>em b{
  animation:r80FlowCard 2.8s ease-in-out infinite
}
.preview-flow>em b:nth-child(2){animation-delay:.35s}
.preview-flow>em b:nth-child(3){animation-delay:.7s}
@keyframes r80EntPulse{
  0%,100%{width:42%;opacity:.65}50%{width:68%;opacity:1}
}
@keyframes r80FlowCard{
  0%,100%{transform:translateY(0);box-shadow:0 3px 10px rgba(57,73,130,.06)}
  50%{transform:translateY(-3px);box-shadow:0 8px 16px rgba(57,73,130,.13)}
}

/* Accounting / audit industry emphasis */
.industry-card:has(input[value="accounting_legal"]){
  border-color:rgba(221,160,110,.55);
  background:linear-gradient(145deg,#fff,#fff7f1)
}
.industry-market-badge{
  grid-column:2;
  display:inline-flex;width:max-content;margin-top:-2px;
  padding:2px 5px;border-radius:999px;background:#fff0e3;color:#a9622c;
  font-size:7px;font-weight:900;letter-spacing:.05em
}
.launch-ready-note{
  color:var(--ic-copper-dark)!important;font-weight:700
}

/* Make the last step feel final, not like another intermediate page */
.wizard-step[data-step="4"] .select-panel{
  border-color:rgba(221,160,110,.35);
  background:linear-gradient(145deg,#fff,#fff8f2)
}
.wizard-step[data-step="4"] .select-panel:after{
  content:"Ready to launch your tailored workspace";
  display:block;margin-top:10px;padding-top:9px;border-top:1px solid rgba(221,160,110,.2);
  color:var(--ic-navy);font-size:10px;font-weight:850
}

/* RTL fixes */
html[dir="rtl"] .experience-card .experience-fit,
html[dir="rtl"] .experience-card .experience-tags{
  margin-left:0;margin-right:246px
}

/* Mobile / small screens remain scrollable and usable */
@media (max-width:899px){
  html,body.erp-wizard-page{overflow:auto!important}
}
@media (max-width:700px){
  .experience-card{
    display:grid!important;
    grid-template-columns:48px 1fr auto!important;
    grid-template-rows:auto auto auto auto!important;
    min-height:0!important
  }
  .experience-card .experience-preview{
    grid-column:1/-1;grid-row:2;width:100%;height:104px!important;margin:10px 0 0!important
  }
  .experience-card .experience-fit{
    grid-column:1/-1;grid-row:3;margin:9px 0 0!important
  }
  .experience-card .experience-tags{
    grid-column:1/-1;grid-row:4;margin:7px 0 0!important
  }
}


/* R81: hidden must beat .btn display:inline-flex */
.wizard-actions [hidden],
.role-picker [hidden]{display:none!important}

/* R81: final step is a launch state, never another Next step */
#erp-demo-wizard:has(.wizard-step[data-step="4"].active) [data-next]{display:none!important}
#erp-demo-wizard:has(.wizard-step[data-step="4"].active) [data-launch]{display:inline-flex!important}

/* R81 role picker */
.role-picker{
  max-width:920px;margin:4px auto 0;padding:12px 14px 10px;
  border:1px solid rgba(221,160,110,.28);border-radius:16px;
  background:linear-gradient(145deg,#fff,#fffaf6)
}
.role-picker-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:9px}
.role-search{
  min-height:39px;display:flex;align-items:center;gap:8px;padding:0 11px;
  border:1px solid #dbe3e7;border-radius:11px;background:#fff
}
.role-search span{color:#758790;font-size:16px}
.role-search input{
  width:100%;height:37px;border:0;outline:0;background:transparent;color:#173640;
  font-size:11px;font-weight:700
}
.role-count{padding:5px 8px;border-radius:999px;background:#f1f4f6;color:#6d7e87;font-size:8px;font-weight:900;white-space:nowrap}
.role-native-wrap label{display:block;margin-bottom:5px;font-size:8px;font-weight:900;color:#697b84;text-transform:uppercase;letter-spacing:.08em}
.role-native-select{width:100%;height:42px;border:1px solid #dbe3e7;border-radius:10px;background:#fff;padding:0 11px;color:#173640;font-weight:700}
.role-picker.is-enhanced .role-native-wrap{
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important
}
.role-group{margin-top:8px}
.role-group header{display:flex;align-items:center;justify-content:space-between;margin:0 2px 6px}
.role-group header div{display:flex;align-items:center;gap:7px}
.role-group header b{font-size:9px;color:#173640}
.role-group header small{font-size:7px;color:#9a6b45;font-weight:800}
.role-chip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.role-chip-grid.compact{grid-template-columns:repeat(5,minmax(0,1fr))}
.role-chip{
  position:relative;min-height:44px;display:flex;align-items:center;gap:7px;padding:7px 9px;
  border:1px solid #e0e6e9;border-radius:10px;background:#fff;color:#40545f;text-align:start;
  cursor:pointer;transition:.14s ease;font-size:9px;font-weight:800
}
.role-chip:hover{transform:translateY(-1px);border-color:#c8d4da;box-shadow:0 5px 12px rgba(17,48,62,.06)}
.role-chip.is-selected{
  border-color:rgba(221,160,110,.72);background:#fff3e8;color:#71421f;
  box-shadow:inset 3px 0 0 #DDA06E
}
.role-chip.is-recommended:after{
  content:"★";margin-inline-start:auto;color:#b8753d;font-size:9px
}
.role-all-toggle{
  margin-top:8px;padding:6px 9px;border:1px solid #dbe3e7;border-radius:9px;
  background:#fff;color:#40545f;font-size:8px;font-weight:900;cursor:pointer
}
.role-chip-grid.scrollable{max-height:116px;overflow:auto;padding:1px 2px 3px}
.role-group[hidden]{display:none!important}
.role-picker .field-note{margin-top:7px!important}
.role-picker .launch-ready-note{margin-bottom:0!important}

/* keep role step compact enough for desktop one-screen */
@media (min-width:900px) and (min-height:760px){
  .wizard-step[data-step="4"]{padding-top:12px!important}
  .wizard-step[data-step="4"] .step-heading{margin-bottom:7px!important}
  .wizard-step[data-step="4"] .role-picker{margin-top:0!important}
  .wizard-step[data-step="4"] .field-note{font-size:8px!important;line-height:1.25!important}
}
@media(max-width:900px){
  .role-chip-grid,.role-chip-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .role-picker-toolbar{grid-template-columns:1fr}
}
@media(max-width:520px){
  .role-chip-grid,.role-chip-grid.compact{grid-template-columns:1fr}
}