/* Site-wide mobile layout: no page overflow, 44px taps, readable type, usable nav */
html{max-width:100%;overflow-x:clip}
body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
.face,.result-face,.preview,.anatomy-face,.preset-face,.variation-face,.table-face,.quick span,.card .face,.collection .sample{
  overflow-wrap:anywhere;word-break:break-word;max-width:100%
}
.face-card,.card,.quick,.collection,.related,.tax-card,.use-card,.compat-card,.panel,.tool,.workbench,.preview-side,.controls-side,.result-panel,.controls,.output,.shelf,.pick,.intent-card,.collection-link,.finder-head,.generator-head{
  min-width:0!important;max-width:100%
}

.menu-toggle{
  display:none;
  width:44px;height:44px;min-width:44px;min-height:44px;
  border:1px solid #090b0f;background:transparent;color:#090b0f;
  padding:11px 9px;flex-direction:column;justify-content:space-between;
  cursor:pointer;flex:none;margin:0
}
.menu-toggle span{display:block;height:2px;width:100%;background:currentColor}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-toggle span{transform-origin:center;transition:transform .18s,opacity .18s}
.nav-links{overflow-y:auto!important;-webkit-overflow-scrolling:touch;flex:1 1 auto!important;min-height:0!important;overscroll-behavior:contain}
.nav-label{display:block;padding:10px 8px 4px;font-size:.62rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#090b0f;opacity:.72}
.site-header .nav-links a{min-height:38px!important;padding:7px 8px!important}

@media(max-width:900px){
  html{scroll-padding-top:72px}
  main,footer{margin-left:0!important;max-width:100%!important;overflow-x:hidden}
  .site-header{
    position:sticky!important;inset:auto!important;
    width:100%!important;max-width:100vw!important;height:auto!important;
    z-index:80
  }
  .skip{left:10px!important}
  .nav{
    display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
    align-items:center!important;height:auto!important;min-height:56px!important;
    width:100%!important;max-width:100%!important;padding:8px 12px!important;gap:8px!important
  }
  .brand{
    flex-direction:row!important;align-items:center!important;gap:8px!important;
    font-size:1.05rem!important;flex:0 1 auto!important;min-width:0
  }
  .brand span:last-child{writing-mode:horizontal-tb!important;transform:none!important}
  .menu-toggle{display:flex!important;margin-left:auto!important}
  .icon-btn{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    margin:0!important;align-self:center!important;flex:none
  }
  .nav-links{
    display:none!important;flex-direction:column!important;align-items:stretch!important;
    width:100%!important;order:20;margin:0!important;padding:4px 0 8px;gap:4px!important
  }
  .nav-links.is-open{display:flex!important;max-height:min(75vh,640px);overflow-y:auto!important}
  .nav-label{padding:14px 14px 6px}
  .nav-links a,.nav-links.is-open a{
    display:flex!important;width:100%!important;min-height:44px!important;
    justify-content:flex-start!important;padding:10px 14px!important;
    background:rgba(13,16,23,.08);border:0!important;text-align:left!important
  }
  .nav-links a[aria-current="page"]{background:#0d1017!important;color:#fff!important}
  .wrap{width:min(calc(100% - 24px),var(--max,1490px))!important}
  h1{
    font-size:clamp(1.7rem,8vw,2.35rem)!important;line-height:1.15!important;
    max-width:100%!important;letter-spacing:-.04em!important;overflow-wrap:break-word
  }
  .section-title,.panel-title{
    font-size:clamp(1.35rem,6.4vw,1.95rem)!important;line-height:1.18!important;max-width:100%!important
  }
  .lead,.section-intro,.hero-copy{font-size:1rem!important;max-width:100%!important}
  .eyebrow,.section-kicker,.crumbs,.hero-fact,.preview-label,.select-box label,.filter-field label,.field label,.badge,.chip:before,.tab .num{
    font-size:12px!important;letter-spacing:.06em
  }
  .masthead:after,.hero:before{display:none!important}
  .hero .wrap,.hero-grid,.hero-facts,.tool-grid,.tool-layout,.tool-shell,.workbench,.split,.trust,.saved-shelf,.shelves,.anatomy,.builder-row,.builder-output,.shortcut,.custom-grid,.toggles,.search-row,.results-bar,.generator-head,.variation-head,.controls-toolbar,.output-meta,.main-actions,.dialog-data,.dialog-actions,.collector-row{
    grid-template-columns:minmax(0,1fr)!important
  }
  .finder-head,.generator-head,.results-bar,.tool-top{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  .hero-facts{border-left:0!important;margin-top:14px}
  .hero-fact{padding:12px 0!important}
  .hero-fact b{font-size:1.15rem!important}
  .proof{max-width:none!important;border-left:0!important;display:grid!important;grid-template-columns:1fr!important}
  .search-row,.search-box input,.select,.select-box,.search-wrap{width:100%!important;max-width:100%}
  input,select,textarea,.search-box input,.search-wrap input,.field input,.field select,.field textarea,.select-box select,.filter-field select{
    font-size:16px!important;min-height:44px!important;max-width:100%
  }
  .search-box input,.search-wrap input{height:52px!important}
  .select{height:52px!important;display:block!important;border-left:1px solid var(--text,#0d1017)!important}
  .chips{
    display:flex!important;flex-wrap:wrap!important;overflow:visible!important;
    grid-auto-flow:unset!important;grid-auto-columns:unset!important
  }
  .chip{
    flex:1 1 calc(50% - 1px)!important;min-width:0!important;min-height:44px!important;
    max-width:100%;border-bottom:1px solid var(--line,#aeb4bd)
  }
  .filters{display:grid!important;grid-template-columns:1fr!important;padding:14px!important}
  .filter-head,.filter-note{grid-column:1/-1}
  .face-grid,.kaomoji-grid{grid-template-columns:1fr!important;gap:8px!important}
  .face-card:first-child,.face-card:nth-child(n){
    grid-column:auto!important;grid-row:auto!important;min-height:0!important
  }
  .face-card:first-child .face{font-size:1.55rem!important;min-height:56px!important}
  .face-card:first-child .face-label{font-size:1.05rem!important}
  .face-card{padding:14px!important}
  .favorite{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .card-actions{grid-template-columns:1fr 48px 48px!important;gap:6px!important}
  .copy-btn,.collect-btn,.details-btn,.load-more,.mode-btn,.btn,.action,.tray-action,.link-btn,.text-btn,.clear-search,.close-dialog{
    min-height:44px!important
  }
  .copy-btn,.collect-btn,.details-btn{min-height:48px!important}
  .mode-btn,.link-btn{min-width:44px;padding:10px 12px!important}
  .collection-grid,.taxonomy-grid,.related-grid,.related,.cards,.use-grid,.compat,.quick-grid,.pick-grid,.preset-grid,.variation-grid,.intent-grid,.link-grid,.anatomy{
    grid-template-columns:1fr!important
  }
  .use-card,.compat-card,.intent-card,.panel+.panel,.trust>.panel,.shelf+.shelf{border-right:0!important;border-left:0!important;border-bottom:1px solid var(--line,#aeb4bd)}
  .part{grid-template-columns:72px 1fr!important}
  .step{grid-template-columns:48px 1fr!important}
  table{min-width:0!important;width:100%!important}
  .table-wrap,div:has(>table){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-face,th,td{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}
  .meaning-table thead,.attribute-table thead{display:none}
  .meaning-table tr,.attribute-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--line,#aeb4bd)}
  .meaning-table td,.attribute-table td{display:block;padding:4px 12px!important}
  .tab-list,.control-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{min-width:max(44px,28%);min-height:48px!important;flex:1 0 auto}
  .workbench,.preview-side,.controls-side{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important}
  .preview-side{padding:18px 14px!important}
  .preview{min-height:140px!important;font-size:clamp(1.35rem,8vw,2.1rem)!important}
  .option-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .option{min-height:56px!important}
  .option small{font-size:11px!important}
  .main-actions .primary{grid-column:auto!important}
  .collector{left:8px!important;right:8px!important;bottom:8px!important;max-width:calc(100vw - 16px)}
  .collector-row{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .tray{width:100%;order:3}
  dialog{width:min(560px,calc(100% - 16px))!important;max-width:calc(100vw - 16px)}
  .footer-row{display:flex!important;flex-direction:column!important;gap:16px!important}
  .toast{max-width:calc(100% - 24px);left:50%}
  .more-filters{border-top:1px solid var(--line,#aeb4bd)}
  .filter-grid{grid-template-columns:1fr!important}
}

@media(min-width:520px) and (max-width:900px){
  .face-grid,.kaomoji-grid,.collection-grid,.cards,.related-grid,.related,.taxonomy-grid,.quick-grid,.pick-grid,.preset-grid,.variation-grid,.link-grid,.use-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
  .chip{flex-basis:calc(33.33% - 1px)!important}
  .filters{grid-template-columns:1fr 1fr!important}
  .hero-facts,.proof{grid-template-columns:repeat(3,1fr)!important}
  .filter-grid{grid-template-columns:1fr 1fr!important}
}

@media(max-width:430px){
  .wrap{width:min(calc(100% - 16px),var(--max,1490px))!important}
  .collection-grid,.cards,.related-grid,.related,.taxonomy-grid,.quick-grid,.pick-grid,.preset-grid,.variation-grid,.link-grid,.use-grid,.compat,.intent-grid{
    grid-template-columns:1fr!important
  }
  .option-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .card-actions{grid-template-columns:1fr 1fr!important}
  .details-btn{grid-column:1/-1}
}