/* Responsive surface contracts; loaded after shared primitives. */
@layer layout {
 html:has(#media-tab-panel){scrollbar-gutter:stable}
 .console .loop-section-card{display:flex;align-items:center;gap:var(--ui-space-2);width:100%;min-width:0;padding:0 0 var(--ui-space-1);background:transparent}
 .console .loop-section-toggle{display:flex;align-items:center;justify-content:flex-start;gap:var(--ui-space-2);flex:1;min-width:0;padding:4px;border:1px solid transparent;background:transparent;text-align:left;color:inherit}
 .console .loop-section-toggle>.ui-icon{flex:none}
 .loop-section-toggle .item-title{min-width:0;overflow-wrap:anywhere}
 .loop-section-icon{flex:none;display:flex;color:var(--ui-accent)}
 .console .loop-section-play{width:36px;height:36px;min-height:36px;flex-shrink:0;padding:8px;color:var(--ui-accent-ink);background:var(--ui-accent);border-color:var(--ui-accent)}
 .console .loop-section-play:hover{background:var(--ui-accent-hover)}
 @media(max-width:699px){.console .loop-section-play{width:44px;height:44px;min-height:44px}}
 .shell.compact-shell{grid-template-columns:62px minmax(0,1fr)}
 .shell.compact-shell.navigation-open{grid-template-columns:218px minmax(0,1fr)}
 .compact-shell .content{width:100%;max-width:1440px;margin-inline:auto;padding:24px}
 .compact-shell.console-shell .content{max-width:none;padding:12px 20px}
 .compact-topbar{height:52px;padding:0 24px}
 #navigation{background:var(--ui-surface-subtle);padding:12px 8px;min-width:0;height:100dvh;min-height:100dvh;position:sticky;top:0}
 .navigation-header{grid-template-rows:38px 44px;justify-items:start}
 .navigation-header>.icon-button{min-height:44px;height:44px;width:100%;padding:10px;justify-content:center}
 .navigation-header>.icon-button .ui-icon{width:20px;height:20px;flex:0 0 20px}
 .account-details p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
 .nav-entry{height:44px;min-height:44px;white-space:nowrap;overflow:hidden;background:transparent;border:0;justify-content:flex-start;padding:12px;gap:12px}
 .nav-entry.active{background:var(--ui-selected-bg);color:var(--ui-accent)}
 .nav-entry.nav-present{color:var(--ui-accent)}
 .nav-entry .ui-icon{width:20px;height:20px;flex-basis:20px}
 .navigation-open .nav-entry{justify-content:flex-start;padding:12px;gap:12px}
 .compact-shell:not(.navigation-open) .nav-entry{height:44px;min-height:44px;padding:12px;gap:12px}
 .nav-present.active{background:var(--ui-accent);color:var(--ui-accent-ink)}
 .heading{gap:24px;margin-bottom:32px;flex-wrap:wrap}.heading h1{font-size:1.75rem}
 .heading>.actions{margin-left:auto}.heading p{margin-bottom:0}
 .split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px}
 .shell.editor-shell{height:100dvh;min-height:0;overflow:hidden}
 .editor-shell .main{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .editor-shell .compact-topbar{flex:none;height:auto;min-height:32px}
 .editor-shell .content{max-width:none;min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden;padding:var(--ui-space-4) var(--ui-space-5)}
 .editor-shell #navigation{overflow-y:auto;overscroll-behavior:contain}
 .presentation-editor{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;gap:var(--ui-space-4)}
 .editor-page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-4);flex:none}
 .editor-page-header>div:first-child{min-width:0}.editor-page-header h1{margin:0 0 var(--ui-space-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.5rem}
 .editor-page-header>.actions{flex-shrink:0}.editor-tabs{display:none}
 .editor-title-row{display:flex;align-items:center;gap:var(--ui-space-2)}.editor-title-row h1{min-width:0;margin:0;line-height:1.4;padding-block:var(--ui-space-1)}.editor-title-row .icon-button{flex:none;align-self:center;display:grid;place-items:center}
 .editor-presentation-date{display:block}.editor-presentation-notes{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.875rem;max-height:min(4.2em,12dvh);overflow:auto;margin:var(--ui-space-1) 0 0;overscroll-behavior:contain}
 .editor-columns{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--ui-space-4);flex:1;min-height:0}
 .editor-column{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;container-type:inline-size;border:1px solid var(--ui-border);border-radius:var(--ui-radius-panel);background:var(--ui-surface)}
 .editor-column-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex:none;padding:var(--ui-space-4);border-bottom:1px solid var(--ui-border);flex-wrap:wrap}
 .editor-column-heading h2{margin:0;font-size:1.25rem;overflow-wrap:anywhere}.editor-preview-heading>div{min-width:0;flex:1}.editor-preview-heading h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.editor-preview-heading .stage-title{margin-bottom:var(--ui-space-1)}
 .editor-scroll{min-height:0;min-width:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:var(--ui-space-4);scroll-padding:var(--ui-space-4)}
 .editor-scroll>.slides{margin-bottom:var(--ui-space-1)}.editor-scroll .stage,.editor-scroll .muted-preview-player{width:100%;min-width:0}
 #editor-preview>[data-editor-scroll=preview]{flex:0 1 auto;max-height:62%;min-height:100px}
 #editor-preview:not(:has(.editor-slides-region))>[data-editor-scroll=preview]{flex:1;max-height:none}
 #editor-preview-stage{width:min(90%,600px);margin-inline:auto}
 .editor-slides-region{display:flex;flex-direction:column;flex:1;min-height:90px;border-top:1px solid var(--ui-border)}
 .editor-slides-region>h3{flex:none;margin:0;padding:var(--ui-space-3) var(--ui-space-4) 0}
 .editor-slides-region .slides{margin-top:0}
 .editor-scroll .item{gap:var(--ui-space-2);padding:var(--ui-space-2)}.editor-scroll .item .name{padding:var(--ui-space-1);min-width:0}.editor-scroll .item .item-title{white-space:normal;overflow-wrap:anywhere}
 .editor-scroll .item>.actions{gap:var(--ui-space-1);flex-wrap:nowrap}.editor-scroll .drag-handle{min-width:36px;min-height:44px;padding:6px}
 .editor-scroll .service-section{padding-right:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-1)}.editor-scroll .section-row{flex:1;min-width:0;flex-wrap:nowrap;padding-bottom:0}.editor-scroll .section-toggle{min-width:80px;min-height:44px}.editor-scroll .section-row>.icon-button{margin:0;width:44px;height:44px;padding:10px}.editor-scroll .section-edit-actions{position:static;padding:0;display:flex;align-items:center;gap:var(--ui-space-1);flex:none;margin-left:auto}.editor-scroll .section-edit-actions .icon-button{width:44px;height:44px;padding:10px;color:var(--ui-text)}.editor-scroll .section-edit-actions [data-action=remove-section]{color:var(--ui-danger-text)}
 .editor-scroll .icon-button{width:44px;height:44px;min-height:44px}
 .editor-scroll .section-toggle>span:not(.loop-section-icon){min-width:0;overflow-wrap:anywhere}
 .editor-scroll .section-toggle>.ui-icon{flex:none}
 .editor-undo{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-2);padding:var(--ui-space-3) var(--ui-space-4);border-top:1px solid var(--ui-border);flex-wrap:wrap}.editor-undo>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
 @container(max-width:480px){.editor-scroll .item{display:grid;grid-template-columns:36px 48px minmax(0,1fr)}.editor-scroll .item-leading{padding:0}.editor-scroll .item-leading{--ui-thumbnail-width:48px;--ui-thumbnail-height:32px}.editor-scroll .item>.actions{grid-column:2/4;justify-content:flex-end}.editor-scroll .item .name{grid-column:3}.editor-scroll .service-section>.section-row{flex-basis:100%}}
 @media(max-width:1099px){
  .editor-tabs{display:flex;flex:none;margin:0}.editor-columns{grid-template-columns:minmax(0,1fr)}
  .presentation-editor[data-tab=content] #editor-preview,.presentation-editor[data-tab=preview] #editor-content{display:none}
 }
 @media(max-width:699px){
  .editor-shell .content{padding:var(--ui-space-2)}.presentation-editor{gap:var(--ui-space-2)}.editor-page-header{flex-wrap:wrap;gap:var(--ui-space-2)}.editor-page-header>div:first-child{width:100%}.editor-page-header h1{font-size:1.125rem}.editor-page-header>.actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:var(--ui-space-2)}.editor-page-header .actions button{padding:var(--ui-space-2);font-size:.875rem;min-width:0}
  .editor-column-heading,.editor-scroll{padding:var(--ui-space-3)}.editor-column-heading{gap:var(--ui-space-2)}.editor-column-heading>.actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.editor-column-heading .small{min-height:44px;padding:var(--ui-space-2);font-size:.875rem}
  .editor-scroll .slides.lyric-list{padding-left:0}.editor-scroll .lyric-row .slide-label{position:static;width:auto;max-width:none;text-align:left;margin-bottom:var(--ui-space-2)}
 }
 @media(max-height:500px){.editor-page-header .muted{display:none}.editor-shell .compact-topbar:has(.save[hidden]):not(.network-warning-visible){min-height:0}.editor-column-heading{padding-block:var(--ui-space-2)}.editor-page-header h1{font-size:1rem}.presentation-editor{gap:var(--ui-space-2)}}
 .field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .library-list .card{padding:16px 4px;gap:12px;align-items:center;min-width:0}
 .library-list .card h2{min-width:120px;font-size:1rem;overflow-wrap:anywhere}
 .song-library-identity{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;flex:1;min-width:0}
 .library-list .card .song-library-identity h2{flex:0 1 auto;min-width:0;flex-basis:auto}
 .song-library-identity p{min-width:0;overflow-wrap:anywhere}
 .library-list .card p{font-size:.875rem}.library-list .card>.actions{margin-top:0;gap:8px}
 .library-list .media-thumb{width:64px;height:42px}
 .next-service{padding:32px;gap:24px}.next-service h2{font-size:clamp(2.25rem,3.4vw,3rem);overflow-wrap:anywhere}
 .service-row{grid-template-columns:minmax(0,1fr) auto;gap:24px}
 .picker-actions .service-start{min-height:44px;font-size:.875rem}.picker-actions.featured .service-start{min-height:64px;font-size:1rem}
 .picker-icon-actions .icon-button{width:100%;min-height:36px;height:36px;padding:8px}
 .settings-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px}
 .settings-card{padding:24px}.settings-note{font-size:.875rem}
 .song-editor-dialog .dialog-frame{height:calc(100dvh - 34px)}
 .song-editor-dialog .dialog-body{flex:1}
 .song-editor-dialog .song-editor-layout{height:100%;min-height:0}
 .song-editor-fields{display:flex;flex-direction:column;min-height:min-content;min-width:0}
 .song-editor-fields>:not(textarea){flex-shrink:0}
 .song-editor-dialog .song-lyrics-input{flex:1;min-height:120px;resize:none}
 .song-editor-dialog .song-output-preview{display:flex;flex-direction:column;min-height:0;overflow:auto;width:min(100%,720px,calc(40dvh * 16 / 9));margin-inline:auto}
 .song-editor-dialog .song-output-preview #song-preview-stage{width:100%;flex:none}
 .song-editor-dialog .song-output-preview>.stage-title{flex:none}
 .song-editor-dialog .song-preview-list{flex:1;min-height:100px;max-height:none}
 .song-editor-dialog .song-label-tools{gap:8px}.song-label-tools .section-chip{min-height:36px;padding:6px 10px}
 .console.three-panel,.compact-shell .console.three-panel{grid-template-columns:minmax(210px,.65fr) minmax(0,1fr) minmax(0,1fr);gap:12px;overflow:visible}
 .console-panel{min-width:0}.console .panel-toolbar{min-height:44px;flex-wrap:wrap;gap:8px}
 .console .panel-content-title{font-size:.875rem}.console .stage-title{font-size:.75rem}
 .console .item{min-height:64px;padding:8px 12px 8px 10px}.console .item .name{font-size:.875rem;min-width:0}
 .console .item .name .muted{font-size:.75rem}.console .item-leading{--ui-thumbnail-width:48px;--ui-thumbnail-height:32px;min-height:36px;padding:0;border:0;background:transparent}
 .console .console-heading{flex:none;min-height:56px;margin:-12px -12px 12px;padding:8px 12px;background:var(--ui-control);border:0;border-radius:0;width:auto;max-width:none;gap:8px}
 .console-heading-label{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;font-size:.75rem;line-height:1.4;font-weight:700;letter-spacing:.12em;color:var(--ui-stage-heading)}
 .console-heading-label.live-dot{color:var(--ui-live)}
 .console-heading-label .ui-icon{width:18px;height:18px}
 .console .service-bar{flex-wrap:nowrap;justify-content:flex-start}
 .console .service-bar-selection{flex:0 1 auto;margin-left:auto;min-width:0;justify-content:flex-end;text-align:right;background:transparent;border-color:transparent;padding:4px;min-height:36px;font-size:.75rem;letter-spacing:normal}
 .console :is(.service-bar-selection,.loop-section-toggle,.section-toggle){min-height:36px;padding:4px;border:1px solid transparent;border-radius:var(--ui-radius-control)}
 .console :is(.service-bar-selection,.loop-section-toggle,.section-toggle):hover{background:var(--ui-surface-hover)}
 @media(max-width:699px){.console :is(.service-bar-selection,.loop-section-toggle,.section-toggle){min-height:44px}}
 .console .service-bar-selection span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .console .service-bar>.icon-button{flex:none;width:36px;height:36px;min-height:36px;padding:8px}
 .console .slide-scroll{padding:4px;scroll-padding:8px}
 @media(min-width:1100px) and (max-width:1599px),(max-width:699px){
  .console .service-bar{flex-wrap:wrap}
  .console .service-bar>.console-heading-label{flex-basis:100%}
  .console .service-bar-selection{max-width:calc(100% - 88px);margin-left:0;margin-right:auto;order:1;text-align:left;justify-content:flex-start}
  .console .service-bar>.icon-button{order:2}
 }
 .console .slides.lyric-list{display:flex;flex-direction:column;padding-left:116px}.console .lyric-row{display:block;padding:12px}
 .console .lyric-row .slide-label{top:12px;max-width:92px}.console .lyric-text{font-size:.875rem}
 .live-dot{color:var(--ui-live)}.output-start-bar{min-height:44px;padding:6px 12px;font-size:.875rem;gap:12px;flex-wrap:wrap}
 .console-shell .compact-topbar:not(.network-warning-visible):not(:has(.output-start-bar)):has(#save-status[hidden]){display:none}
 .compact-topbar:has(.output-start-bar){height:auto;min-height:52px;padding-block:calc(var(--ui-space-5) / 2) 0}
 .compact-shell.console-shell .compact-topbar:has(.output-start-bar)+.content{padding-top:calc(var(--ui-space-5) / 2)}
 @media(max-width:699px){.compact-topbar:has(.output-start-bar){padding-top:var(--ui-space-3)}.compact-shell.console-shell .compact-topbar:has(.output-start-bar)+.content{padding-top:var(--ui-space-3)}}
 .schedule-ready{flex-wrap:wrap;min-height:44px;font-size:.875rem}.schedule-ready .small{margin-left:0}
 .storage-meter,.storage-control{border-radius:12px;background:var(--ui-surface-subtle);padding:16px}
 .storage-meter-copy strong,.storage-meter-copy span{font-size:.875rem}
 .members-dialog .library-list .card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.members-dialog .library-list .card strong{overflow-wrap:anywhere}.members-dialog .library-list .card select{grid-column:1}
 .admin-main{max-width:1440px;padding:32px 24px 64px}.admin-header{background:var(--ui-surface-subtle)}
 .page-heading h1{font-size:1.75rem}.workspace-row{display:grid;min-width:0;border-radius:0;text-align:left;font-weight:400;background:transparent;justify-content:initial}
 .workspace-row:hover{background:var(--ui-surface-hover)}.workspace-name strong{font-size:1rem}.workspace-name span,.table-head{font-size:.75rem}
 .detail-header h2{font-size:1.25rem}.detail-header .eyebrow{margin-bottom:8px}
 .member-row{grid-template-columns:minmax(0,1fr) 170px auto}.member-row select{font-size:.875rem}
 .support-action p,.detail-header p{font-size:.875rem}
 @media(max-width:1099px){
  .split,.settings-layout{grid-template-columns:1fr}
  .console-shell{height:auto;min-height:100dvh;overflow:visible}
  .console-shell .main{height:auto;display:block;overflow:visible}
  .console-shell .content:has(.three-panel){display:block;overflow:visible}
  .console.three-panel,.compact-shell .console.three-panel{display:grid;grid-template-columns:1fr}
  .console-shell .console-panel{min-height:0;height:auto;max-height:none;margin-bottom:12px}
  .console-shell .schedule-scroll{max-height:360px;flex:auto}
  .console-shell .slide-scroll{max-height:400px;min-height:120px;flex:auto}
  .song-editor-dialog .song-editor-layout{grid-template-columns:1fr}
  .song-editor-dialog .song-editor-layout{height:auto}
  .song-editor-fields{height:calc(100dvh - 210px)}
  .song-editor-dialog .song-output-preview{overflow:visible}
  .table-head{display:none}.workspace-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.workspace-row>*{grid-column:1}.workspace-row .row-arrow{grid-column:2;grid-row:1/6}
  .workspace-row .users:before{content:'Users: '}.workspace-row .storage:before{content:'Storage: '}.workspace-row .created:before{content:'Created: '}
 }
 @media(max-width:699px){
  .shell.compact-shell,.shell.compact-shell.navigation-open{grid-template-columns:62px minmax(0,1fr)}
  .compact-shell.navigation-open #navigation{position:fixed;inset:0 auto 0 0;width:min(280px,calc(100vw - 32px));z-index:30}
  .navigation-backdrop{position:fixed;inset:0;background:var(--ui-backdrop);z-index:29}
  .navigation-open .main{grid-column:2}.compact-shell .content,.compact-shell.console-shell .content{padding:16px}
  .compact-topbar{padding:0 16px}.heading{align-items:stretch;gap:16px;margin-bottom:24px}.heading>.actions{margin-left:0}
  .field-grid,.next-service,.service-row{grid-template-columns:1fr}.next-service{padding:20px}.next-service h2{font-size:2.25rem}
  .picker-actions{width:100%;min-width:0}.service-row{gap:16px}
  .library-list .card>.actions{margin-left:0;width:100%}.library-list .card h2{min-width:0;flex-basis:calc(100% - 110px)}
  .search{max-width:100%}.library-list .card>.muted{white-space:normal}
  .panel,.settings-card{padding:16px}.settings-layout{gap:16px}.console .panel-toolbar .actions{flex-wrap:wrap}
  .console .slides.lyric-list,.song-preview-list{padding-left:0}
  .console .lyric-row .slide-label,.song-preview-label{position:static;display:block;text-align:left;max-width:none;margin-bottom:8px}.lyric-row::before,.song-preview-row::before{display:none}
  .song-editor-dialog .dialog-body{padding:0 16px 16px}.song-editor-dialog .dialog-frame>header{padding-inline:16px}.song-editor-dialog .footer{padding:12px 16px}
  .song-editor-dialog .song-preview-list{padding-left:0}.song-label-tools{gap:8px}.song-label-tools button{max-width:100%}
  .storage-meter-copy{display:block}.storage-meter-copy span{display:block;text-align:left;margin-top:8px}
  .admin-main{padding:24px 16px}.admin-header{padding:0 16px}.operator-copy,.admin-context{display:none}.page-heading{align-items:stretch;flex-direction:column}.toolbar{align-items:stretch;flex-direction:column;width:100%}.search-field{width:100%}
  .invite-form,.support-actions,.storage-limit-form,.preview-route{grid-template-columns:1fr}.member-row{grid-template-columns:minmax(0,1fr) auto}.member-row select{grid-column:1}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 }
}