/* Shared free-tool shell, both desktop and mobile. Premium never loads this file. */
@layer freeToolsMobile {
 main[data-free-layout][data-standard-tool]{box-sizing:border-box!important;width:100%!important;max-width:1040px!important;margin:0 auto!important;padding:24px 24px 48px!important;min-width:0!important}
 main[data-free-layout][data-standard-tool] .standard-tool-heading{display:block!important;margin:0 0 28px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;text-align:start!important}
 main[data-free-layout][data-standard-tool] .standard-tool-heading :is(.breadcrumb,.ui-breadcrumb,.converter-crumb){display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;overflow-x:auto!important;white-space:nowrap!important;font-size:13px!important;line-height:1.6!important;margin:0 0 26px!important;padding:0 0 4px!important;max-width:100%!important;scrollbar-width:thin}
 main[data-free-layout][data-standard-tool] .standard-tool-heading :is(.breadcrumb,.ui-breadcrumb,.converter-crumb)>*{flex-shrink:0!important;white-space:nowrap!important}
 main[data-free-layout][data-standard-tool] .standard-tool-heading h1{font:750 clamp(30px,3.5vw,42px)/1.15 'Manrope',system-ui,sans-serif!important;color:#0b1535!important;letter-spacing:-.035em!important;max-width:850px!important;margin:0 0 14px!important;overflow-wrap:anywhere!important;text-align:start!important}
 main[data-free-layout][data-standard-tool] .standard-tool-heading>p{font:400 17px/1.6 'DM Sans',system-ui,sans-serif!important;color:#677398!important;margin:0!important;max-width:780px!important}
 main[data-free-layout][data-standard-tool]>:is(.workspace,.word-counter-workspace){display:block!important;margin:0!important;padding:0!important}
 main[data-free-layout][data-standard-tool] :is(.workspace,.word-counter-workspace)>.panel,
 main[data-free-layout][data-standard-tool]>:is(.ui-tool-panel,.pro-workspace,.factory-panel){box-sizing:border-box!important;width:100%!important;max-width:none!important;margin:0!important;padding:24px!important;border:1px solid #e5e9f3!important;border-radius:18px!important;background:#fff!important;box-shadow:none!important}
 main[data-free-layout][data-standard-tool] :is(.workspace,.word-counter-workspace)>.panel>.panel-subtitle{display:none!important}
 main[data-free-layout][data-standard-tool] :is(.pro-form,.form,.ui-form-grid){gap:16px!important}
 main[data-free-layout][data-standard-tool] :is(.pro-form,.form) label{min-width:0!important}
 main[data-free-layout][data-standard-tool] :is(input,select,textarea){max-width:100%;box-sizing:border-box}
 main[data-free-layout][data-standard-tool] :is(button[type=submit],.ui-primary-button,.pro-primary){min-height:48px!important;border-radius:12px!important;background:#5063ff!important;color:white!important;font-size:16px!important;line-height:1.4!important;white-space:normal!important;padding:12px 18px!important}
 main[data-free-layout][data-standard-tool] .pro-actions:has(>button[hidden]):not(:has(>button:not([hidden]))){display:none!important}
 main[data-free-layout][data-standard-tool] :is([data-results],[data-csv-result],[data-text-result],[data-document]):empty{display:none!important}
 main[data-free-layout][data-standard-tool] .tool-about{display:block!important;clear:both;box-sizing:border-box!important;width:100%!important;margin:20px 0 0!important;padding:0!important;border:1px solid #dfe3fa!important;border-radius:16px!important;background:linear-gradient(120deg,#fff,#f9faff)!important;box-shadow:0 5px 20px #283fa506!important}
 main[data-free-layout][data-standard-tool] .tool-about>summary{display:flex!important;align-items:center!important;gap:14px!important;min-height:64px!important;padding:14px 18px!important;box-sizing:border-box!important;list-style:none!important;cursor:pointer;font:650 17px/1.4 'DM Sans',system-ui,sans-serif!important;color:#0d173b!important}
 .tool-about>summary::-webkit-details-marker{display:none}
 .tool-about>summary:focus-visible{outline:3px solid #6877ff;outline-offset:3px;border-radius:14px}
 .tool-about-icon{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;background:#edf0ff;color:#4b55ee;font:700 20px/1 system-ui}
 .tool-about-toggle{position:relative;flex:0 0 32px;height:32px;margin-inline-start:auto;border-radius:50%;background:#edf0ff;color:#4b55ee}
 .tool-about-toggle::before,.tool-about-toggle::after{content:'';position:absolute;inset:15px 9px;background:currentColor;border-radius:2px}
 .tool-about-toggle::after{transform:rotate(90deg)}
 .tool-about[open] .tool-about-toggle{background:#5063ff;color:white}
 .tool-about[open] .tool-about-toggle::after{transform:none}
 main[data-free-layout][data-standard-tool] .tool-about-content{padding:0 20px 20px!important}
 .tool-about:not([open])>.tool-about-content{display:none!important}
 main[data-free-layout][data-standard-tool] .tool-about-content>:is(section,aside,div,p,span){margin:0 0 14px!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;color:#52617e!important}
 /* The accordion owns the background; legacy info cards must not paint another gradient. */
 main[data-free-layout][data-standard-tool] .tool-about-content .ui-info-card::after{content:none!important;display:none!important}
 main[data-free-layout][data-standard-tool] .tool-about-content :is(p,li){font-size:15px!important;line-height:1.65!important;color:#52617e!important}
 main[data-free-layout][data-standard-tool] .tool-about-content :is(h2,h3){font-size:16px!important;line-height:1.4!important;margin:16px 0 8px!important;color:#172640!important}
 main[data-free-layout][data-standard-tool] .tool-about-content :is(.measurement-guide-grid,.wb-info-grid,.cv-info-grid){display:block!important}
 main[data-free-layout][data-standard-tool] .tool-about-content .eyebrow{display:block!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important}
 main[data-free-layout][data-standard-tool] .tool-about-content :is(.pro-note,.pro-privacy,.ui-inline-note,.factory-privacy)::before{display:none!important}
 main[data-free-layout][data-standard-tool]>.related{margin-top:32px!important}
 @media(max-width:768px){
  main[data-free-layout][data-standard-tool]{padding:18px 18px 32px!important}
  main[data-free-layout][data-standard-tool] .standard-tool-heading{margin-bottom:24px!important}
  #app>main[data-free-layout][data-standard-tool] .standard-tool-heading h1{font-size:30px!important}
  main[data-free-layout][data-standard-tool] .standard-tool-heading>p{font-size:16px!important}
  main[data-free-layout][data-standard-tool] :is(.workspace,.word-counter-workspace)>.panel,
  main[data-free-layout][data-standard-tool]>:is(.ui-tool-panel,.pro-workspace,.factory-panel){padding:0!important;border:0!important;border-radius:0!important}
  main[data-free-layout][data-standard-tool] .tool-about>summary{font-size:16px!important;padding:14px!important;gap:10px!important}
  main[data-free-layout][data-standard-tool] .tool-about-content{padding:0 14px 14px!important}
 }
}
main[data-standard-tool] [hidden]{display:none!important}
@layer freeToolsMobile {
 body:has(#app > main[data-free-layout][data-standard-tool]){background:#fff!important}
 @media(max-width:899px){body:has(#app > main[data-free-layout][data-standard-tool]) #app>header{display:block!important;position:static!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;background:#fff!important;border-bottom:1px solid #e9edf5!important;transform:none!important}}
 @media(max-width:899px){body:has(#app > main[data-free-layout][data-standard-tool]) #app>header .nav{display:flex!important;position:static!important;justify-content:space-between!important;align-items:center!important;max-width:1040px!important;min-height:72px!important;padding:12px 24px!important;margin:0 auto!important;box-sizing:border-box!important}}
 @media(max-width:899px){body:has(#app > main[data-free-layout][data-standard-tool]) #app>header .brand{position:static!important;transform:none!important}}
 @media(max-width:899px){body:has(#app > main[data-free-layout][data-standard-tool]) #app>header .nav-right{display:flex!important;position:static!important}}
 @media(max-width:899px){body:has(#app > main[data-free-layout][data-standard-tool]) #app>header .nav-pill{display:inline-flex!important;font-size:13px!important;min-height:44px;align-items:center;white-space:normal}}
 main[data-standard-tool] .tool-about-content .pro-explanation::before,main[data-standard-tool] .tool-about-content .pro-explanation::after{display:none!important}
 @media(max-width:768px){body:has(#app > main[data-free-layout][data-standard-tool]) #app>header .nav{padding:10px 18px!important;min-height:64px!important}}
}
@layer freeToolsMobile {
 body:has(#app>main[data-standard-tool]) #app{background:#fff!important}
 body:has(#app>main[data-standard-tool]) #app::before,body:has(#app>main[data-standard-tool]) #app::after{display:none!important}
}
@layer freeToolsMobile {
 main[data-free-layout][data-standard-tool]{background:#fff!important}
 main[data-free-layout][data-standard-tool]::before,main[data-free-layout][data-standard-tool]::after{display:none!important}
 @media(max-width:899px){body:has(#app>main[data-free-layout][data-standard-tool]) #app>header .nav{gap:12px!important}}
 @media(max-width:899px){body:has(#app>main[data-free-layout][data-standard-tool]) #app>header .brand{flex-shrink:0!important}}
 @media(max-width:899px){body:has(#app>main[data-free-layout][data-standard-tool]) #app>header .nav-right{min-width:0!important;flex-shrink:1!important;max-width:60%!important}}
 @media(max-width:899px){body:has(#app>main[data-free-layout][data-standard-tool]) #app>header .nav-pill{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;box-sizing:border-box!important;text-align:center!important;justify-content:center!important}}
}
@layer freeToolsMobile {
 @media(max-width:899px){body:has(#app>main[data-free-layout][data-standard-tool]) #app>header .nav-tagline{display:none!important}}
}
/* Information is prose, not leftover hero badges or numbered decorative cards. */
@layer freeToolsMobile {
 main[data-free-layout][data-standard-tool] .tool-about-content :is(.pro-note,.pro-privacy,.ui-inline-note,.factory-privacy){position:static!important;font-weight:400!important;padding-inline-start:0!important}
 main[data-free-layout][data-standard-tool] .tool-about-content :is(.pro-note,.pro-privacy,.ui-inline-note,.factory-privacy)::after{display:none!important}
 main[data-free-layout][data-standard-tool] .tool-about-content>h2:first-child{margin-top:4px!important}
 main[data-free-layout][data-standard-tool] .tool-about-content :is(.measurement-guide-grid article,.cv-info-grid article,.wb-info-grid article){padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
}

/* Desktop keeps the original wordmark-only header; mobile keeps its navigation bar. */
@layer freeToolsMobile {
 @media(min-width:900px){
  body:has(#app>main[data-free-layout][data-standard-tool]){background:radial-gradient(ellipse 58vw 610px at 52% 95px,#e5eaff 0%,transparent 78%),#f8faff!important}
  body:has(#app>main[data-free-layout][data-standard-tool]) #app{background:transparent!important}
  main[data-free-layout][data-standard-tool]{background:transparent!important;padding-top:48px!important}
  main[data-free-layout][data-standard-tool] .standard-tool-heading :is(.breadcrumb,.ui-breadcrumb,.converter-crumb){max-width:calc(100% - 100px)!important}
 }
}

/* Keep short desktop tools tall enough for their footer, including reduced views. */
@layer freeToolsMobile {
 @media(min-width:900px){
  body:has(#app>main[data-free-layout][data-standard-tool]) #app{display:flex!important;flex-direction:column!important;min-height:100vh!important}
  body.tool-view-80:has(#app>main[data-free-layout][data-standard-tool]) #app{min-height:125vh!important}
  body.tool-view-90:has(#app>main[data-free-layout][data-standard-tool]) #app{min-height:111.111112vh!important}
  body:has(#app>main[data-free-layout][data-standard-tool]) #app>.site-footer{flex-shrink:0!important;margin-top:auto!important;width:100%!important}
 }
}

/* Style native dropdowns where customizable selects are supported. */
@layer freeToolsMobile {
 @supports (appearance:base-select){
  #app>main[data-free-layout][data-standard-tool] select:not([multiple]):not([size]),
  #app>main[data-free-layout][data-standard-tool] select:not([multiple]):not([size])::picker(select){appearance:base-select!important}
  #app>main[data-free-layout][data-standard-tool] select:not([multiple]):not([size]){background-image:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px}
  #app>main[data-free-layout][data-standard-tool] select::picker-icon{color:#71809d;font-size:14px}
  #app>main[data-free-layout][data-standard-tool] select::picker(select){margin-block:6px;padding:6px;border:1px solid #dfe5f2;border-radius:14px;background:#fff;color:#172b49;box-shadow:0 12px 36px #172b4924;max-height:min(360px,60dvh);overflow-y:auto;overscroll-behavior:contain;font:500 16px/1.4 'DM Sans',system-ui,sans-serif}
  #app>main[data-free-layout][data-standard-tool] select option{min-height:44px;padding:10px 12px;border-radius:8px;gap:12px;white-space:normal;overflow-wrap:anywhere;background:#fff;color:#263754;cursor:pointer}
  #app>main[data-free-layout][data-standard-tool] select option:checked{background:#edf0ff!important;color:#4053df!important;font-weight:650}
  #app>main[data-free-layout][data-standard-tool] select option:not(:disabled):hover,
  #app>main[data-free-layout][data-standard-tool] select option:focus-visible{background:#e6ebff;color:#3044cf;outline:2px solid #8a97f3;outline-offset:-2px}
  #app>main[data-free-layout][data-standard-tool] select option::checkmark{color:#5063ff}
  #app>main[data-free-layout][data-standard-tool] select option:disabled{color:#929bad;cursor:default}
 }
}