/* Shared narrow-screen layout. Desktop colours and feature behaviour stay intact. */
html{scroll-padding-block:20px}
body :is(.workspace,.main-content,#content,.page-heading>div,.card,.group,.record,.field,.connection-field){min-inline-size:0}
body :is(.record,.notice,.settings-note,.badge,.connection-field,.mention-chip,.breadcrumb,.dialog-buttons){overflow-wrap:anywhere}
body :is(input,select,textarea){max-inline-size:100%;box-sizing:border-box}
body :is(dialog,.ticket-portal dialog){max-block-size:calc(100vh - 32px);max-block-size:min(calc(100dvh - 32px),calc(var(--visible-viewport-height,100dvh) - 32px));overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:20px}
body dialog :is(input,textarea,select){scroll-margin-block:24px}
.sidebar-close,.menu-backdrop{display:none}
@media(max-width:950px){
  body{min-height:100svh}
  body .workspace{min-height:0;max-inline-size:100%;margin-left:0}
  body .icon-button{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
  body .main-content{padding:24px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left))}
  body .landing{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
  body .topbar{height:auto;min-height:64px;gap:10px;flex-wrap:wrap;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
  body .topbar .breadcrumb{flex:1;line-height:1.5;white-space:normal}
  body .topbar .header-actions{gap:8px}
  body .header-actions :is(.text-link,.theme-control select){min-height:44px;display:inline-flex;align-items:center}
  body .header-actions .theme-control select{max-width:none;width:auto;min-width:126px;font-size:16px}
  body .public-header{align-items:center;flex-wrap:wrap;gap:12px}
  body .public-header .header-actions{flex:1 1 100%;justify-content:flex-start;margin-inline-start:0;gap:8px 16px}
  body .public-header .header-actions>span{overflow-wrap:anywhere;min-width:0}
  body .page-heading{flex-wrap:wrap;align-items:flex-start;gap:14px}
  body .page-heading>div{flex:1 1 220px}
  body .page-heading h1{font-size:clamp(23px,5vw,28px)}
  body .page-heading>.button{font-size:13px;min-height:44px;max-width:100%;white-space:normal;min-width:44px}
  body :is(.button,.icon-button,.settings-tabs button,.variable-buttons button){min-height:44px;min-width:44px;white-space:normal;line-height:1.5}
  body .button{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:10px 14px}
  body :is(.text-link,summary){min-height:44px;align-content:center;box-sizing:border-box}
  body .text-link{display:inline-flex;align-items:center}
  body :is(input:not([type=checkbox]):not([type=radio]),select,textarea),body .field :is(input:not([type=checkbox]),select,textarea),body .connection-field input{font-size:16px;min-height:44px}
  body .promo-shell :is(input:not([type=checkbox]),select,textarea){font-size:16px;min-height:44px}
  body textarea{line-height:1.7;resize:vertical}
  body input:is([type=checkbox],[type=radio]){flex-shrink:0}
  body .toggle-field{gap:12px;align-items:flex-start;min-height:52px}
  body .toggle-field>span{min-width:0;overflow-wrap:anywhere}
  body :is(.card,.record){padding:18px}
  body .card h2{font-size:18px}
  body :is(.form-grid,.welcome-editor-layout,.studio-layout,.promo-columns,.promotion-editor){grid-template-columns:minmax(0,1fr)}
  body :is(.form-grid,.settings-panel){min-width:0}
  body :is(.welcome-live-preview,.studio-outline,.promo-sticky){position:static;max-width:100%;min-width:0}
  body :is(.settings-toolbar,.action-controls,.section-heading,.record-header,.record-head){flex-wrap:wrap;gap:12px}
  body .check-group label{min-height:44px;gap:10px}
  body :is(.action-controls>label,.action-controls>form){min-width:0;max-width:100%;flex:1 1 220px}
  body .settings-tabs{overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding-bottom:12px;scroll-padding-inline:8px;scrollbar-width:thin}
  body .settings-tabs button{white-space:nowrap;flex-shrink:0}
  body :is(.collection-row,.collection-row>.form-grid){min-width:0;max-width:100%}
  body .collection-row{flex-wrap:wrap}
  body .save-bar{bottom:max(8px,env(safe-area-inset-bottom));flex-wrap:wrap;gap:12px;padding:12px;max-width:100%}
  body .save-bar>div{min-width:0;flex:1 1 150px}
  body .mention-options{min-width:0;max-width:100%;max-height:240px;max-height:min(240px,40dvh);overflow:auto;overscroll-behavior:contain}
  body .mention-options button{min-height:44px;white-space:normal;overflow-wrap:anywhere}
  body :is(dialog,.ticket-portal dialog,#studio-confirm){width:calc(100% - 24px);max-width:620px;padding:20px;box-sizing:border-box;max-height:min(calc(100dvh - 24px),calc(var(--visible-viewport-height,100dvh) - 24px))}
  body .dialog-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  body .dialog-buttons>.button{flex:1 1 110px}
  body .tutorial-controls{flex-wrap:wrap;gap:16px}
  body .tutorial-controls>div{display:flex;flex-wrap:wrap;gap:10px}
  body .toast{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:none;transform:none;overflow-wrap:anywhere}
  body .site-footer,body:has(.app-shell)>.site-footer{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}
  body:has(.app-shell)>.site-footer{width:100%;margin-left:0}
  body .site-footer nav{gap:6px 18px}
  body .site-footer a{display:inline-flex;align-items:center;min-height:44px}
  body .sidebar{width:min(300px,calc(100vw - 48px));height:100vh;height:100dvh;max-height:100dvh;padding:max(20px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));z-index:60;overscroll-behavior:contain;box-shadow:none;transform:translateX(-105%)}
  body .sidebar .nav-item{min-height:44px;font-size:14px}
  body .sidebar.open{box-shadow:8px 0 32px #0003;transform:translateX(0)}
  body .sidebar-close{display:inline-flex;align-self:flex-end;align-items:center;justify-content:center;margin-bottom:10px;background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;color:var(--ink);min-height:44px;padding:8px 14px}
  body .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:50;border:0;background:#0b1119a6;width:100%;height:100%;cursor:pointer}
  body.menu-is-open{overflow:hidden}
  body .operator-console .console-tabs{display:flex;overflow:auto;flex-wrap:nowrap;gap:8px}
  body .console-tabs a{min-height:44px;white-space:nowrap;display:inline-flex;align-items:center}
  body .help-practical{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .help-find{grid-template-columns:minmax(0,1fr)}
  body .help-find>*{grid-column:1}
  body .result{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  body .result table{width:100%;min-width:400px}
  body .result :is(th,td){white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:480px){
  body .topbar>.header-actions{flex:1 1 100%;margin-left:54px;justify-content:flex-start}
  body .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body .stat-card{padding:14px;min-width:0;overflow-wrap:anywhere}
  body .stat-card strong{font-size:26px}
  body :is(.module-grid,.guild-grid){grid-template-columns:minmax(0,1fr)}
  body .record :is(dl,.result-details),body .promo-shell dl{grid-template-columns:minmax(0,1fr)}
  body :is(.record dd,.promo-shell dd){margin:0 0 10px}
  body .save-bar{position:static;margin-top:22px}
  body .save-bar .button{flex:1 1 120px}
  body .promo-actions>.button{flex:1 1 100%}
  body .promotion-server-profile{flex-wrap:wrap}
  body .promotion-server-profile>div{flex-basis:calc(100% - 80px)}
}
@media(max-height:500px) and (max-width:950px){
  body .save-bar{position:static}
  body :is(dialog,.ticket-portal dialog,#studio-confirm){padding:16px;max-height:min(calc(100dvh - 16px),calc(var(--visible-viewport-height,100dvh) - 16px))}
  body .sidebar{overflow-y:auto}
}
@media(prefers-reduced-motion:reduce){body :is(.sidebar,.menu-backdrop){transition:none;scroll-behavior:auto}}