/* Compact demonstrations for wide, shorter screens with a mouse/trackpad.
   Artwork keeps its original proportions; controls and copy are never clipped. */
@media (min-width:981px) and (max-height:1000px) and (pointer:fine) {
  .ar-home { padding:26px 24px 20px; }
  .ar-home .ah-header { margin-bottom:14px; }
  .ar-home .ah-brand { margin-bottom:8px; }
  .ar-home .ah-header h2 { font-size:32px; margin-bottom:8px; }
  .ar-home .ah-subtitle { font-size:14px; }
  .ar-home .ah-layout { max-width:1220px; grid-template-columns:minmax(0,1fr) 310px; gap:18px; align-items:start; }
  .ar-home .ah-scene { width:min(100%,max(360px,calc(133.333svh - 440px))); margin-inline:auto; }
  .ar-home .ah-panel { padding:16px; }
  .ar-home .ah-panel-intro { margin-bottom:12px; line-height:1.45; }
  .ar-home .ah-routines { gap:6px; margin-bottom:10px; }
  .ar-home .ah-routines button { min-height:40px; padding:8px 5px; }
  .ar-home .ah-play { min-height:58px; padding:11px 12px; }
  .ar-home .ah-actions { margin:8px 0 10px; gap:6px; }
  .ar-home .ah-status-title { margin:12px 0 7px; }
  .ar-home .ah-status>div { min-height:34px; padding:5px 0; }
  .ar-home .ah-confirmations { margin:8px 0; gap:8px; }
  .ar-home .ah-confirmations .ah-heat-callout,
  .ar-home .ah-confirmations .ah-alarm-confirmation,
  .ar-home .ah-confirmations .ah-lock-callout { flex:1 1 0; width:auto; min-width:0; padding:9px 10px; }
  .ar-home .ah-scene-callouts.is-paired>div { grid-template-rows:auto auto 1fr; }
  .ar-home .ah-scene-callouts.is-whole-home .ah-heat-callout strong,
  .ar-home .ah-scene-callouts.is-whole-home .ah-alarm-confirmation strong { font-size:18px; }
  .ar-home .ah-lock-graphic { width:25px; height:30px; }
  .ar-home .ah-lock-callout { gap:7px; }
  .ar-home .ah-lock-title { font-size:14px; }
  .ar-home .ah-story { margin:8px 0; min-height:0; padding:12px 15px; }
  .ar-home .ah-stage-number { margin-bottom:5px; }
  .ar-home .ah-story p { font-size:13px; line-height:1.5; }
  .ar-home .ah-holiday-time { padding-bottom:6px; margin-bottom:6px; }
  .ar-home .ah-holiday-clock { font-size:16px; }
  .ar-home .ah-bottom { max-width:1220px; padding-top:4px; }
  .ar-home .ah-water-notice { margin:8px 0; padding:12px 15px; }

  .ar-lighting-tools .al-layout,.at-layout { max-width:1220px; margin-inline:auto; }
  .ar-lighting-tools .al-room-art,
  .ar-lighting-tools .as-room-art,
  .ar-heating-tools .at-house { height:auto; width:min(100%,max(360px,calc(133.333svh - 480px))); margin-inline:auto; }
  .ar-lighting-tools .al-controls,.ar-heating-tools .at-controls { padding:16px; }
  .ar-lighting-tools .al-controls h3 { margin-bottom:14px; }
  .ar-lighting-tools .al-control { margin-bottom:15px; }
  .ar-lighting-tools .al-control-title { margin-bottom:8px; }
  .ar-lighting-tools .al-mode-note { margin-top:12px; padding-top:10px; }
  .ar-lighting-tools .al-visual-top,.ar-lighting-tools .al-visual-bottom { padding:10px 14px; }
  .ar-lighting-tools .al-scenes { margin-top:12px; }
  .ar-lighting-tools .as-caption { margin-top:12px; padding:12px 16px; }
  .ar-heating-tools .at-room-control { margin-bottom:12px; }
  .ar-heating-tools .at-control-help { min-height:0; margin:10px 0 14px; }
  .ar-heating-tools .at-caption { min-height:0; padding:12px 16px; }
  .ar-heating-tools .atr-playback { margin-top:12px; padding:12px 16px; }
  .ar-heating-tools .atr-controls { margin:10px 0; }
  .ar-heating-tools .at-visual-bar { padding:10px 15px; }

  .smart-day { padding-block:36px; padding-inline:24px; }
  .smart-day .day-shell { display:grid; grid-template-columns:minmax(0,1fr) 390px; max-width:1220px; margin-inline:auto; align-items:start; }
  .smart-day .day-scene { grid-column:1; grid-row:1; }
  .smart-day .day-progress { grid-column:1; grid-row:2; }
  .smart-day .day-controls { grid-column:2; grid-row:1 / 3; padding:14px 18px; border-left:1px solid #304550; }
  .smart-day .day-art-wrap { width:min(100%,max(360px,calc(133.333svh - 440px))); }
  .smart-day .day-top { padding:12px 16px; }
  .smart-day .day-clock { font-size:23px; }
  .smart-day .day-notice-slot { min-height:70px; padding-inline:12px; }
  .smart-day .day-moments { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; }
  .smart-day .day-moments button { padding:9px 4px; }
  .smart-day .day-actions { gap:7px; margin:12px 0; }
  .smart-day .day-actions button { padding:9px 11px; }
  .smart-day .day-status { grid-template-columns:1fr 1fr; margin:12px 0; }
  .smart-day .day-status>div { padding:9px 10px; }
  .smart-day .day-status>div:last-child { grid-column:1/-1; }
  .smart-day .day-status dt { margin-bottom:5px; }
  .smart-day .day-story { min-height:0; padding-top:12px; }
  .smart-day .day-story h3 { font-size:19px; }
  .smart-day .day-story p { font-size:13px; line-height:1.55; }

  .asd { padding-block:36px; }
  .asd .asd-layout { max-width:1220px; margin-inline:auto; }
  .asd:not(.axa) .ah-art { width:min(100%,max(360px,calc(133.333svh - 660px))); height:auto; margin-inline:auto; }
  .asd .asd-scene-top { padding:10px 14px; }
  .asd .asd-notice-slot { min-height:90px; padding:8px 12px; }
  .asd .asd-notice { padding:8px 11px; }
  .asd .asd-badges { padding:9px; }
  .asd .asd-status { padding:7px; }
  .asd .asd-story { padding:12px 15px; }
  .asd .asd-story h3 { font-size:18px; margin:6px 0; }
  .asd .asd-story p { min-height:0; font-size:13px; line-height:1.5; }
  .asd .asd-scene>.asd-alarm-controls { padding:12px 15px; }
  .asd .asd-entry-options { margin-top:9px; }
  .asd .asd-entry-options .asd-window-control { padding:8px; min-height:40px; }
  .asd .asd-panel { padding:16px; }

  .axa .axa-shell { display:grid; grid-template-columns:minmax(0,1fr) 380px; max-width:1220px; align-items:start; }
  .axa .axa-top { grid-column:1; grid-row:1; padding:10px 15px; }
  .axa .axa-notification { grid-column:1; grid-row:2; min-height:95px; padding:12px 16px; }
  .axa .axa-artwrap { grid-column:1; grid-row:3; width:min(100%,max(360px,calc(133.333svh - 440px))); margin-inline:auto; }
  .axa .ah-art { max-height:none; height:auto; }
  .axa .axa-controls { grid-column:2; grid-row:1 / 4; border-top:0; border-left:1px solid #304d59; padding:16px; }
  .axa .axa-scenarios { grid-template-columns:1fr; gap:7px; }
  .axa .axa-scenarios button { padding:10px 12px; }
  .axa .axa-scenarios small { margin-top:4px; }
  .axa .axa-actions { margin-top:12px; gap:8px; }
  .axa .axa-status { gap:6px; margin:12px 0; }
  .axa .axa-status span { padding:7px 9px; }
  .axa .axa-description { padding-top:12px; }
  .axa .axa-description h3 { font-size:18px; }
  .axa .axa-description p { font-size:13px; line-height:1.55; }
}