/* Cross-route finishing: small screens, touch, and WebKit. Loaded after surface styles. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px}
.site-header,.site-footer,.surface-host,.home-dashboard{min-width:0}
.header-actions,.brand{flex-shrink:0}
.surface-host :is(form,.s-panel,.s-field-pair,.s-preview,.s-stone-preview){min-width:0}
.s-field :is(input,textarea,select){max-width:100%}
.s-ledger dd,.s-register-result,.s-source p,.stone-panel p,.stone-panel blockquote{overflow-wrap:anywhere}
.s-ledger dt{flex-shrink:0;max-width:48%}
.s-ledger dd{min-width:0}
.s-source summary{max-width:100%;width:fit-content}
.s-upload input{width:100%;min-width:0}
.s-certificate-wrap{min-width:0}
.s-certificate .s-break{min-width:0}
.hp-tabs,.hp-filters,.hp-section-heading,.hp-intro-actions{min-width:0}
.hp-project dd{min-width:0;overflow-wrap:anywhere;text-align:right}
.hp-graduate-grid{scroll-padding-inline:3px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.toast{bottom:max(24px,env(safe-area-inset-bottom));overflow-wrap:anywhere}
#mobile-menu{max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
.site-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
/* Older WebKit uses the prefixed compositing operator for the animated outlines. */
@supports (-webkit-mask-composite:xor){
 .hp-graduated:before,.hp-graduated .hp-project:before,.hp-primary:before,.wallet-button:before{
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
 }
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
 .hp-graduated:before,.hp-graduated .hp-project:before,.hp-primary:before,.wallet-button:before{display:none}
}
@media(max-width:900px){
 .desktop-nav{display:none}
 .menu-button{display:flex}
 .header-actions{margin-left:auto;gap:4px}
 .site-header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));gap:12px}
 #mobile-menu{top:80px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
 .s-form-layout{grid-template-columns:minmax(0,1fr)}
 .s-preview,.s-stone-preview{max-width:520px;width:100%;justify-self:center}
 .s-preview{order:2}
}
@media(max-width:760px){
 .site-header{gap:8px}
 #mobile-menu{top:72px;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);padding-bottom:max(20px,env(safe-area-inset-bottom))}
 .home-dashboard{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
 .surface-host{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .site-footer{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
 /* Keep text controls at 16px to prevent iOS focus zoom without blocking pinch zoom. */
 .surface-host :is(input,textarea,select),.hp-search input,.hp-sort select,.yard-search input{font-size:16px}
 .s-amount input{font-size:30px}
 .hp-sort{width:136px}
 .hp-sort select{max-width:none;padding-inline:8px}
 .hp-search{flex-basis:140px}
 .hp-tabs{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
 .hp-tabs button{min-height:44px}
 .hp-intro-actions{flex-wrap:wrap;gap:8px 20px}
 .hp-text-link,.hp-quicklinks button,.hp-bottom-links button,.hp-market-details summary{min-height:44px;display:inline-flex;align-items:center}
 .hp-bottom-links{flex-wrap:wrap;gap:0 20px}
 .hp-yard-controls{max-width:100%}
 .hp-yard-controls>button:first-child{max-width:100%;font-size:15px}
 .hp-try-stone{min-height:44px}
 .home-yard-preview{height:120px}
 .footer-links{gap:2px}
 .footer-links a{min-height:44px;display:flex;align-items:center}
 .footer-bottom{flex-wrap:wrap;gap:14px}
 .footer-bottom button{min-height:44px}
 .footer-identity{min-width:0}
 .yard{height:calc(100svh - 72px);min-height:570px}
 .yard-heading{left:16px;right:16px}
 .yard h1{font-size:32px}
 .yard-plant{right:16px}
 .yard-camera{top:180px;left:16px;right:auto;max-width:calc(100% - 32px);gap:0;padding:3px}
 .yard-camera button{width:44px;height:44px}
 .yard-tools{left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));gap:10px}
 .yard-tools .button{min-height:44px}
 .yard-list-panel{left:16px;right:16px;top:240px;bottom:76px;padding:24px 18px}
 .stone-panel{left:16px;right:16px;bottom:76px;max-height:calc(100% - 248px);overscroll-behavior:contain}
 .yard-search button{min-width:44px;min-height:44px;justify-content:center}
 .yard-search{gap:8px;padding-block:2px}
 .stone-panel h2{overflow-wrap:anywhere}
 .s-certificate{margin-inline:8px}
 .s-certificate .s-ledger>div{flex-wrap:wrap;gap:4px}
 .s-certificate .s-ledger dt{max-width:100%;flex-basis:100%}
 .s-certificate .s-ledger dd{text-align:left;max-width:100%}
 .s-certificate .s-classification{max-width:100%;overflow-wrap:anywhere}
 .s-table-scroll{max-width:100%}
}
@media(max-width:380px){
 .site-header{padding-inline:10px;gap:5px}
 .brand .brand-wordmark{width:90px;height:25px}
 .brand .brand-emblem{width:32px;height:42px}
 .header-actions{gap:0}
 .wallet-button{font-size:10px;padding-inline:7px;gap:5px;min-height:44px}
 .menu-button{width:38px;padding:8px}
 .s-field-pair{grid-template-columns:minmax(0,1fr);gap:0}
 .s-steps{gap:16px;padding-left:18px;font-size:11px}
 .hp-project-grid{gap:8px}
 .hp-project-info{padding-inline:7px}
 .hp-price{font-size:17px}
 .hp-project dl>div{display:block;margin-top:7px}
 .hp-project dd{text-align:left}
 .hp-section-heading h2{font-size:20px}
 .s-certificate{padding:26px 14px}
 .yard h1{font-size:29px}
 .yard-heading>p{font-size:12px}
}
@media(hover:none){
 .hp-project-open:hover .hp-project-art>img{transform:none}
 .hp-primary:hover,.button.primary:hover,.s-primary:not(:disabled):hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .hp-graduate-grid{scroll-behavior:auto;scroll-snap-type:none}
}
@media(min-width:901px){
 #mobile-menu{display:none}
}
/* Consistent finger targets without enlarging the visual type. */
@media(max-width:900px){
 .wallet-button,.menu-button,.project-mint button,.project-settings select{min-height:44px}
 .menu-button{min-width:44px}
 .hp-action,.project-market-link,.project-chart-empty a{min-height:44px}
 .project-trade{scroll-margin-top:96px}
}
/* Keep the keyboard-only skip link clipped even during WebKit full-page scrolling. */
.skip-link:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}