/* All four phone layouts: reduce nested spacing, never the usable touch area.
   Desktop, data attributes, permissions and the selected club palette are unchanged. */
.mobile-filter-disclosure{display:none}
@media(max-width:760px){
 #app-screen .main-content{padding:.65rem .65rem calc(5rem + env(safe-area-inset-bottom,0px))}
 #app-screen .mobile-header{padding:.4rem .65rem}
 #app-screen .view-section{min-width:0;row-gap:.55rem}
 #app-screen .view-section :is(.panel,.staff-panel){padding:.65rem!important}
 #app-screen .view-section>.panel[style*="margin-top"],#app-screen .view-section>.grid[style*="margin-top"]{margin-top:.6rem!important}
 #app-screen .view-section :is(.panel-header,.p19-card-head){gap:.4rem;margin-bottom:.5rem}
 #app-screen .view-section .panel-header h3{font-size:.95rem;line-height:1.35}
 #app-screen .view-section>.page-hero{margin-bottom:.5rem!important;padding:0!important}
 #app-screen .view-section>.page-hero .page-hero-inner{padding:.1rem .15rem .3rem;gap:.5rem}
 #app-screen .view-section>.page-hero .hero-icon{width:1.8rem;height:1.8rem;flex:0 0 1.8rem;border-radius:.55rem}
 #app-screen .view-section>.page-hero .hero-icon svg{width:1.1rem;height:1.1rem}
 #app-screen .view-section>.page-hero h2{font-size:1.05rem;line-height:1.3}
 #app-screen .view-section>.page-hero p{font-size:.73rem;line-height:1.4;margin-top:.15rem}
 #app-screen .view-section>.page-hero .page-hero-inner:has(>.page-hero-actions){display:grid;grid-template-columns:1.8rem minmax(0,1fr) auto;align-items:start}
 #app-screen .view-section>.page-hero .page-hero-actions{grid-column:auto;width:auto;max-width:8rem;margin:0;align-self:center}
 #app-screen .view-section>.page-hero .page-hero-actions .button{width:auto;min-height:44px;max-width:100%;padding:.4rem .6rem;font-size:.73rem;line-height:1.3;white-space:normal}
 #app-screen .view-section .empty-state{min-height:0;padding:.85rem .65rem;gap:.35rem}
 #app-screen .view-section .empty-icon{width:2rem;height:2rem;margin-bottom:.2rem}
 #app-screen .view-section .empty-state strong{font-size:.85rem}
 #app-screen .view-section .empty-state p{font-size:.75rem;line-height:1.4;margin:.2rem 0}

 /* Search remains one row. Optional choices expand independently. */
 #app-screen .view-section :is(.design-filter-panel,.compact-filter-panel){gap:.3rem;margin-block:.5rem;padding:.4rem!important}
 #app-screen .view-section :is(.compact-filter-toolbar,.compact-filter-header){padding:0;margin:0;gap:.4rem}
 #app-screen .view-section .compact-filter-panel:has(>.compact-filter-header)>.compact-filter-body{padding-top:.25rem}
 #app-screen .view-section .panel:has(>.compact-filter-panel:only-child){padding:.35rem!important}
 #app-screen .view-section .panel>.compact-filter-panel:only-child{border:0;box-shadow:none;margin:0;padding:0!important}
 #app-screen #view-members .design-filter-panel .member-filter-search-line{display:grid!important;grid-template-columns:minmax(0,1fr) 44px auto;gap:.35rem!important}
 #app-screen #view-members .member-filter-search-line>.member-filter-toggle{width:44px;min-width:44px;min-height:44px;height:44px}
 #app-screen #view-members .member-filter-search-line>.input{width:100%!important;font-size:16px;padding:.45rem .6rem;min-height:44px}
 #app-screen #view-members .member-filter-search-line>[data-clear-member-filters]{padding:.4rem .5rem;min-height:44px;font-size:.72rem}
 #app-screen .view-section :is(.design-filter-panel,.compact-filter-panel,.clubwear-filter-panel) .visual-filter-grid{gap:0!important;grid-template-columns:minmax(0,1fr)!important}
 #app-screen .view-section .mobile-filter-group{padding:0!important;border:0;border-radius:0;background:transparent;box-shadow:none;min-width:0;border-bottom:1px solid var(--line)}
 #app-screen .view-section .mobile-filter-group>.mobile-filter-disclosure{display:flex;align-items:center;gap:.45rem;width:100%;min-height:44px;padding:.4rem .35rem;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left}
 #app-screen .mobile-filter-disclosure strong{font-size:.75rem;font-weight:650;line-height:1.35}
 #app-screen .mobile-filter-summary{margin-left:auto;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.73rem;color:var(--club-text)}
 #app-screen .mobile-filter-arrow{flex:none;font-size:1rem;color:var(--muted)}
 #app-screen .mobile-filter-group.is-mobile-expanded>.mobile-filter-disclosure .mobile-filter-arrow{rotate:180deg}
 #app-screen .mobile-filter-disclosure:disabled{opacity:1;color:var(--muted);cursor:default}
 #app-screen .mobile-filter-disclosure:focus-visible{outline:2px solid var(--club-control-border);outline-offset:-2px;border-radius:.35rem}
 #app-screen .view-section .mobile-filter-group>.visual-filter-label{display:none!important}
 #app-screen .view-section .mobile-filter-group:not(.is-mobile-expanded)>:not(.mobile-filter-disclosure){display:none!important}
 #app-screen .view-section .mobile-filter-group>.member-filter-row{gap:.3rem;margin:0;padding:.2rem .25rem .45rem;flex-wrap:wrap}
 #app-screen .view-section .mobile-filter-group>.member-filter-row .filter-chip{min-height:44px;padding:.4rem .65rem;font-size:.74rem}
 #app-screen .view-section .mobile-filter-group>small{padding:0 .35rem .45rem;font-size:.7rem}
 #app-screen .view-section .mobile-filter-group>.select{min-height:44px;margin-bottom:.4rem;font-size:16px}

 /* Member cards retain identity, facts, warnings, detail and the diary switch. */
 #app-screen #view-members .member-card{display:flex!important;flex-direction:column;gap:.3rem!important;padding:.65rem!important;min-height:0}
 #app-screen #view-members .member-card-top{display:grid!important;grid-template-columns:2.25rem minmax(0,1fr) auto;gap:.5rem;align-items:center}
 #app-screen #view-members .member-card-avatar{width:2.25rem;height:2.25rem;flex-basis:2.25rem;font-size:.8rem}
 #app-screen #view-members .member-card-identity h3{font-size:.88rem;line-height:1.35;margin:0}
 #app-screen #view-members :is(.member-card-group,.member-card-category){font-size:.72rem;line-height:1.35}
 #app-screen #view-members .member-card-points{width:2.4rem;min-width:2.4rem;min-height:2.4rem;height:auto;padding:.3rem}
 #app-screen #view-members .member-card-points strong{font-size:1rem;line-height:1.1}
 #app-screen #view-members .member-card-points small{font-size:.6rem}
 #app-screen #view-members .member-card-info{display:flex!important;align-items:center;flex-wrap:wrap;gap:.25rem .45rem;margin:0!important;padding:0!important;border:0;min-height:44px}
 #app-screen #view-members .member-card-status{padding:0!important;margin:0;border:0;min-height:0}
 #app-screen #view-members .member-card-basic{font-size:.72rem}
 #app-screen #view-members .member-card-open{margin-left:auto;min-height:44px;min-width:44px;padding:.4rem .25rem;font-size:.74rem}
 #app-screen #view-members .member-card-diary{margin:0!important;padding:.25rem 0 0!important;min-height:44px;gap:.4rem;flex:none;width:100%}
 #app-screen #view-members .member-card-diary-label{font-size:.72rem;gap:.35rem}
 #app-screen #view-members .member-card-diary-state{font-size:.65rem;padding:.2rem .4rem}
 #app-screen #view-members .member-list-section-title{margin-block:.6rem .4rem}

 /* Dashboard: compact facts, then all response choices on one usable row. */
 #app-screen #view-dashboard .staff-dashboard,#app-screen #view-dashboard .staff-dashboard-main,#app-screen #view-dashboard .staff-dashboard-aside{gap:.6rem!important}
 #app-screen #view-dashboard .staff-event-list{gap:.45rem;margin-top:.4rem}
 #app-screen #view-dashboard .staff-event-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.4rem;padding:.55rem!important;min-height:0}
 #app-screen #view-dashboard .staff-event-info{gap:.15rem}
 #app-screen #view-dashboard .staff-event-title{font-size:.9rem;line-height:1.35}
 #app-screen #view-dashboard .staff-event-info>strong{font-size:.72rem}
 #app-screen #view-dashboard .staff-event-info>small{font-size:.72rem;line-height:1.35}
 #app-screen #view-dashboard .staff-response-block{grid-column:1/-1;min-width:0;width:100%}
 #app-screen #view-dashboard .staff-response-buttons{display:flex;flex-wrap:wrap;gap:.35rem}
 #app-screen #view-dashboard .staff-response{flex:1 1 5rem;min-height:44px;padding:.35rem;font-size:.72rem}
 #app-screen #view-dashboard .staff-panel-subtitle{margin:.2rem 0 .4rem;font-size:.73rem;line-height:1.4}
 #app-screen #view-dashboard .staff-stat{min-height:0!important;padding:.5rem!important;gap:.4rem}
 #app-screen #view-dashboard .role-summary-grid>button{padding:.35rem .5rem;min-height:44px}

 /* Calendar, attendance and weekly training: remove repeated internal margins. */
 #app-screen #view-attendance .attendance-date-panel .toolbar{gap:.4rem}
 #app-screen #view-attendance .attendance-date-panel .week-strip{margin-top:.45rem!important;gap:.25rem}
 #app-screen #view-attendance .week-day{padding:.35rem .15rem;min-height:44px}
 #app-screen #view-attendance .attendance-roster-controls{padding:.5rem .6rem!important}
 #app-screen #view-attendance .attendance-member-grid{gap:.4rem}
 #app-screen #view-attendance .attendance-save-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .5rem;padding:.4rem .6rem}
 #app-screen #view-attendance .attendance-save-actions{display:contents}
 #app-screen #view-attendance .attendance-save-feedback{grid-column:1;grid-row:2;text-align:left;line-height:1.2;font-size:.65rem}
 #app-screen #view-attendance .attendance-save-actions>.button{grid-column:2;grid-row:1/3;min-height:44px;max-width:11rem;font-size:.73rem}
 #app-screen #view-calendar .calendar-filter-row{gap:.25rem!important;margin-block:.3rem .45rem}
 #app-screen #view-calendar .calendar-program-stats{margin:.4rem 0;gap:.25rem}
 #app-screen #view-calendar .calendar-program-day{padding:.55rem;margin-block:.45rem}
 #app-screen #view-calendar .calendar-program-item{padding:.5rem;min-height:44px}
 #app-screen #view-training .training-week-board{gap:.45rem!important}
 #app-screen #view-training .training-week-day{min-height:0!important;padding:.5rem!important}
 #app-screen #view-training .training-week-day-main{padding:.15rem 0!important}
 #app-screen #view-training .training-week-day-main>strong{margin:.15rem 0 .3rem;font-size:.9rem}
 #app-screen #view-training .training-week-units{padding:.25rem 0 0!important;gap:.25rem}
 #app-screen #view-training .training-week-panel>p:last-child{margin-top:.4rem;font-size:.73rem;line-height:1.4}
 #app-screen #view-training_diary :is(.td-panel,.td-readiness,.td-exercise-builder){padding:.6rem;gap:.45rem}

 /* Empty product pictures are small; real photos remain complete with contain. */
 #app-screen #view-clubwear .settings-nav.merch-nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden;gap:.3rem;margin-block:.5rem;padding:.3rem;scrollbar-width:thin}
 #app-screen #view-clubwear .merch-nav>.button{flex:0 0 auto!important;min-height:44px;width:auto;white-space:nowrap;padding:.4rem .6rem;font-size:.72rem}
 #app-screen #view-clubwear .merch-product-card:not(:has(>.product-image img)){display:grid!important;grid-template-columns:4.5rem minmax(0,1fr)!important;padding:0!important;gap:.25rem}
 #app-screen #view-clubwear .merch-product-card>.product-image:not(:has(img)){width:3.75rem!important;height:4.5rem!important;min-height:0!important;margin:.6rem 0 .4rem .6rem!important;padding:.3rem!important}
 #app-screen #view-clubwear .merch-product-card:not(:has(>.product-image img))>.product-body{padding:.6rem .65rem .4rem .2rem!important}
 #app-screen #view-clubwear .merch-product-card :is(.merch-product-controls,.product-footer,.clubwear-product-management){grid-column:1/-1}
 #app-screen #view-clubwear .merch-product-controls{padding:.6rem!important}
 #app-screen #view-clubwear .merch-product-card .product-body>h3{font-size:.95rem}
 #app-screen #view-clubwear .merch-product-pricing{margin-top:.3rem;gap:.2rem .5rem}

 /* Forms: spend space on values and touch targets instead of nested frames. */
 #modal-root .modal>.modal-head{padding:.45rem .65rem!important;gap:.5rem;min-height:3.25rem}
 #modal-root .modal>.modal-head h2{font-size:1rem;line-height:1.35}
 #modal-root .modal>.modal-head>button{min-width:44px;min-height:44px}
 #modal-root .modal>.modal-body{padding:.6rem!important}
 #modal-root .modal :is(.form-grid,.member-form-grid,.p19-form-grid){gap:.5rem!important}
 #modal-root .modal :is(.member-form-section,.training-phase,.training-config-intro,.p19-settings-card){padding:.6rem!important;margin-block:.45rem}
 #modal-root .modal .form-field{gap:.25rem;margin:0;min-width:0}
 #modal-root .modal .form-field>label{font-size:.75rem;line-height:1.35}
 #modal-root .modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),select,textarea){font-size:16px;min-height:44px;padding:.45rem .6rem}
 #modal-root .modal .modal-actions{gap:.4rem;margin-top:.5rem;padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom,0px))}
 #modal-root .modal .modal-actions .button{min-height:44px;padding:.45rem .6rem;font-size:.76rem}
 #app-screen #view-settings .p19-settings-card{padding:.65rem}
 #app-screen #view-settings .p19-form-grid{gap:.5rem!important}
 #app-screen #view-settings .p19-settings-nav{margin-block:.5rem;padding:.3rem;gap:.3rem}
 #app-screen #view-settings .p19-settings-nav .settings-tab{min-height:44px;padding:.4rem .6rem;font-size:.73rem}
}
@media(max-width:370px){
 #app-screen .view-section>.page-hero .page-hero-inner:has(>.page-hero-actions){grid-template-columns:minmax(0,1fr) auto}
 #app-screen .view-section>.page-hero .page-hero-inner:has(>.page-hero-actions)>.hero-icon{display:none}
 #app-screen .view-section>.page-hero .page-hero-actions{max-width:7.5rem}
}
@media(max-width:760px){
 /* Desktop row layouts must stretch across the phone's single column. */
 #app-screen #view-members .member-card{align-items:stretch!important}
 #app-screen #view-members :is(.member-card-top,.member-card-info){width:100%;justify-self:stretch}
 #app-screen #view-clubwear .merch-product-card:not(:has(>.product-image img))>.product-body{grid-column:2!important;grid-row:1!important;align-self:center}
}
@media(max-width:760px){
 #app-screen #view-calendar .calendar-program-day{padding:.4rem;margin-block:.4rem}
 #app-screen #view-calendar .calendar-program-day-head{margin:0;padding:.25rem 0 .35rem;gap:.5rem}
 #app-screen #view-calendar .calendar-program-day-head .eyebrow{display:none}
 #app-screen #view-calendar .calendar-program-day-head h3{margin:0;font-size:.9rem}
 #app-screen #view-calendar .calendar-agenda-list{gap:.25rem}
 #app-screen #view-calendar .calendar-program-item{min-height:44px;box-shadow:none;border-top:0;border-right:0;border-bottom:0}
 #app-screen #view-training .training-week-day:is(.is-selected,.is-selected-day){display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .5rem;align-items:center}
 #app-screen #view-training .training-week-day:is(.is-selected,.is-selected-day)>.training-week-day-top{grid-column:2;grid-row:1;min-height:44px;gap:.3rem;padding:0}
 #app-screen #view-training .training-week-day:is(.is-selected,.is-selected-day)>.training-week-day-main{grid-column:1;grid-row:1;min-height:44px}
 #app-screen #view-training .training-week-day:is(.is-selected,.is-selected-day)>.training-week-units{grid-column:1/-1;grid-row:2}
}
@media(max-width:760px){
 #app-screen #view-clubwear .merch-product-card:not(:has(>.product-image img))>.product-image{grid-row:1!important;grid-column:1!important}
 #app-screen #view-clubwear .merch-product-card:not(:has(>.product-image img))>.merch-product-controls{grid-row:2!important}
 #app-screen #view-clubwear .merch-product-card:not(:has(>.product-image img))>.clubwear-product-management{grid-row:3!important}
 #app-screen #view-more .more-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-top:.6rem!important}
 #app-screen #view-more .more-module-card{min-width:0;min-height:64px;padding:.6rem;gap:.45rem}
 #app-screen #view-more .more-module-card .hero-icon{width:1.6rem;height:1.6rem;flex:0 0 1.6rem}
 #app-screen #view-more .more-module-copy strong{font-size:.76rem;line-height:1.35;overflow-wrap:anywhere}
 #app-screen #view-more .more-module-copy>.muted{font-size:.66rem}
 #modal-root .member-detail-body .stat-card{min-height:0;padding:.5rem!important}
 #modal-root .member-detail-body .stat-card>strong{font-size:1.15rem;line-height:1.3;margin-block:.2rem}
 #modal-root .member-detail-body .stat-highlight{min-height:0;padding:.4rem .5rem}
 #modal-root .modal .modal-actions{margin-inline:0;margin-bottom:0}
}
@media(max-width:760px){
 #app-screen .mobile-filter-disclosure:disabled .mobile-filter-arrow{visibility:hidden}
 #app-screen .view-section .mobile-filter-group.is-mobile-expanded>.member-filter-row{max-height:min(16rem,35dvh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
@media(max-width:760px){
 /* Keep all four member sections reachable, even in Layout 1 at 320 px. */
 #modal-root #member-form>.member-editor-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:.2rem;margin:.4rem 0;padding:.25rem!important;overflow:visible}
 #modal-root #member-form .member-editor-tab{width:auto!important;min-width:0!important;min-height:44px;padding:.3rem .2rem;font-size:.7rem;line-height:1.35;white-space:normal;overflow-wrap:normal}
 html[data-app-layout="focus"] #modal-root #member-form .member-editor-panels{display:block;gap:0}
 html[data-app-layout="focus"] #modal-root #member-form .member-editor-panel{padding:0;border:0;background:transparent}
 #modal-root #member-form .member-photo-editor{display:grid!important;grid-template-columns:4rem minmax(0,1fr);align-items:start;gap:.55rem;justify-items:stretch;text-align:left}
 #modal-root #member-form .member-photo-preview{width:4rem!important;height:4rem!important;min-width:0;margin:0}
 #modal-root #member-form .member-photo-controls{min-width:0;width:100%;margin:0}
 #modal-root #member-form .member-photo-file{font-size:.72rem;min-height:44px;padding:.3rem}
 #modal-root #member-form .member-photo-file::file-selector-button{font:inherit;padding:.4rem .35rem}
 #modal-root #member-form .member-photo-controls .muted{font-size:.7rem;line-height:1.4}
 #modal-root #member-form .member-photo-actions{justify-content:flex-start;margin-top:.3rem}
 #modal-root .modal .modal-actions>.button{flex:1 1 0!important;min-width:0;white-space:normal;line-height:1.35}
 #modal-root #member-form>.member-form-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:.35rem}
 #modal-root #member-form>.member-form-actions>.member-form-save-hint{grid-column:1/-1;font-size:.7rem}
 #modal-root #member-form>.member-form-actions>.button{width:100%;min-width:0;max-width:none}
}
@media(max-width:760px){
 /* Match the specificity of the old variant padding rules, including their !important. */
 html[data-app-layout] #app-screen .view-section[data-lv-page]:not(.is-hidden) :is(.panel,.staff-panel){padding:.65rem!important}
 html[data-app-layout] #app-screen .view-section[data-lv-page] .compact-filter-panel.is-collapsed{padding:.3rem!important}
 #app-screen .view-section .mobile-filter-disclosure:disabled{min-height:32px;padding-block:.25rem}
}
@media(max-width:760px){
 #app-screen #view-members .member-card-points{width:auto;min-width:2.4rem;padding-inline:.4rem;font-variant-numeric:tabular-nums}
 #app-screen #view-attendance .availability-summary-list{gap:.3rem}
 #app-screen #view-attendance .availability-summary-row{min-height:44px;padding:.3rem .4rem;gap:.4rem}
 #app-screen #view-attendance .availability-summary-row>.avatar{width:1.8rem;height:1.8rem;flex:0 0 1.8rem;font-size:.7rem}
 #app-screen #view-attendance .availability-summary-row .row-main strong{font-size:.75rem;line-height:1.35}
 #app-screen #view-attendance .availability-choice{min-height:44px;padding:.3rem .45rem;font-size:.72rem}
 /* Two clear choices, then quantity and purchase on the next row. */
 #app-screen #view-clubwear .merch-product-controls:has(>.merch-choices){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
 #app-screen #view-clubwear .merch-product-controls>.merch-choices{display:contents!important}
 #app-screen #view-clubwear .merch-product-controls>.merch-choices>.form-field{grid-column:auto!important;min-width:0;gap:.25rem}
 #app-screen #view-clubwear .merch-product-controls>.merch-choices>.form-field:has([name="merch-quantity"]){max-width:5rem}
 #app-screen #view-clubwear .merch-product-controls:has(>.merch-choices)>.merch-purchase-row{grid-column:2;grid-row:2;align-self:end;display:flex;flex-wrap:wrap;gap:.2rem;margin:0;padding:0}
 #app-screen #view-clubwear .merch-purchase-row .merch-cart-button{min-height:44px;width:100%}
 #app-screen #view-clubwear .merch-purchase-row small{font-size:.7rem;line-height:1.35}
}
@media(max-width:760px){
 #app-screen #view-training .training-week-day.is-selected-day .training-day-status{flex-wrap:wrap;gap:.2rem;padding:.25rem .35rem;font-size:.65rem;white-space:normal}
 #modal-root #member-form .member-photo-controls{gap:.35rem}
 #modal-root #member-form .member-photo-controls p{margin:.1rem 0;font-size:.7rem;line-height:1.4}
 #modal-root #member-form .member-photo-editor:not(:has(.member-photo-preview img)) .member-photo-actions>[data-member-photo-clear]{display:none}
 #modal-root #member-form .member-photo-section .member-form-section-head{padding-bottom:.35rem;margin-bottom:.4rem}
}

/* Second phone pass: keep the classical cards, working list and modular panels distinct. */
@media(max-width:760px){
 /* Measure the personal bar: translated or wrapped labels can make it taller. */
 #app-screen .main-content{padding-bottom:calc(var(--mobile-nav-height,4.5rem) + .65rem)}
 #app-screen #view-attendance .attendance-save-dock.is-editable{bottom:calc(var(--mobile-nav-height,4.5rem) + .4rem)}
 html.is-keyboard-open{--mobile-nav-height:0px!important}
 /* A full native date must fit even at 320 px. */
 #app-screen #view-training .training-week-controls{display:grid;grid-template-columns:44px 88px minmax(0,1fr);gap:.25rem}
 #app-screen #view-training .training-week-controls>.button{padding:.35rem .1rem;font-size:.75rem;min-height:44px}
 #app-screen #view-training .training-week-arrows{display:flex;min-width:0}
 #app-screen #view-training .training-week-arrows>.button{width:44px;min-width:44px;min-height:44px;padding:.35rem}
 #app-screen #view-training .training-week-date{width:100%;min-width:0;padding:.25rem}
 #app-screen #view-training .training-week-date>span{display:none}
 #app-screen #view-training .training-week-date input{min-width:0;width:100%;padding:.2rem 0;font-size:16px;min-height:36px}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen #view-calendar[data-lv-page] .calendar-filter-row{grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr))}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen #view-calendar .calendar-layout-switch{grid-column:span 2;width:auto;margin:0;gap:.25rem}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen #view-calendar .calendar-layout-switch>.filter-chip{padding:.3rem .15rem;font-size:.7rem;min-height:44px}
 /* Layout 3 is a list with one identity row and a separate, reachable action row. */
 html[data-app-layout="cards"] #app-screen #view-members .member-card{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:.2rem .4rem!important;padding:.55rem .6rem!important}
 html[data-app-layout="cards"] #app-screen #view-members .member-card-top{grid-column:1/-1;grid-row:1}
 html[data-app-layout="cards"] #app-screen #view-members .member-card-info{display:contents!important}
 html[data-app-layout="cards"] #app-screen #view-members .member-card-basic{grid-column:1;grid-row:2;align-self:center}
 html[data-app-layout="cards"] #app-screen #view-members .member-card-status{grid-column:2/-1;grid-row:2;align-self:center}
 html[data-app-layout="cards"] #app-screen #view-members .member-card-open{grid-column:3;grid-row:3;margin:0;padding:.3rem .1rem}
 html[data-app-layout="cards"] #app-screen #view-members .member-card-diary{grid-column:1/3;grid-row:3;border-top:0;padding:0!important}
 /* Photos always use contain. Layout 2 pairs a thumbnail with its description;
    3 and 4 keep a larger full-width photograph without a sixteen-rem void. */
 html[data-app-layout="compact"] #app-screen #view-clubwear .merch-product-card:has(>.product-image img){display:grid!important;grid-template-columns:5.75rem minmax(0,1fr)!important;gap:.25rem;padding:0!important}
 html[data-app-layout="compact"] #app-screen #view-clubwear .merch-product-card:has(>.product-image img)>.product-image{grid-column:1!important;grid-row:1!important;width:5rem!important;height:6.5rem!important;min-height:0!important;padding:.25rem!important;margin:.6rem 0 .4rem .5rem!important}
 html[data-app-layout="compact"] #app-screen #view-clubwear .merch-product-card:has(>.product-image img)>.product-body{grid-column:2!important;grid-row:1!important;padding:.6rem .6rem .4rem .2rem!important;align-self:center}
 html:is([data-app-layout="cards"],[data-app-layout="focus"]) #app-screen #view-clubwear .merch-product-card:has(>.product-image img)>.product-image{height:clamp(9rem,42vw,11rem)!important;min-height:0!important;padding:.4rem!important}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen #view-clubwear .merch-product-card>.product-image img{object-fit:contain!important;width:100%;height:100%}
}
@media(max-width:760px){
 /* Desktop floats reverse the arrow and clip long training names on phones. */
 #app-screen #view-training .training-week-unit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem;text-align:left;white-space:normal;overflow:visible;min-height:44px;padding:.3rem .1rem}
 #app-screen #view-training .training-week-unit>span{float:none;min-width:0;overflow-wrap:anywhere}
 #app-screen #view-training .training-week-unit small{display:block;white-space:normal}
 html:is([data-app-layout="compact"],[data-app-layout="cards"],[data-app-layout="focus"]) #app-screen #view-calendar .calendar-filter-row>[data-calendar-filter="camp"]{font-size:.7rem;padding-inline:.1rem;white-space:normal}
}

/* Filtering must win over the flex/grid presentation of every member-card layout. */
html[data-app-layout] #app-screen #view-members .member-card[hidden],
html[data-app-layout] #app-screen #view-members .member-card.member-search-hidden{display:none!important}