/* HAOLLA v1.35.4 — mobile form, keyboard and micro-layout hardening
   Goals: prevent iOS focus zoom, keep keyboards clear of floating CTAs,
   and keep localized/AI-generated text inside cards across all languages. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Defensive wrapping for customer-facing dynamic content. */
main :where(h1,h2,h3,h4,h5,h6,p,li,dd,dt,blockquote,figcaption),
.haollaDiagnosticReportV1350 :where(b,strong,span,small,p,li,dd,dt,h1,h2,h3,h4){
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}
html[lang^="ko"] main :where(h1,h2,h3,h4,h5,h6,p,li,dd,dt,blockquote,figcaption),
html[lang^="ko"] .haollaDiagnosticReportV1350 :where(b,strong,span,small,p,li,dd,dt,h1,h2,h3,h4){
  word-break:keep-all;
}
main :where(form,label,fieldset,article,section,.card,.glassCard,.r1290Lead,.r1290LeadForm,.sgForm,.formPanelV4),
.haollaDiagnosticReportV1350,
.haollaDiagnosticReportV1350 *{min-width:0;box-sizing:border-box}
pre,code{max-width:100%;overflow-x:auto}
table{max-width:100%}

/* Dynamic diagnostic content should wrap elegantly instead of forcing a card wider. */
.diagMetaV1350{max-width:100%}
.diagMetaV1350 span{max-width:100%;white-space:normal;text-align:left}
.diagRubricGridV1352 header{flex-wrap:wrap}
.diagRubricStatusV1352{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
.diagAssessmentHeroV1352>div,.diagRubricGridV1352>article,.diagQuickGridV1352 article,
.diagQuestionGridV1352 article,.diagDetailGridV1350 article,.diagCardsV1350 article,
.diagMethodV1350 article,.diagTimelineV1350 article,.diagConsultGridV1353 article,
.diagInstitutionGridV1353 article{overflow:hidden}

@media(max-width:900px){
  a,button,input,select,textarea{touch-action:manipulation}
  /* iOS Safari zooms focused controls smaller than 16px. Never allow that. */
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .leadForm input,.leadForm select,.leadForm textarea,
  .r1290LeadForm input,.r1290LeadForm select,.r1290LeadForm textarea,
  .sgForm input,.sgForm select,.sgForm textarea{
    font-size:16px!important;
    line-height:1.45!important;
    max-width:100%!important;
    min-width:0!important;
  }
  input::placeholder,textarea::placeholder,
  .leadForm input::placeholder,.leadForm textarea::placeholder,
  .r1290LeadForm input::placeholder,.r1290LeadForm textarea::placeholder,
  .sgForm input::placeholder,.sgForm textarea::placeholder{
    font-size:16px!important;
    line-height:1.45!important;
  }
  form input[type="file"]{
    font-size:16px!important;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  form input[type="file"]::file-selector-button{
    max-width:100%;
    min-height:40px;
    margin-inline-end:10px;
    padding:8px 11px;
    border-radius:10px;
    font:700 14px/1.2 inherit;
  }
  form label{max-width:100%;overflow-wrap:anywhere}
  form button,form .primaryBtn,form .ghostBtn,form .softBtn,
  .diagActionsV1350 :is(a,button){
    max-width:100%;
    white-space:normal!important;
    overflow-wrap:anywhere;
    text-align:center;
  }

  /* Give focused fields enough scroll clearance above Safari's keyboard/toolbars. */
  form :is(input,textarea,select){scroll-margin-top:96px;scroll-margin-bottom:42vh}
  textarea{max-height:52vh}

  /* The two-button global dock stays inside even very narrow visual viewports. */
  .haollaUtilityRail{
    right:max(8px,env(safe-area-inset-right))!important;
    left:max(8px,env(safe-area-inset-left))!important;
    width:auto!important;
    max-width:calc(100vw - 16px)!important;
    grid-template-columns:minmax(0,1fr) minmax(92px,.58fr)!important;
    overflow:hidden!important;
  }
  .haollaUtilityRail .learningOsLauncher,
  .haollaUtilityRail .messageLauncher{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    line-height:1.2!important;
    text-align:center!important;
  }
  .haollaUtilityRail .learningOsLauncher span{min-width:0;max-width:100%;white-space:normal;justify-content:center;text-align:center}

  /* Local-market pages already have a more relevant 'material / phone' CTA.
     Do not stack a second bottom dock on top of it. */
  body[data-local-growth="true"] .haollaUtilityRail{display:none!important}
  body[data-local-growth="true"] .localStickyCtaV1346{max-width:calc(100vw - 20px);overflow:hidden}
  body[data-local-growth="true"] .localStickyCtaV1346 a{min-width:0;white-space:normal;text-align:center;line-height:1.2}
  body[data-local-growth="true"] .haollaUtilityRail .messageLauncher{bottom:auto!important}

  /* When a form control is active or the virtual keyboard is likely open,
     floating conversion chrome must disappear completely. */
  body.haolla-form-focus .haollaUtilityRail,
  body.haolla-keyboard-open .haollaUtilityRail,
  body.haolla-form-focus .localStickyCtaV1346,
  body.haolla-keyboard-open .localStickyCtaV1346,
  body.haolla-form-focus .conversionSticky,
  body.haolla-keyboard-open .conversionSticky,
  body.haolla-form-focus .bottomBar,
  body.haolla-keyboard-open .bottomBar,
  body.haolla-form-focus > .messageLauncher,
  body.haolla-keyboard-open > .messageLauncher,
  body.haolla-form-focus > .learningOsLauncher,
  body.haolla-keyboard-open > .learningOsLauncher,
  body.haolla-form-focus > .v122ActionRail,
  body.haolla-keyboard-open > .v122ActionRail,
  body.haolla-form-focus > .messageDock,
  body.haolla-keyboard-open > .messageDock,
  body.haolla-report-reading .haollaUtilityRail,
  body.haolla-report-reading .localStickyCtaV1346{
    display:none!important;
  }
  body.haolla-form-focus .messagePanel,
  body.haolla-keyboard-open .messagePanel{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

  /* AI report: prioritize reading space on phones and prevent generated text collisions. */
  .haollaDiagnosticReportV1350{width:100%!important;max-width:100%!important;border-radius:20px!important}
  .diagCoverV1350,.diagSectionV1350,.diagRecommendationV1350,.diagFooterV1350{max-width:100%;overflow:hidden}
  .diagCoverCopyV1350 h2{font-size:clamp(29px,9vw,42px)!important;line-height:1.12!important}
  .diagCoverCopyV1350 p{font-size:16px!important;line-height:1.68!important}
  .diagMetricV1350,.diagCardsV1350 article,.diagDetailGridV1350 article,
  .diagMethodV1350 article,.diagTimelineV1350 article,.diagRubricGridV1352>article,
  .diagQuickGridV1352 article,.diagQuestionGridV1352 article{
    max-width:100%;
  }
  .diagDetailGridV1350 dl>div{grid-template-columns:minmax(58px,72px) minmax(0,1fr)!important}
  .diagDetailGridV1350 dd,.diagRubricGridV1352 p,.diagQuestionGridV1352 p,
  .diagQuickGridV1352 p,.diagConsultGridV1353 b,.diagInstitutionGridV1353 b{
    overflow-wrap:anywhere;
  }
}

@media(max-width:430px){
  .formPanelV4,.r1290LeadForm,.sgForm{padding-inline:16px!important}
  .leadForm{gap:17px}
  .leadForm label,.r1290LeadForm label,.sgForm label{font-size:14px!important;line-height:1.4!important}
  .haollaUtilityRail{padding:6px!important;gap:6px!important;border-radius:18px!important}
  .haollaUtilityRail .learningOsLauncher,.haollaUtilityRail .messageLauncher{min-height:44px!important;font-size:12px!important;padding-inline:9px!important}
  .diagSectionV1350{padding-inline:16px!important}
  .diagMetaV1350{gap:7px!important}
  .diagMetaV1350 span{font-size:12px!important;padding:7px 9px!important}
  .diagRubricGridV1352>article,.diagQuickGridV1352 article,.diagQuestionGridV1352 article{padding:16px!important;border-radius:18px!important}
  .diagDetailGridV1350 dl>div{display:block!important}
  .diagDetailGridV1350 dt{margin-bottom:4px!important}
}