/* Shared content, with layouts sized for desktop, tablet and phone. */
.mobile-nav-label{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.workspace,.panel,.panel-content,.preview-col,.task-info,.form-stack>*,.two-col>*,.three-col>*,.schedule-grid>*,.settings-grid>*{min-width:0}
.room-card h3,.task-info strong,.task-info p,.settings-item strong,.notice-detail{overflow-wrap:anywhere}
.preview-summary{flex-wrap:wrap;row-gap:10px}
.history-filters select{max-width:100%}
.table-wrap{position:relative;min-width:0;max-width:100%}
.room-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pair-code{gap:10px;flex-wrap:wrap}
.room-card-footer{gap:12px;flex-wrap:wrap}
.delivery-heading .panel-title{line-height:1.7}
dialog{max-height:calc(100dvh - 32px)}
.modal-heading h2{min-width:0;overflow-wrap:anywhere}
.modal-footer{flex-wrap:wrap}
.settings-item strong{min-width:0;text-align:right}
.receiver-header{gap:16px;flex-wrap:wrap}
.receiver-header .connection-status{overflow-wrap:anywhere}
.receiver-actions{flex-wrap:wrap}

@media(min-width:1200px){
  #main-content{margin-inline:auto}
  .compose-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
  .schedule-grid,.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tablets keep labelled navigation and larger touch targets. */
@media(min-width:601px) and (max-width:1199px){
  .sidebar{width:80px;padding:20px 8px}
  .sidebar .brand>span:last-child,.workspace-label,.sidebar-bottom,.nav-item .count{display:none}
  .sidebar .brand{justify-content:center;margin-bottom:24px}
  .sidebar .nav-item{flex-direction:column;justify-content:center;padding:11px 2px;gap:6px;min-height:64px}
  .sidebar .nav-label{display:block;font-size:11px;line-height:1.5;white-space:normal;text-align:center}
  .sidebar .nav-item .icon{width:21px;height:21px}
  .workspace{margin-left:80px}
  #main-content{padding:26px 24px}
  .topbar{padding-inline:24px}
  .connection-banner{left:80px}
  .button,.choice,.type-switch button{min-height:44px;font-size:13px}
  input,select,textarea{font-size:15px;min-height:44px}
  .field-label{font-size:13px}
  .playback-option .choice{font-size:14px}
  .room-shortcut strong{font-size:15px}
  .mobile-send-bar{left:80px}
  .day-check span{width:40px;height:40px;font-size:13px}
}
@media(min-width:601px) and (max-width:1023px), (min-width:601px) and (max-width:1199px) and (orientation:portrait){
  .compose-grid,.schedule-grid,.settings-grid{grid-template-columns:minmax(0,1fr)}
  .compose-grid>.preview-col{display:block;position:static}
  .preview-panel{max-width:760px;margin-inline:auto}
  .preview-guidance{display:none}
  .template-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .notice-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mobile-send-bar{display:flex;position:fixed;left:80px;right:0;bottom:0;z-index:16;align-items:center;gap:16px;padding:14px 24px max(14px,env(safe-area-inset-bottom));background:#fffffff5;border-top:1px solid var(--line);box-shadow:0 -3px 18px #26372c08}
  .mobile-target-button{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;text-align:left;background:none;border:0;padding:0}
  .mobile-target-button strong{font-size:15px;overflow-wrap:anywhere}
  .mobile-target-button span{font-size:12px;color:var(--muted)}
  .mobile-send-bar>.button{min-height:46px;font-size:14px;padding:11px 22px}
  #page:has(.mobile-send-bar)~.page-footer{padding-bottom:100px}
}
@media(min-width:1024px) and (max-width:1199px) and (orientation:landscape){
  .compose-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:20px}
  .compose-grid>.preview-col{display:block;position:sticky;top:20px}
  .schedule-grid,.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}

/* Phones use the full width and keep the main actions within reach. */
@media(max-width:600px){
  .sidebar{position:sticky;top:0;left:auto;bottom:auto;z-index:20;width:100%;height:auto;display:block;padding:12px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));border:0;border-bottom:1px solid var(--line);background:#fff}
  .sidebar .brand{justify-content:flex-start;gap:9px;margin:0 4px 9px}
  .sidebar .brand>span:last-child{display:block}
  .sidebar .brand strong{font-size:17px;line-height:1.5}
  .sidebar .brand small,.workspace-label,.sidebar-bottom{display:none}
  .sidebar .brand-symbol{width:29px;height:30px;border-radius:8px}
  .sidebar .brand-symbol .icon{width:21px;height:21px}
  .sidebar nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
  .sidebar .nav-item{min-width:0;min-height:57px;flex-direction:column;justify-content:center;gap:4px;padding:7px 2px;border-radius:7px 7px 0 0}
  .sidebar .nav-item .icon{width:19px;height:19px}
  .sidebar .nav-item .nav-label,.sidebar .nav-item .count{display:none}
  .sidebar .mobile-nav-label{display:block;font-size:11px;line-height:1.5;white-space:nowrap}
  .sidebar .nav-item:focus-visible{outline-offset:-3px}
  .workspace{margin-left:0}
  .topbar{display:none}
  #main-content{padding:22px max(14px,env(safe-area-inset-right)) 22px max(14px,env(safe-area-inset-left))}
  .page-heading{gap:12px;align-items:flex-start;margin-bottom:18px}
  .page-heading h1{font-size:24px}
  .page-heading p{font-size:12px;line-height:1.8;max-width:none}
  .heading-actions .button{min-height:44px;padding:9px 11px;font-size:12px;white-space:nowrap}
  .stats-grid{margin-bottom:18px}
  .stat-card{padding:13px 12px;min-height:91px}
  .stat-label{font-size:11px;line-height:1.6;min-height:35px}
  .stat-value{font-size:25px;margin-top:2px}
  .stat-card + .stat-card:before{top:27px}
  .target-panel,.delivery-panel{padding:17px;margin-bottom:18px}
  .target-heading h2 span{font-size:12px}
  .target-heading p{font-size:12px}
  .target-actions{gap:12px}
  .target-actions button{min-width:38px;min-height:44px;font-size:12px}
  .room-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .room-shortcut{padding:13px;min-height:110px}
  .room-shortcut strong{font-size:14px}
  .shortcut-status{font-size:12px;line-height:1.6}
  .compose-grid,.schedule-grid,.settings-grid,.template-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .compose-grid>.preview-col{display:block;position:static}
  .preview-guidance{display:none}
  .panel-header,.preview-header{padding:17px 18px}
  .panel-title{font-size:15px}
  .panel-content{padding:18px}
  .panel-meta,.field-help,.option-subtitle,.offline-message{font-size:12px;line-height:1.8}
  .field-label,.option-title,.compose-target{font-size:14px}
  .compose-target .connection-status{font-size:12px}
  input,select,textarea{font-size:16px;min-height:44px}
  .textarea-wrap textarea{font-size:16px;min-height:166px;line-height:1.85}
  .char-counter{font-size:11px}
  .two-col,.three-col{grid-template-columns:minmax(0,1fr);gap:16px}
  .button,.choice,.playback-option .choice,.type-switch button{min-height:44px;font-size:14px}
  .choice-group{gap:7px}
  .choice{padding-inline:6px}
  .chip{min-height:36px;font-size:12px;padding:5px 9px}
  .template-row .chip,.template-row>span{font-size:12px}
  .text-link{min-height:40px;display:inline-flex;align-items:center;gap:5px;font-size:12px}
  .type-switch{margin-block:18px}
  .notice-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .template-mini{aspect-ratio:1.7}
  .notice-theme-label{font-size:12px;padding-block:8px}
  .notice-theme-label small{display:none}
  .template-picker-label small{font-size:11px}
  .playback-options{padding:15px;gap:18px}
  .custom-repeat-row{flex-wrap:wrap;font-size:13px}
  .custom-repeat-row input{width:90px;font-size:16px}
  .custom-repeat-row small{font-size:11px;margin-left:5px}
  .toggle{width:44px;height:28px}
  .toggle span:after{width:18px;height:18px;left:5px;top:5px}
  .toggle input{height:44px;top:-8px}
  .toggle input:checked+span:after{transform:translateX(16px)}
  .options-row{min-height:44px}
  .send-footnote{font-size:11px}
  .compose-bottom{padding:17px 18px}
  .mobile-send-bar{left:0;right:0;gap:10px;padding:12px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .mobile-send-bar>.button{min-height:46px;padding:10px 14px;font-size:14px}
  .mobile-target-button{min-height:46px;justify-content:center}
  .mobile-target-button strong{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mobile-target-button span{font-size:11px}
  #jump-preview{padding-inline:13px}
  .target-panel,.preview-col,#schedule-form{scroll-margin-top:125px}
  .preview-summary{font-size:12px;gap:12px}
  .preview-note{font-size:12px}
  .delivery-rooms{grid-template-columns:minmax(0,1fr)}
  .delivery-room{min-height:64px;padding:13px}
  .delivery-room-name strong,.delivery-room-info{font-size:12px}
  .delivery-counts,.delivery-tools,.delivery-note{font-size:12px}
  .delivery-heading .panel-meta{font-size:11px;line-height:1.8}
  .history-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .history-filters select{min-width:0;width:100%;font-size:14px}
  .table-wrap{border:0;background:none;overflow:visible}
  .table-wrap table{display:block;white-space:normal}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .table-wrap tbody{display:grid;gap:12px}
  .table-wrap tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:10px}
  .table-wrap td{display:block;border:0;padding:0;font-size:12px;min-width:0}
  .table-wrap .notice-text-cell{grid-column:1/-1;max-width:none;overflow:visible}
  .notice-text-cell strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.8;overflow-wrap:anywhere}
  .history-room{overflow-wrap:anywhere}
  .history-time,.history-actions{text-align:right}
  .history-status{align-self:center}
  .history-status .badge{font-size:11px;white-space:normal}
  .history-actions .text-link{min-height:40px}
  .room-card{padding:20px}
  .room-card h3{font-size:18px}
  .room-card .field-help,.device-row,.connection-status{font-size:12px}
  .pair-code strong{font-size:28px;letter-spacing:4px}
  .pair-code>span{font-size:13px}
  .device-row{flex-wrap:wrap}
  .day-check span{width:36px;height:40px;font-size:13px}
  .weekdays{gap:6px}
  .task-card{padding:17px;gap:10px}
  .task-icon{display:none}
  .task-info strong{font-size:15px}
  .task-info p,.task-tools .text-link{font-size:13px}
  .task-tools{gap:15px}
  .task-tools .badge{margin-top:0;font-size:11px}
  .copy-notice{font-size:12px;align-items:flex-start;flex-wrap:wrap;gap:4px;padding-inline:18px}
  .copy-notice button{font-size:12px}
  .template-card h3{font-size:17px}
  .template-card p{font-size:14px;min-height:0}
  .template-card>.badge{font-size:11px}
  .settings-item{flex-direction:column;gap:7px;font-size:14px}
  .settings-item strong{text-align:left;font-size:13px}
  .settings-description{font-size:13px}
  dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);border-radius:12px}
  .modal-heading{padding:14px 18px}
  .modal-heading h2{font-size:18px}
  .icon-button{min-width:44px;min-height:44px}
  .modal-body{padding:18px}
  .modal-footer{padding:0 18px 18px;gap:10px}
  .modal-footer .button{flex:1;justify-content:center}
  .receipt-card>strong{font-size:14px}
  .receipt-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .receipt-step{font-size:12px}.receipt-step small{font-size:11px}
  .notice-detail{font-size:15px}
  .page-footer{font-size:11px;line-height:1.8}
  #toast{bottom:94px;font-size:13px;width:max-content;max-width:calc(100vw - 28px);line-height:1.8}
  .connection-banner{left:0;top:auto;bottom:82px;font-size:12px;padding:9px}
  .receiver-header{padding:16px 18px;gap:10px}
  .receiver-header .brand strong{font-size:18px}
  .receiver-header .receiver-tag{display:none}
  .receiver-header .connection-status{font-size:12px}
  .receiver-main{padding-inline:16px}
  .pairing-shell{grid-template-columns:minmax(0,1fr)}
  .pairing-intro{padding:23px}
  .pairing-form{padding:24px}
  .receiver-ready h1{font-size:25px}
  .receiver-ready>p,.receiver-local-note,.audio-note{font-size:13px}
  .receiver-actions{gap:10px}
  .receiver-actions .button{flex:1 1 140px}
}
@media(max-width:360px){
  .stat-card{padding-inline:9px}
  .room-shortcut{padding:11px}
  .target-panel,.delivery-panel{padding:14px}
  .panel-content{padding:16px}
  .day-check span{width:31px}
  .weekdays{gap:5px}
  .mobile-send-bar{gap:8px}
  .mobile-send-bar>.button{padding-inline:11px;font-size:13px}
  .mobile-target-button strong{font-size:13px}
}