/* Shared outer frame. Catalogs retain their rail; standalone lists use the full width. */
.top-inner,.footer,.catalog-layout,.group-tab-list,#main.container,#main.style-catalog,#main.style-detail{
 width:100%;max-width:var(--layout-max);margin-inline:auto;
 padding-inline:var(--layout-gutter);
}
.catalog-layout{grid-template-columns:var(--layout-rail) minmax(0,1fr);column-gap:var(--layout-gap)}
.catalog-page .group-tab,.catalog-page .role-item{padding-inline:var(--layout-control-inset)}
.catalog-page .sidebar-title{padding-inline:var(--layout-control-inset)}
.catalog-page .sidebar{padding-top:14px}
#main.style-catalog,#main.problems-page{--layout-content-inset:0px}
#main.container,#main.style-detail{padding-inline-start:calc(var(--layout-gutter) + var(--layout-content-inset))}
#main.style-catalog>:not(.style-filter){margin-inline-start:var(--layout-content-inset)}
.style-filter{padding-inline:0}
.style-filter-link{padding-inline:var(--layout-control-inset)}
.problem-grid.enriched{gap:20px}

/* Each page follows its own content order, with shared spacing sizes. */
.style-heading{margin-top:var(--space-6)}
.style-heading .category-title{margin:var(--space-5) 0 var(--space-4)}
#main.list-page{padding-top:92px}
#main.problems-page{padding-top:var(--space-7)}
#main.list-page>.preview-label{line-height:20px}
.style-heading h1,#main.list-page>h1{font-size:32px;line-height:1.35;font-weight:700;letter-spacing:-.03em}
.problems-page .learning-picker{margin:var(--space-6) 0;padding:var(--space-6) 0}
.problems-page .learning-task-grid{gap:20px}
.problems-page .learning-task-card{padding:var(--space-5)}
.problems-page .problem-list-heading{margin-bottom:var(--space-4)}
.problems-page .problem-grid.enriched{margin-top:0}

/* Keep familiar reading widths inside the shared frame, aligned to the grid. */
#main.detail>.detail-layout{max-width:992px}
#main.detail>:is(.detail-heading,.page-intro){max-width:992px}
#main.term-detail>.detail-layout,#main.term-detail>.detail-heading,
#main.term-detail>.term-review,#main.problem-detail>.detail-layout{max-width:var(--layout-reading)}
#main.style-detail>*{max-width:var(--layout-reading)}
#main.learning-page>.learning-layout{max-width:992px}
#main.method-detail .detail-body{max-width:760px}
#main.skill-page>.skill-layout{max-width:1024px}

@media(max-width:1100px){
 :root{--layout-gutter:24px;--layout-rail:140px;--layout-gap:20px}
 .style-grid,.problem-grid.enriched{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
 :root{--layout-content-inset:0px}
 .catalog-layout{grid-template-columns:minmax(0,1fr)}
 .catalog-page .sidebar{padding-top:0}
 #main.list-page{padding-top:32px}
}
@media(max-width:720px){
 :root{--layout-gutter:16px}
 .style-heading h1,#main.list-page>h1{font-size:26px;line-height:1.35}
 .style-heading{margin-top:var(--space-6)}
 #main.problems-page{padding-top:var(--space-6)}
 .problems-page .learning-picker{padding-block:var(--space-5)}
 .problems-page .learning-task-card{padding:20px}
 .style-grid,.problem-grid.enriched{grid-template-columns:minmax(0,1fr)}
}