/* Load after the presentation styles. Keep wide content in its own scroll area. */
@media(max-width:620px) {
 .reference-app .delivery-routes-list { flex-direction:column; max-height:320px; overflow:auto; }
 .reference-app .delivery-route { min-width:0; max-width:none; width:100%; }
}

/* The claims filter is a full-width workspace tool, not a narrow title accessory. */
html .ref-module.ref-view-support :is(.ref-folio-edition,.ref-glass-titlebar,.ref-console-titlebar,.ref-logistics-titlebar){
 display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:18px;
}
html .ref-module.ref-view-support .ref-period-controls{
 display:block;min-width:0;width:100%;max-width:100%;
}
html .ref-module.ref-view-support .support-toolbar{
 display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;
 align-items:end;gap:12px;width:100%;max-width:100%;min-width:0;margin:0;padding:14px;
 background:var(--ri-panel);border:1px solid var(--ri-line);border-radius:var(--ri-radius);box-shadow:none;
}
html .ref-module.ref-view-support .support-toolbar .field{
 display:grid;grid-template-columns:minmax(0,1fr);gap:7px;width:100%;min-width:0;max-width:100%;margin:0;
}
html .ref-module.ref-view-support .support-toolbar .field>span{
 color:var(--ri-text);font-size:14px;line-height:1.4;overflow-wrap:anywhere;
}
html .ref-module.ref-view-support .support-toolbar :is(input,select){
 width:100%;min-width:0;max-width:100%;min-height:44px;font-size:16px;
 background:var(--ri-panel);color:var(--ri-text);
}
html .ref-module.ref-view-support .support-toolbar select{text-overflow:ellipsis;}
html .ref-module.ref-view-support .support-toolbar>.button{
 min-width:0;min-height:44px;width:auto;max-width:100%;margin:0;white-space:normal;
}

/* Use available panel width instead of a fixed390px card floor. */
html .ref-module.ref-view-support .support-case-grid{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;
 width:100%;max-width:100%;min-width:0;
}
html .ref-module.ref-view-support .support-case-card{
 min-width:0;max-width:100%;margin:0;gap:14px;
}
html .ref-module.ref-view-support .support-case-head{
 display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;
}
html .ref-module.ref-view-support .support-case-head>div{flex:1 1 145px;min-width:0;}
html .ref-module.ref-view-support .support-case-head :is(h3,p){overflow-wrap:anywhere;}
html .ref-module.ref-view-support .support-status{
 flex:0 1 auto;max-width:100%;white-space:normal;overflow-wrap:anywhere;
 font-size:14px;line-height:1.4;
}
html .ref-module.ref-view-support .support-case-facts{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;
}
html .ref-module.ref-view-support .support-case-facts>span{
 min-width:0;background:var(--ri-soft);color:var(--ri-text);
}
html .ref-module.ref-view-support .support-case-facts strong{
 color:var(--ri-text);font-size:14px;line-height:1.5;overflow-wrap:anywhere;
}
html .ref-module.ref-view-support .support-case-facts :is(small,b){
 color:var(--ri-muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere;
}
html .ref-module.ref-view-support .support-case-excerpt{font-size:14px;line-height:1.6;}
html .ref-module.ref-view-support .support-case-card>footer{
 display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-color:var(--ri-line);
}
html .ref-module.ref-view-support .support-case-card>footer>span{
 flex:1 1 150px;min-width:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere;
}
html .ref-module.ref-view-support .support-case-card>footer>.button{
 flex:0 1 auto;min-height:44px;max-width:100%;
}

/* Keep every notices destination discoverable, including clients and history. */
html .ref-module.ref-view-notices .ref-module-tabs{
 display:flex;flex-wrap:wrap;gap:6px;width:100%;min-width:0;max-width:100%;overflow:visible;
}
html .ref-module.ref-view-notices .ref-module-tabs>button{
 flex:1 1 130px;min-width:0;max-width:100%;min-height:44px;padding:9px 12px;
 white-space:normal;overflow-wrap:break-word;line-height:1.4;
}

/* Delivery status filters wrap inside their panel at desktop as well as mobile. */
html .ref-module.ref-view-deliveries .delivery-stops-panel{container:ref-delivery-stops / inline-size;}
html .ref-module.ref-view-deliveries :is(.delivery-status-tabs,.delivery-filters){
 display:flex;flex-wrap:wrap;gap:7px;width:100%;min-width:0;max-width:100%;overflow:visible;
}
html .ref-module.ref-view-deliveries :is(.delivery-status-tabs,.delivery-filters)>button{
 flex:0 1 auto;width:auto;min-width:0;max-width:100%;min-height:40px;
 white-space:normal;overflow-wrap:break-word;line-height:1.4;font-size:14px;
}

@container ref-module (max-width:790px){
 html .ref-module.ref-view-support .support-toolbar{
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
 html .ref-module.ref-view-support .support-toolbar>.button{grid-column:1/-1;width:100%;}
 html .ref-module.ref-view-notices .ref-module-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
 html .ref-module.ref-view-notices .ref-module-tabs>button{width:100%;}
}
@container ref-module (max-width:520px){
 html .ref-module.ref-view-support .support-toolbar{grid-template-columns:minmax(0,1fr);padding:12px;}
 html .ref-module.ref-view-support .support-case-grid{grid-template-columns:minmax(0,1fr);}
 html .ref-module.ref-view-support .support-case-card{padding:15px;}
 html .ref-module.ref-view-support .support-case-facts{grid-template-columns:minmax(0,1fr);}
 html .ref-module.ref-view-support .support-case-card>footer>.button{flex:1 0 100%;width:100%;}
 html .ref-module.ref-view-notices .ref-module-tabs>button{padding:9px 7px;}
 html .ref-module.ref-view-deliveries :is(.delivery-status-tabs,.delivery-filters){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 }
 html .ref-module.ref-view-deliveries :is(.delivery-status-tabs,.delivery-filters)>button{width:100%;min-height:44px;}
}
@container ref-delivery-stops (max-width:440px){
 html .ref-module.ref-view-deliveries :is(.delivery-status-tabs,.delivery-filters){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 }
 html .ref-module.ref-view-deliveries :is(.delivery-status-tabs,.delivery-filters)>button{width:100%;min-height:44px;}
}

/* Long business names must shrink inside the header instead of moving actions
   outside the viewport. These rules also cover tablet split-screen windows. */
.reference-app :is(.ref-workspace,.ref-header,.ref-header-primary,.ref-header-secondary,
 .ref-header-actions,.ref-location-tools,.ref-workspace-footer){min-width:0;}
.reference-app .ref-workspace-label{flex:1 1 150px;}
.reference-app .ref-workspace-label :is(strong,small),
.reference-app .ref-workspace-footer>span{min-width:0;overflow-wrap:anywhere;}
.reference-app .ref-section-tabs{flex:1 1 auto;}
.reference-app .ref-section-tabs .ref-tab{flex:0 0 auto;}
.reference-app .ref-location-tools label{min-width:0;max-width:100%;}
.reference-app .ref-location-tools select{max-width:100%;}
.reference-app .ref-drawer-close{display:none;}
/* Navigation text must keep the same size through Safari orientation changes.
   Pinch zoom and the user's chosen browser zoom remain available. */
.reference-app :is(.ref-sidebar,.ref-mobile-nav),
html[data-design]:not([data-reference="true"]) .sidebar{
 -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
.reference-app.ref-theme-soft-glass .ref-sidebar .ref-nav-item{gap:8px;padding-inline:12px;}
.reference-app.ref-theme-soft-glass .ref-sidebar .ref-nav-item>span{
 flex:1 1 auto;overflow-wrap:normal;word-break:normal;hyphens:none;
}
.reference-app.ref-theme-soft-glass .ref-sidebar .ref-nav-item>b{flex-shrink:0;}
@media screen and (min-width:1025px){
 /* The 196px compact rail left too little room for labels plus counters. */
 .reference-app.ref-theme-soft-glass{--ref-nav:248px;}
 .reference-app.ref-theme-soft-glass .ref-sidebar{width:232px;}
}
/* The Original notices banner shares its row with explanatory copy. Its two
   actions must wrap within that half-width area on tablets and landscape. */
html[data-design="classic"] .notice-mode>.row-actions{flex-wrap:wrap;white-space:normal;max-width:100%;}
html[data-design="classic"] .notice-mode>.row-actions>.button{
 min-width:0;max-width:100%;min-height:44px;white-space:normal;overflow-wrap:break-word;
}

/* Dialogs use the visible viewport, including the phone keyboard and safe
   areas. Header, scrollable body and footer retain separate flex regions. */
html:has(body:is(.modal-open,.ui-overlay-open)),
body:is(.modal-open,.ui-overlay-open){overflow:hidden!important;overscroll-behavior:none;}
html .modal-backdrop{
 --dialog-gap:20px;
 --dialog-top:max(var(--dialog-gap),env(safe-area-inset-top,0px));
 --dialog-bottom:max(var(--dialog-gap),env(safe-area-inset-bottom,0px));
 padding:var(--dialog-top) max(var(--dialog-gap),env(safe-area-inset-right,0px))
  var(--dialog-bottom) max(var(--dialog-gap),env(safe-area-inset-left,0px));
}
html .modal{
 min-width:0;max-width:100%;
 max-height:min(820px,calc(100dvh - var(--dialog-top) - var(--dialog-bottom)));
}
html .modal :is(.modal-head,.modal-body,.modal-foot,.field,.form-grid){min-width:0;max-width:100%;}
html .modal-head>div{min-width:0;}
html .modal-head :is(h2,p){overflow-wrap:anywhere;}
html .modal-head>.button{flex-shrink:0;}
html .modal-foot{flex-wrap:wrap;}
html .modal-foot>div{min-width:0;max-width:100%;}
html .modal .button{max-width:100%;white-space:normal;overflow-wrap:break-word;}
html .modal-body :is(input,select,textarea){max-width:100%;min-width:0;}
html .modal-body :is(.table-wrap,.ref-table-scroll){max-width:100%;overflow-x:auto;}
html .modal-body .form-actions{flex-wrap:wrap;}
html .modal-body .form-actions>.button{max-width:100%;}
html .toast{z-index:1300;}

@media screen and (max-width:1366px){
 /* Accounts receivable becomes a readable card ledger on phones and tablets.
    Each value keeps its own label, so rotation never compresses the customer
    name, phone or reminder into a narrow table column. */
 html :is(.receivables-cards-wrap,.receivables-history-wrap){
  width:100%;max-width:100%;overflow:visible!important;
 }
 html :is(.receivables-table,.receivables-history-table){
  display:block;width:100%!important;min-width:0!important;table-layout:auto;
  background:transparent!important;
 }
 html :is(.receivables-table,.receivables-history-table)>thead{display:none;}
 html :is(.receivables-table,.receivables-history-table)>tbody{
  display:grid;width:100%;gap:12px;
 }
 html :is(.receivables-table,.receivables-history-table)>tbody>tr{
  display:grid!important;width:100%;min-width:0;gap:12px 16px;padding:16px;
  border:1px solid var(--ri-line,var(--theme-border,var(--line,#dce5e7)));
  border-radius:12px;background:var(--ri-panel,var(--theme-surface,var(--surface,#fff)))!important;
  box-shadow:0 5px 16px rgb(31 58 61 / 7%);
 }
 html .receivables-table>tbody>tr{
  grid-template-columns:minmax(180px,1.5fr) minmax(110px,.65fr) minmax(140px,.8fr);
  grid-template-areas:"client access balance" "client status balance" "notes notes actions";
 }
 html .receivables-history-table>tbody>tr{
  grid-template-columns:minmax(120px,.7fr) minmax(180px,1.25fr) minmax(140px,.8fr);
  grid-template-areas:"date client amount" "type reference amount" "notes notes actions";
 }
 html :is(.receivables-table,.receivables-history-table)>tbody>tr>td{
  display:block!important;min-width:0;padding:0!important;border:0!important;
  background:transparent!important;white-space:normal!important;overflow-wrap:break-word;
 }
 html :is(.receivables-table,.receivables-history-table)>tbody>tr>td::before{
  content:attr(data-label);display:block;margin:0 0 5px;color:var(--ri-muted,var(--theme-muted,var(--muted,#61787a)));
  font-size:10px;font-weight:750;line-height:1.2;letter-spacing:.065em;text-transform:uppercase;
 }
 html :is(.receivables-table,.receivables-history-table)>tbody>tr>td>strong{
  display:block;max-width:100%;font-size:14px;line-height:1.35;overflow-wrap:break-word;
 }
 html :is(.receivables-table,.receivables-history-table)>tbody>tr>td>small{
  max-width:100%;font-size:11px;line-height:1.45;overflow-wrap:break-word;
 }
 html .receivable-card-client{grid-area:client;}
 html .receivable-card-access{grid-area:access;}
 html .receivable-card-balance{grid-area:balance;}
 html .receivable-card-status{grid-area:status;}
 html .receivable-card-notes{grid-area:notes;}
 html .receivable-card-actions{grid-area:actions;}
 html .receivable-history-date{grid-area:date;}
 html .receivable-history-client{grid-area:client;}
 html .receivable-history-type{grid-area:type;}
 html .receivable-history-reference{grid-area:reference;}
 html .receivable-history-notes{grid-area:notes;}
 html .receivable-history-amount{grid-area:amount;}
 html .receivable-history-actions{grid-area:actions;}
 html :is(.receivable-card-balance,.receivable-history-amount){text-align:left!important;white-space:nowrap!important;}
 html :is(.receivable-card-actions,.receivable-history-actions) .row-actions{
  min-width:0!important;max-width:100%;align-items:stretch;justify-content:flex-start;flex-wrap:wrap;
 }
 html :is(.receivable-card-actions,.receivable-history-actions) .button{
  min-width:0;min-height:44px;white-space:normal;overflow-wrap:break-word;
 }

}

@media screen and (max-width:1024px){

 /* This breakpoint matches the navigation controller. Closed drawers must not
    remain keyboard-focusable or sit over the page after a theme switch. */
 .reference-app:not(.nav-open) .ref-sidebar{visibility:hidden;}
 .reference-app.nav-open .ref-sidebar{visibility:visible;}
 .reference-app .ref-sidebar{
  height:100dvh;max-height:100dvh;overflow:hidden;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
 }
 .reference-app .ref-sidebar>nav{overscroll-behavior:contain;}
 .reference-app .ref-sidebar :is(.ref-brand,.ref-sidebar-foot){flex-shrink:0;}
 .reference-app .ref-drawer-close{
  display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;margin:0 12px 10px;padding:8px 12px;border:1px solid currentColor;
  border-radius:6px;color:inherit;background:transparent;font:inherit;text-align:left;
 }
 .reference-app .ref-workspace{
  margin-left:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
 }
 .reference-app .ref-menu-button{display:grid;}
 .reference-app .ref-header-secondary{flex-wrap:wrap;}
 .reference-app .ref-location-tools{flex:1 1 360px;}
 .reference-app :is(.ref-icon-button,.ref-theme-button){min-height:44px;}
 .reference-app .ref-icon-button{width:44px;height:44px;flex-basis:44px;}
 .reference-app .ref-location-tools select{font-size:16px;min-height:44px;}
 .reference-app .ref-sidebar .ref-nav-item{min-height:44px;}
 .reference-app .ref-mobile-nav{
  /* Explicit flex sizing avoids implicit grid tracks and percentage button
     widths contributing to the fixed dock's intrinsic width in WebKit. */
  display:flex;flex-flow:row nowrap;align-items:stretch;gap:4px;
  left:0;right:0;width:100%;min-width:0;max-width:100vw;max-width:100dvw;
  box-sizing:border-box;margin:0;
  padding-left:max(8px,env(safe-area-inset-left,0px));
  padding-right:max(8px,env(safe-area-inset-right,0px));
 }
 .reference-app .ref-mobile-nav>.ref-nav-item{
  flex:1 1 0;width:0;min-width:0;max-width:none;min-height:68px;
  margin:0;padding:7px 2px;box-sizing:border-box;overflow:hidden;
 }
 .reference-app .ref-mobile-nav>.ref-nav-item>span{
  display:block;width:100%;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;
 }
 html[data-reference="true"] .toast{
  right:12px;bottom:calc(96px + env(safe-area-inset-bottom,0px));
  max-width:calc(100vw - 24px);overflow-wrap:anywhere;
 }

 /* Original and Beta keep their existing bottom-navigation interaction on
    tablets too, with the same full-width workspace as the five new themes. */
 html[data-design]:not([data-reference="true"]) .app-shell{
  display:block!important;padding:0 0 calc(104px + env(safe-area-inset-bottom,0px));gap:0;
 }
 html[data-design]:not([data-reference="true"]) .sidebar{
  position:fixed!important;inset:auto 0 0!important;width:100%;
  height:calc(88px + env(safe-area-inset-bottom,0px));max-height:none;
  margin:0;border-radius:0;padding:6px max(8px,env(safe-area-inset-right,0px))
   calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  display:flex;flex-direction:row;align-items:stretch;overflow:hidden;z-index:100;
 }
 html[data-design]:not([data-reference="true"]) .sidebar :is(.brand,.sidebar-foot,
  .modern-nav-heading,.modern-workspace-switch,.modern-sidebar-profile,.modern-settings-button){display:none;}
 html[data-design]:not([data-reference="true"]) .sidebar .nav{
  flex:1 1 auto;min-width:0;width:auto;display:flex;gap:3px;overflow:hidden;
 }
 html[data-design]:not([data-reference="true"]) .sidebar .modern-nav-group{display:contents!important;}
 /* The old compact tablet rail uses !important through 1080px. Match its
    specificity so Beta can become a full-width dock through 1024px. */
 html[data-design="modern"][data-theme="beta"]:not([data-reference="true"]) .sidebar.modern-sidebar{
  width:100%!important;
 }
 html[data-design="modern"][data-theme="beta"]:not([data-reference="true"]) .sidebar.modern-sidebar .modern-nav{
  display:flex!important;
 }
 html[data-design="modern"][data-theme="beta"]:not([data-reference="true"]) .sidebar.modern-sidebar .nav-button>span:last-child{
  display:block!important;
 }
 html[data-design]:not([data-reference="true"]) .sidebar .nav-button{
  flex:1 1 0;min-width:0;max-width:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:4px;padding:6px 3px;
  min-height:60px;text-align:center;font-size:12px;line-height:1.25;
 }
 html[data-design]:not([data-reference="true"]) .sidebar .nav-button>span:last-child{
  display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;
 }
 html[data-design]:not([data-reference="true"]) .sidebar .nav-button.mobile-secondary{display:none;}
 html[data-design]:not([data-reference="true"]) .sidebar .mobile-more{
  display:flex;flex:0 0 60px;margin-left:4px;
 }
 html[data-design]:not([data-reference="true"]) .main{
  min-width:0;width:100%;padding:calc(18px + env(safe-area-inset-top,0px))
   max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));
 }
 html[data-design="modern"]:not([data-reference="true"]) .main.modern-workspace{padding-bottom:24px!important;}
 html[data-design]:not([data-reference="true"]) .branch-bar{
  position:static;min-width:0;max-width:100%;flex-wrap:wrap;
 }
 html[data-design="modern"]:not([data-reference="true"]) .modern-app-topbar{
  margin:0 0 18px;padding:12px;min-width:0;width:100%;
 }
 html[data-design]:not([data-reference="true"]) :is(.topbar,.modern-dashboard-head){flex-wrap:wrap;}
 html[data-design]:not([data-reference="true"]) :is(.top-actions,.modern-dashboard-actions){max-width:100%;flex-wrap:wrap;}
 html[data-design]:not([data-reference="true"]) .design-preview-switch{min-width:0;max-width:100%;flex-wrap:wrap;}
 html[data-design]:not([data-reference="true"]) .branch-select{min-width:0;max-width:100%;}
 html[data-design]:not([data-reference="true"]) .branch-select select{font-size:16px;min-height:44px;}
 html[data-design]:not([data-reference="true"]) .toast{
  bottom:calc(104px + env(safe-area-inset-bottom,0px));right:12px;max-width:calc(100vw - 24px);
 }
 html .modal-backdrop{--dialog-gap:12px;z-index:1200;}
 html .modal :is(input,select,textarea){font-size:16px;}
 html .modal :is(.button,.mobile-more-item){min-height:44px;}
}

@media screen and (max-width:620px){
 html :is(.receivables-table,.receivables-history-table)>tbody{gap:10px;}
 html :is(.receivables-table,.receivables-history-table)>tbody>tr{
  gap:13px 12px;padding:14px;border-radius:10px;
 }
 html .receivables-table>tbody>tr{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"client client" "balance status" "access access" "notes notes" "actions actions";
 }
 html .receivables-history-table>tbody>tr{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"date amount" "client client" "type type" "reference reference" "notes notes" "actions actions";
 }
 html :is(.receivable-card-client,.receivable-history-client)>strong{font-size:15px;}
 html :is(.receivable-card-actions,.receivable-history-actions) .row-actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;
 }
 html :is(.receivable-card-actions,.receivable-history-actions) .button{width:100%;}
 .reference-app .ref-header-primary{gap:8px;}
 .reference-app .ref-context{flex:1 1 0;}
 .reference-app .ref-header-actions{gap:6px;}
 .reference-app .ref-location-tools{
  grid-template-columns:minmax(0,1fr) 44px;gap:8px;flex-basis:auto;
 }
 .reference-app .ref-location-tools:has(.ref-courier-picker){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;
 }
 .reference-app .ref-location-tools:not(:has(.ref-new-branch)){
  grid-template-columns:minmax(0,1fr);
 }
 .reference-app .ref-location-tools:has(.ref-courier-picker):not(:has(.ref-new-branch)){
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
 .reference-app .ref-location-tools :is(label,select){width:100%;}
 .reference-app .ref-workspace-label{display:grid;gap:2px;}
 .reference-app .ref-workspace-label small{overflow-wrap:anywhere;}
 .reference-app .ref-mobile-nav .ref-nav-item{font-size:12px;}
 html .modal-backdrop{--dialog-gap:8px;}
 html .modal{border-radius:14px;}
 html .modal :is(.modal-head,.modal-body,.modal-foot){padding:14px;}
 html .modal-head{gap:10px;align-items:flex-start;}
 html .modal-head h2{font-size:19px;line-height:1.3;}
 html .modal-foot .button{flex:1 1 130px;}
 html .modal-foot>div:has(>.button){display:flex;flex-wrap:wrap;gap:8px;width:100%;}
 html .modal .form-actions>.button{flex:1 1 130px;}
 html[data-design]:not([data-reference="true"]) .main{
  padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));
 }
 html[data-design]:not([data-reference="true"]) .sidebar .mobile-more{flex-basis:50px;}
}

@media screen and (max-height:520px){
 html .modal-backdrop{--dialog-gap:6px;}
 html .modal-head{max-height:30dvh;overflow-y:auto;align-items:flex-start;}
 html .modal-head>.button{position:sticky;top:0;align-self:flex-start;}
 html .modal-foot{max-height:30dvh;overflow-y:auto;}
 .reference-app .ref-sidebar>.ref-brand{min-height:0;padding-block:10px;}
 .reference-app .ref-drawer-close{margin-bottom:6px;}
 .reference-app .ref-sidebar-foot{padding-block:6px;}
}

@container ref-module (max-width:620px){
 html .ref-module :is(.ref-period-controls,.ref-period-controls label){min-width:0;max-width:100%;}
 html .ref-module .ref-period-controls :is(input,select){min-width:0;width:100%;}
 html .ref-module .ref-period-controls :is(.period-bar,.expense-month-bar){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;
 }
 html .ref-module .ref-period-controls :is(.period-bar,.expense-month-bar)>strong{grid-column:1/-1;max-width:none;}
 html .ref-module .ref-period-controls label{display:grid;gap:5px;}
 html .ref-module .ref-period-controls .button{min-height:44px;white-space:normal;}
 html .ref-module .ref-cash-terms>.ref-stat{grid-template-columns:minmax(0,1fr);gap:6px;}
 html .ref-module .ref-cash-terms>.ref-stat .ref-stat-value{text-align:left;font-size:26px;}
}