/* Match CSS viewport space (including OS/browser scaling), without scaling the whole page. */
@media (min-width:481px) and (max-width:1440px),(min-width:481px) and (max-height:800px){
    :root{--bookmark-icon-size:48px;--bookmark-tile-width:88px;--bookmark-icon-gap:10px}
    body .site-container{padding-left:20px;padding-right:20px}
    body .app-header>.site-container{padding-top:12px;padding-bottom:6px}
    body .site-title-row{margin-bottom:8px}
    body .site-clock,body.has-wallpaper .site-clock{padding:2px 10px 6px}
    body .site-clock-time{font-size:56px}
    body .site-clock-date{font-size:12px;margin-top:4px;line-height:1.5}
    body .app-header .app-search-box{padding:3px 4px 3px 12px;border-radius:12px}
    body .app-header #searchInput{padding:5px 0;line-height:22px;font-size:14px}
    body .app-header #searchBtn{padding:6px 16px;line-height:22px;border-radius:8px}
    body .app-header #searchPlatformDisplay{padding:3px 7px;margin-right:8px}
    body .app-header .header-search-tools{margin-top:7px;gap:12px}
    body .app-header #searchPlatformTabs>button{padding:3px 8px;min-height:28px}
    body .app-header .header-search-tools .background-trigger,body .app-header #userDropdownToggle{width:32px;height:32px}
    body>main.site-container,body.has-wallpaper>main.site-container{padding-top:10px}
    body .bookmark-workspace-nav,body.dark-mode .bookmark-workspace-nav{gap:8px 12px;margin-bottom:16px}
    body.has-wallpaper .bookmark-workspace-nav{padding:6px 10px}
    body .bookmark-workspace-tab{padding:6px 0;min-height:32px;font-size:12px}
    body .bookmark-workspace-switch{gap:16px}
    body .bookmark-workspace-nav .bookmark-groups-bar{padding-top:0;gap:6px}
    body #bookmarkGroupTabs{gap:4px 6px}
    body .bookmark-group{padding:5px 9px;font-size:12px;line-height:20px}
    body .bookmark-view-switch{padding:2px}
    body .bookmark-view-switch button{min-height:28px;padding:3px 7px}
    body .bookmark-workspace-nav .bookmark-add{padding:7px 12px;font-size:12px}
    body .personal-bookmark-grid{gap:10px}
    body .personal-bookmark-grid[data-layout=cards]{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
    body .personal-bookmark-grid[data-layout=cards]>.personal-bookmark{padding:10px 30px 10px 12px;border-radius:12px}
    body .personal-bookmark-grid[data-layout=cards] .bookmark-open{gap:9px}
    body .personal-bookmark-grid[data-layout=cards] .bookmark-logo{width:30px;height:30px;border-radius:9px;font-size:16px}
    body .personal-bookmark-grid[data-layout=cards] .bookmark-logo img{padding:4px}
    body .personal-bookmark-grid[data-layout=cards] .bookmark-name{font-size:13px;line-height:19px}
    body .personal-bookmark-grid[data-layout=cards] .bookmark-domain{font-size:11px;line-height:16px}
    body .personal-bookmark-grid[data-layout=cards] .bookmark-menu{top:7px;right:6px}
    body .personal-bookmark-grid[data-layout=icons]{row-gap:8px}
    body .personal-bookmark-grid[data-layout=icons]>.personal-bookmark:not(.bookmark-history-card){min-height:84px;padding:6px 4px 2px}
    body .personal-bookmark-grid[data-layout=icons] .bookmark-logo{border-radius:14px}
    body .personal-bookmark-grid[data-layout=icons] .bookmark-logo img{padding:6px}
    body .personal-bookmark-grid[data-layout=icons] .bookmark-name{font-size:12px;line-height:18px;height:18px}
    body .personal-bookmark-grid[data-layout=icons] .bookmark-open{gap:5px}
    body .bookmark-recent-row{margin-top:18px;gap:10px;font-size:11px}
    body #personalRecent{gap:12px}
    body main .page-layout.bookmark-discovery-layout{grid-template-columns:160px minmax(0,1fr);gap:16px}
    body .bookmark-discovery-layout .sidebar-primary>.sticky{padding:12px 8px}
    body .bookmark-discovery-layout #sidebarNav .category-item{padding:8px 7px}
    body .bookmark-discovery-layout #sidebarNav .category-item>div:first-child{width:28px;height:28px;margin-right:8px}
    body .bookmark-discovery-layout #websiteGrid,body #siteSearchGrid{gap:10px}
    body .bookmark-discovery-card,body #siteSearchGrid>article{padding:12px;border-radius:12px}
    body .bookmark-discovery-card .bookmark-logo{width:30px;height:30px;border-radius:9px}
    body .bookmark-discovery-card .bookmark-open{gap:9px}
    body .bookmark-discovery-description,body #siteSearchGrid>article>p{font-size:12px;line-height:20px;margin:8px 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
    body .bookmark-discovery-layout .bookmark-save{padding:6px 9px;min-height:32px;font-size:12px}
    body #categoryBrowse>div:nth-child(2){padding:6px;margin-bottom:12px}
    body #subcategoryNav>button{font-size:12px;padding:6px 9px}
    body .bookmark-modal-content{--dialog-width:400px;padding:16px 18px}
    body .bookmark-import-dialog{--dialog-width:420px}
    body .feedback-dialog{--dialog-width:360px}
    body .modal-content{--dialog-width:420px}
    body .popup-content{--dialog-width:360px}
    body #createGroupForm{padding:8px;gap:6px;margin-bottom:14px}
    body #createGroupForm input{width:200px;flex-basis:180px}
    body #backgroundModal .background-dialog{--dialog-width:400px;padding:14px 16px 12px}
    body #bookmarkModal .bookmark-modal-content{max-width:min(360px,calc(100vw - 32px));padding:14px 16px 10px}
    body #bookmarkModal .bookmark-modal-header{min-height:28px;margin-bottom:5px}
    body #sortCategoriesModal .modal-content{max-width:min(420px,calc(100vw - 32px));padding:16px}
    body .bookmark-modal-header h2{font-size:17px}
    body #bookmarkModal .bookmark-modal-header h2{font-size:16px}
    body .bookmark-modal-header{margin-bottom:8px}
    body .bookmark-modal-content label,body #bookmarkForm label{font-size:12px;margin:9px 0}
    body #bookmarkForm label{margin:7px 0}
    body .bookmark-modal-content :is(input:not([type=range]),select,textarea),body #bookmarkForm :is(input,select){font-size:14px;padding:8px 10px;min-height:36px;margin-top:5px}
    body #backgroundModal .background-preset-swatch{height:30px}
    body #backgroundModal .background-preview{height:58px}
    body #backgroundModal .background-control{margin:8px 0}
    body #backgroundModal .background-help{font-size:11px;line-height:1.6;margin-bottom:8px}
    body #backgroundModal .bookmark-form-actions{margin-top:8px;padding-top:8px}
    body .bookmark-form-actions,body #feedbackForm .bookmark-form-actions{margin-top:12px}
    body #bookmarkForm .bookmark-form-actions{padding-top:8px;margin-top:10px}
    body .bookmark-menu-content{font-size:12px;padding:4px}
    body .bookmark-menu-content button{padding:5px 10px;line-height:18px;border-radius:7px}
    body .bookmark-menu-content :is(button,select){min-height:30px;font-size:12px}
    body .bookmark-menu-content .bookmark-move{padding:6px 10px;font-size:11px;line-height:18px}
    body .bookmark-menu-content .bookmark-move select{margin-top:4px;padding:5px 8px;border-radius:7px}
}
/* Very short notebook windows need less header space, including at high display scaling. */
@media (min-width:481px) and (max-height:620px){
    body .app-header>.site-container{padding-top:6px}
    body .site-clock-time{font-size:46px}
    body .site-clock-date{margin-top:2px}
    body .site-title-row{margin-bottom:4px}
    body .bookmark-workspace-nav,body.dark-mode .bookmark-workspace-nav{margin-bottom:12px}
}
@media (min-width:481px) and (max-width:760px){
    body main .page-layout.bookmark-discovery-layout{grid-template-columns:minmax(0,1fr)}
    body .personal-bookmark-grid[data-layout=cards]{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
}
/* Smaller visuals do not mean smaller touch targets or zooming input text on tablets. */
@media (pointer:coarse) and (min-width:481px) and (max-width:1440px),(pointer:coarse) and (min-width:481px) and (max-height:800px){
    body .app-header #searchInput,body .bookmark-modal-content :is(input:not([type=range]),select,textarea),body #bookmarkForm :is(input,select){font-size:16px}
    body .app-header #searchBtn,body .app-header .header-search-tools .background-trigger,body .app-header #userDropdownToggle,body .bookmark-workspace-nav .bookmark-add,body .bookmark-view-switch button,body #subcategoryNav>button,body .bookmark-discovery-layout .bookmark-save{min-height:44px}
    body .app-header .header-search-tools .background-trigger,body .app-header #userDropdownToggle{width:44px;height:44px}
    body .personal-bookmark-grid[data-layout=icons]>.personal-bookmark:not(.bookmark-history-card){padding-top:22px;min-height:100px}
    body .personal-bookmark-grid[data-layout=cards]>.personal-bookmark:not(.bookmark-history-card){padding-right:44px}
    body .personal-bookmark-grid[data-layout=cards]>.bookmark-draggable{padding-left:46px}
    body .personal-bookmark-grid[data-layout=cards] .bookmark-menu{right:0;top:5px}
    body .personal-bookmark-grid[data-layout=cards]{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
    body .bookmark-menu-content :is(button,select),body .bookmark-modal-content :is(button,input:not([type=range]),select){min-height:44px}
    body .bookmark-menu-content select{font-size:16px}
}