/* The saved club layout is shared; role renderers still own their content and rights. */
html[data-app-layout] #app-screen :is(.member-dashboard-welcome,.parent-dashboard-welcome){min-height:0;border-color:var(--club-border);background:var(--club-soft-gradient)}
html[data-app-layout] #app-screen :is(.member-dashboard-welcome,.parent-dashboard-welcome)>div{min-width:0}
html[data-app-layout] #app-screen :is(.member-dashboard-welcome,.parent-dashboard-welcome) h2{overflow-wrap:anywhere}
html[data-app-layout] #app-screen :is(.member-dashboard-columns,.parent-dashboard-columns,.member-personal-stats,.parent-dashboard-stats,.member-stats-columns,.parent-children-grid)>*{min-width:0}
.layout-inherited-appearance{display:grid;gap:.25rem;margin:.65rem 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.layout-inherited-appearance strong{color:var(--club-text);font-weight:650}

html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-dashboard-columns,.parent-dashboard-columns,.member-personal-stats,.parent-dashboard-stats,.member-stats-columns,.parent-children-grid){gap:.65rem;margin-block:.7rem}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-dashboard-welcome,.parent-dashboard-welcome){padding:.85rem 1rem;margin:0}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-personal-stats,.parent-dashboard-stats) .stat-card{min-height:0;padding:.65rem .75rem;border:1px solid var(--lv-stroke,var(--club-border));background:var(--surface);box-shadow:none}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-personal-stats,.parent-dashboard-stats) .stat-card>strong{margin:.25rem 0;font-size:1.35rem;line-height:1.3;color:var(--club-text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-personal-stats,.parent-dashboard-stats) .stat-card>:is(.label,small){display:block;font-size:.74rem;line-height:1.45;overflow-wrap:anywhere}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.parent-child-card,.parent-task-row,.parent-event-row,.member-result-row,.member-quick-link){min-width:0;border-color:var(--lv-stroke,var(--club-border))}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen .parent-child-card{padding:.75rem;background:var(--surface)}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.parent-task-row,.parent-event-row){gap:.6rem;padding:.6rem}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen .member-quick-links{gap:.5rem}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-readonly-note,.parent-readonly-note){margin-block:.65rem 0;gap:.5rem;line-height:1.5}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.parent-child-detail,.member-stats-columns){min-width:0;gap:.7rem}
html[data-app-layout="compact"] #app-screen .member-result-row{padding:.55rem .65rem}
html[data-app-layout="cards"] #app-screen .parent-task-list{padding-left:.65rem;border-left:2px solid var(--club-border)}
html[data-app-layout="focus"] #app-screen .parent-child-card{background:var(--club-subtle-gradient);border-radius:1rem}

/* Four roles keep one theme. Only presentation changes for the role-specific sections. */
@media(min-width:1001px){
 html:is([data-app-layout="compact"],[data-app-layout="focus"]) #app-screen :is(.member-personal-stats,.parent-dashboard-stats){grid-template-columns:repeat(4,minmax(0,1fr))!important}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.is-hidden):not(.layout-has-order){display:grid;align-items:start;gap:.8rem;grid-template-columns:minmax(0,1fr) 17rem;grid-template-areas:"profile profile" "next numbers" "latest numbers" "children children" "quick quick" "messages messages" "rights rights"}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order)>[data-lv-role-columns]{display:contents}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area]{margin:0!important;min-width:0}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="profile"]{grid-area:profile}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="numbers"]{grid-area:numbers}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="next"]{grid-area:next}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="latest"]{grid-area:latest}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="children"]{grid-area:children}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="quick"]{grid-area:quick}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="messages"]{grid-area:messages}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="rights"]{grid-area:rights}
 html[data-app-layout="cards"] #app-screen #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="numbers"]{grid-template-columns:minmax(0,1fr)!important;gap:.5rem}
 html[data-app-layout="cards"] #app-screen .member-stats-columns{grid-template-columns:minmax(0,1fr) minmax(16rem,.6fr)}
 html[data-app-layout="cards"] #app-screen .parent-children-grid{grid-template-columns:minmax(0,1fr)}
 html[data-app-layout="cards"] #app-screen .parent-child-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,.65fr);gap:.65rem;align-items:center}
 html[data-app-layout="cards"] #app-screen .parent-child-card-stats{margin:0;padding:0;border:0}
 html[data-app-layout="cards"] #app-screen .parent-child-card-actions{grid-column:1/-1;margin:.15rem 0 0}
 html[data-app-layout="focus"] body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.is-hidden):not(.layout-has-order){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"profile profile" "numbers numbers" "next latest" "children children" "quick quick" "messages messages" "rights rights"}
 html[data-app-layout="focus"] #app-screen .parent-children-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
}
@media(max-width:1000px){
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-dashboard-columns,.parent-dashboard-columns,.member-stats-columns){grid-template-columns:minmax(0,1fr)!important}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-personal-stats,.parent-dashboard-stats){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-dashboard-welcome,.parent-dashboard-welcome){padding:.75rem}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-dashboard-welcome,.parent-dashboard-welcome)>div{gap:.6rem!important;align-items:start!important}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-dashboard-welcome,.parent-dashboard-welcome) h2{font-size:1.2rem;line-height:1.3}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-personal-stats,.parent-dashboard-stats){gap:.45rem;margin-block:.6rem!important}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.member-personal-stats,.parent-dashboard-stats) .stat-card{padding:.55rem .6rem}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen :is(.parent-children-grid,.member-quick-links){grid-template-columns:minmax(0,1fr)!important}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen .parent-task-row{align-items:start;flex-wrap:wrap}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen .parent-task-actions{width:100%;justify-content:flex-start}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen .parent-task-actions .button{min-height:44px;flex:1 1 auto}
 html[data-app-layout="cards"] #app-screen .parent-child-card{border-left:3px solid var(--club-control-border)}
 html[data-app-layout="compact"] #app-screen .member-quick-link{padding:.65rem .75rem}
 html[data-app-layout="focus"] #app-screen .member-quick-link{background:var(--club-subtle-gradient)}
}

/* Explicit role areas avoid empty grid tracks for sections that role does not have. */
@media(min-width:1001px){
 html[data-app-layout="cards"] body:not(.layout-edit-mode) #view-dashboard[data-lv-audience="parent"]:not(.is-hidden):not(.layout-has-order){grid-template-areas:"profile profile" "next numbers" "latest numbers" "children children" "quick quick" "rights rights"}
 html[data-app-layout="focus"] body:not(.layout-edit-mode) #view-dashboard[data-lv-audience="parent"]:not(.is-hidden):not(.layout-has-order){grid-template-areas:"profile profile" "numbers numbers" "next latest" "children children" "quick quick" "rights rights"}
}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen #view-dashboard[data-lv-audience] .empty-state{min-height:0;padding:.85rem}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen #view-dashboard[data-lv-audience] .empty-icon{width:2.3rem;height:2.3rem;margin:0 auto .45rem}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen .member-quick-link strong{white-space:normal;overflow-wrap:anywhere}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #modal-root .parent-child-detail{min-width:0;gap:.7rem}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #modal-root .parent-child-detail .panel{min-width:0;padding:.8rem;border-color:var(--club-border)}
html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #modal-root .parent-child-detail-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
@media(max-width:760px){
 html[data-app-layout="focus"] #app-screen .member-quick-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html[data-app-layout="focus"] #app-screen .member-quick-link{grid-template-columns:minmax(0,1fr);align-content:start;gap:.25rem;padding:.7rem}
 html[data-app-layout="focus"] #app-screen .member-quick-link>span{grid-row:auto}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #modal-root .parent-child-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:1001px){
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience="member"]:not(.is-hidden):not(.layout-has-order){--role-leading:"profile profile";--role-trailing:"quick quick"}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience="member"]:not(.is-hidden):not(.layout-has-order):has([data-lv-role-area="motivation"]){--role-leading:"profile profile" "motivation motivation"}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience="member"]:not(.is-hidden):not(.layout-has-order):has([data-lv-role-area="messages"]){--role-trailing:"quick quick" "messages messages"}
 html[data-app-layout="cards"] body:not(.layout-edit-mode) #view-dashboard[data-lv-audience="member"]:not(.is-hidden):not(.layout-has-order){grid-template-areas:var(--role-leading) "next numbers" "latest numbers" var(--role-trailing)}
 html[data-app-layout="focus"] body:not(.layout-edit-mode) #view-dashboard[data-lv-audience="member"]:not(.is-hidden):not(.layout-has-order){grid-template-areas:var(--role-leading) "numbers numbers" "next latest" var(--role-trailing)}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="motivation"]{grid-area:motivation}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) body:not(.layout-edit-mode) #view-dashboard[data-lv-audience]:not(.layout-has-order) [data-lv-role-area="extra"]{grid-column:1/-1}
}
/* Compact metric rows keep the working rail from stretching short event panels. */
@media(min-width:1001px){
 html[data-app-layout="cards"] #app-screen #view-dashboard[data-lv-audience] [data-lv-role-area="numbers"] .stat-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.55rem;row-gap:.15rem;align-items:center;padding:.55rem .65rem}
 html[data-app-layout="cards"] #app-screen #view-dashboard[data-lv-audience] [data-lv-role-area="numbers"] .stat-card>.label{grid-column:1;grid-row:1;font-size:.72rem}
 html[data-app-layout="cards"] #app-screen #view-dashboard[data-lv-audience] [data-lv-role-area="numbers"] .stat-card>small{grid-column:1;grid-row:2;font-size:.7rem}
 html[data-app-layout="cards"] #app-screen #view-dashboard[data-lv-audience] [data-lv-role-area="numbers"] .stat-card>strong{grid-column:2;grid-row:1/3;max-width:7.5rem;margin:0;font-size:1.18rem;text-align:right}
}