/* Tablet portrait: use the full width for wishes; expose filters on demand. */
@media(min-width:701px) and (max-width:1023px){
 .demo-shell{padding:0 24px 45px}
 .demo-layout{grid-template-columns:minmax(0,1fr);gap:0}
 .demo-layout>main{min-width:0}
 .mobile-filters{display:flex;margin:0 0 18px}
 .sidebar{display:none}
 .sidebar.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:24px}
 .sidebar.open .filter-group{margin:0;min-width:0}
 .sidebar>details,.sidebar>.subnote{grid-column:1/-1}
 .sidebar .subnote{margin-top:0}
 .demo-nav{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;padding-top:22px;padding-bottom:22px}
 .demo-nav>.brand{grid-column:1;grid-row:1}
 .demo-nav>.profile-menu{grid-column:2;grid-row:1;margin-left:0}
 .demo-nav>.nav-links{grid-column:1/-1;grid-row:2;margin:0;justify-content:flex-start;gap:18px}
 .list-header{padding:28px}
 .list-title{flex-wrap:nowrap}
 .list-toolbar{align-items:flex-start;gap:12px}
 .list-display-controls{justify-content:flex-start;gap:12px 20px}
 .list-display-controls label{flex-wrap:wrap}
 .wish-grid[data-layout="large"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
 #app>header.nav{padding:24px;gap:20px;flex-wrap:nowrap}
 #app>header.nav>.nav-links{justify-content:flex-end;gap:18px;min-width:0;flex-wrap:nowrap}
 .container{padding-left:28px;padding-right:28px}
 .hero{padding-top:36px;padding-bottom:60px;gap:40px}
 .hero-art{max-width:520px;width:100%;margin-inline:auto}
 .section{padding-top:60px;padding-bottom:60px}
 .steps{gap:26px}
 .future{padding:32px;gap:32px}
 .footer{flex-wrap:wrap;gap:20px}
}
/* Keep tablet navigation grouped instead of stretching links across a second row. */
@media(min-width:701px) and (max-width:899px){
 #app>header.nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px 24px}
 #app>header.nav>.brand{grid-column:1/3;grid-row:1}
 #app>header.nav>.nav-links{display:contents}
 #app>header.nav .profile-menu{grid-column:3/5;grid-row:1;margin-left:0;justify-self:end}
 #app>header.nav .nav-links>a:not(.button){grid-row:2;justify-self:start}
 #app>header.nav .nav-links>a[href="#future"]{grid-column:2}
 #app>header.nav .nav-links>.language{grid-column:3;grid-row:2;justify-self:end}
 #app>header.nav .nav-links>.button{grid-column:4;grid-row:2;justify-self:end}
}
/* Tablet landscape: retain navigation alongside the content without squeezing it. */
@media(min-width:1024px) and (max-width:1180px){
 .demo-shell{padding-left:28px;padding-right:28px}
 .demo-layout{grid-template-columns:200px minmax(0,1fr);gap:24px}
 .list-header{padding:26px}
 .list-display-controls{gap:12px}
 .container{padding-left:32px;padding-right:32px}
 .hero{gap:36px;padding-top:45px;padding-bottom:65px}
}
@media(min-width:701px) and (max-width:1180px){
 button,.button,select.field,.profile-menu summary,.list-display-controls select{min-height:44px}
 .card-bottom button{padding:8px 0}
 dialog{max-width:min(640px,calc(100vw - 64px));max-height:88dvh}
 .modal-body{padding:26px}
 .profile-panel{max-height:70dvh}
 .event-date-row{gap:18px}
}

.suggestion-heading,.suggestion-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.suggestion-row{padding:16px 0;border-bottom:1px solid var(--line)}
.suggestion-row:last-child{border-bottom:0}
.suggestion-row>div{min-width:0;overflow-wrap:anywhere;flex:1 1 180px}
.suggestion-row p{margin:5px 0}.suggestion-row small{color:var(--muted)}
.suggestion-row button{min-height:44px}

/* A single row of complete cards; hidden cards remain in the full inbox. */
.suggestion-preview{container-type:inline-size}
.suggestion-cards{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px;margin-top:18px}
.suggestion-cards>.suggestion-card{display:none}
.suggestion-cards>.suggestion-card:first-child{display:flex}
.suggestion-cards .suggestion-card{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.suggestion-cards .suggestion-card>div{flex:initial}
.suggestion-card strong{display:block;overflow-wrap:anywhere}
.suggestion-card>button{margin-top:auto;align-self:flex-start}
.suggestion-card .suggestion-picture{height:100px;overflow:hidden;border-radius:8px;background:var(--panel)}
.suggestion-picture .art{height:100%;padding:8px}.suggestion-picture svg,.suggestion-picture img{height:100%;width:100%;object-fit:contain}
@container(min-width:29rem){.suggestion-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.suggestion-cards>.suggestion-card:nth-child(-n+2){display:flex}}
@container(min-width:44rem){.suggestion-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.suggestion-cards>.suggestion-card:nth-child(-n+3){display:flex}}
@container(min-width:59rem){.suggestion-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.suggestion-cards>.suggestion-card:nth-child(-n+4){display:flex}}

.suggestion-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.suggestion-tabs [role="tab"]{min-height:44px;padding:9px 12px;font-size:.875rem;text-align:left;white-space:normal}
.suggestion-tabs [aria-selected="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.suggestion-tabs [role="tab"] span{white-space:nowrap}

.suggestion-undo{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-top:16px;border:1px solid var(--accent);border-radius:10px;background:var(--surface);color:var(--ink);box-shadow:0 4px 20px #0002}
.suggestion-undo button{min-height:44px;flex-shrink:0}

.suggestion-compare{margin-bottom:18px}.suggestion-compare h3{margin-bottom:10px}
.suggestion-version-buttons{display:inline-flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.suggestion-version-buttons button{min-height:44px;min-width:90px;border-color:transparent;background:transparent}
.suggestion-version-buttons [aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
#suggestion-version>.art{height:230px;border-radius:12px;margin-bottom:18px}

/* Lock the page behind dialogs and the profile popup, without width jumps. */
html{scrollbar-gutter:stable}
html:has(dialog[open],.profile-menu[open]),body:has(dialog[open],.profile-menu[open]){overflow:hidden}
dialog,.profile-panel{overscroll-behavior:contain}

/* Quiet, theme-aware scrollbars for the page and nested popup content. */
*{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--muted);border:2px solid transparent;background-clip:padding-box;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background-color:var(--ink)}
*::-webkit-scrollbar-corner{background:transparent}
@media(forced-colors:active){*{scrollbar-width:auto;scrollbar-color:auto}}

.taxonomy-section{margin-top:24px}.taxonomy-section h3{margin-bottom:14px}
.taxonomy-section form{padding:16px 0;border-bottom:1px solid var(--line)}
.taxonomy-section .button-row{margin-top:10px}.taxonomy-section label{margin-bottom:10px}